#79: Change theme color UI

This commit is contained in:
jendib 2016-04-23 23:47:33 +02:00
parent 4e768e9103
commit 6e1276293f
6 changed files with 42 additions and 2 deletions

View File

@ -37,7 +37,7 @@ public class ThemeResource extends BaseResource {
// Build the stylesheet // Build the stylesheet
StringBuilder sb = new StringBuilder(); StringBuilder sb = new StringBuilder();
sb.append(new Selector(".navbar") 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(); return Response.ok().entity(sb.toString()).build();
} }

View File

@ -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', { .state('settings.user', {
url: '/user', url: '/user',
views: { views: {

View File

@ -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());
});
}
});

View File

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

View File

@ -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/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/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/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> <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/log" href="#/settings/log">Server logs</a>
</ul> </ul>
</div> </div>

View File

@ -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>