#79: Change theme color UI

docs-web/src/main/java/com/sismics/docs/rest/resource/ThemeResource.java

@@ -37,7 +37,7 @@ public class ThemeResource extends BaseResource {
         // Build the stylesheet
     	StringBuilder sb = new StringBuilder();
     	sb.append(new Selector(".navbar")
-            .rule("background-color", themeConfig.getString("color", "inherit")));
+            .rule("background-color", themeConfig.getString("color", "#263238")));
 
         return Response.ok().entity(sb.toString()).build();
     }

docs-web/src/main/webapp/src/app/docs/app.js

@@ -88,6 +88,15 @@ angular.module('docs',
         }
       }
     })
+    .state('settings.theme', {
+      url: '/theme',
+      views: {
+        'settings': {
+          templateUrl: 'partial/docs/settings.theme.html',
+          controller: 'SettingsTheme'
+        }
+      }
+    })
     .state('settings.user', {
       url: '/user',
       views: {

docs-web/src/main/webapp/src/app/docs/controller/settings/SettingsTheme.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * Settings theme page controller.
+ */
+angular.module('docs').controller('SettingsTheme', function($scope, Restangular) {
+    // Fetch the current theme configuration
+    $scope.theme = {
+        color: $('.navbar').css('background-color')
+    };
+
+    // Update the main color
+    $scope.updateColor = function(color) {
+        Restangular.one('theme').post('color', {
+            color: color
+        }).then(function() {
+           var stylesheet = $('#theme-stylesheet')[0];
+            stylesheet.href = stylesheet.href.replace(/\?.*|$/, '?' + new Date().getTime());
+        });
+    }
+});

docs-web/src/main/webapp/src/index.html

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="style/colorpicker.css" type="text/css" />
     <link rel="stylesheet/less" href="style/main.less" type="text/css" />
     <!-- endref -->
-    <link rel="stylesheet" href="../api/theme/stylesheet" type="text/css" />
+    <link rel="stylesheet" href="../api/theme/stylesheet" type="text/css" id="theme-stylesheet" />
     <!-- ref:remove -->
     <script>
       less = {
@@ -59,6 +59,7 @@
     <script src="app/docs/controller/settings/Settings.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsDefault.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsAccount.js" type="text/javascript"></script>
+    <script src="app/docs/controller/settings/SettingsTheme.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsSecurity.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsSecurityModalDisableTotp.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsSession.js" type="text/javascript"></script>

docs-web/src/main/webapp/src/partial/docs/settings.html

@@ -15,6 +15,7 @@
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/user.*" href="#/settings/user">Users</a>
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/group.*" href="#/settings/group">Groups</a>
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/vocabulary.*" href="#/settings/vocabulary">Vocabularies</a>
+        <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/theme" href="#/settings/theme">Theme</a>
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/log" href="#/settings/log">Server logs</a>
       </ul>
     </div>

docs-web/src/main/webapp/src/partial/docs/settings.theme.html

@@ -0,0 +1,8 @@
+<h1>Theme <small>customization</small></h1>
+<form class="form-horizontal" name="editColorForm" novalidate>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="inputColor">Main color</label>
+    <span colorpicker class="col-sm-1 btn btn-default" id="inputColor" on-hide="updateColor(theme.color)"
+          data-color="" ng-model="theme.color" ng-style="{ 'background': theme.color }">&nbsp;</span>
+  </div>
+</form>