Add theme switch
Change-Id: I5b2a546bfa63c31c36e17a3dfc097a36be7028a9
This commit is contained in:
Vincent Fournier
aviau
parent
45aae4bf8a
commit
dd868fc21c
|
|
@ -47,6 +47,10 @@ module.exports = function (grunt) {
|
|||
src: '<%= project.app %>/components/config/config.json',
|
||||
dest: '<%= project.dist %>/components/config/config.json'
|
||||
},
|
||||
{
|
||||
src: '<%= project.app %>/components/config/developmentConfig.json',
|
||||
dest: '<%= project.dist %>/components/config/developmentConfig.json'
|
||||
},
|
||||
{
|
||||
src: '<%= project.app %>/index.html',
|
||||
dest: '<%= project.dist %>/index.html'
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@ angular.module('bansho', [
|
|||
}])
|
||||
|
||||
// Reinitialise objects on url change
|
||||
.run(['$rootScope', 'promisesManager', 'reinitTables', function ($rootScope, promisesManager, reinitTables) {
|
||||
.run(['$rootScope', 'promisesManager', 'reinitTables', 'themeManager',
|
||||
function ($rootScope, promisesManager, reinitTables, themeManager) {
|
||||
themeManager.setTheme();
|
||||
$rootScope.$on('$locationChangeStart', function () {
|
||||
reinitTables();
|
||||
promisesManager.clearAllPromises();
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@ angular.module('bansho.authentication', [])
|
|||
|
||||
}])
|
||||
|
||||
.factory('authService', ['$http', '$location', '$rootScope', 'session', 'configManager', function ($http, $location, $rootScope, session, configManager) {
|
||||
.factory('authService', [ '$http', '$location', '$rootScope', 'session', 'configManager', 'themeManager',
|
||||
function ($http, $location, $rootScope, session, configManager, themeManager) {
|
||||
var authService = {};
|
||||
|
||||
authService.login = function (credentials) {
|
||||
|
|
@ -60,10 +61,12 @@ angular.module('bansho.authentication', [])
|
|||
.post('/surveil/v2/auth/tokens/', credentials)
|
||||
.success(function (data) {
|
||||
$rootScope.isAuthenticated = true;
|
||||
|
||||
session.create(data.access.token.id, data.access.token.expires);
|
||||
$http.defaults.headers.common['X-Auth-Token'] = session.sessionId;
|
||||
|
||||
configManager.fetchConfig(configManager.getDevelopmentConfig().useStoredConfig).then(function () {
|
||||
themeManager.setTheme();
|
||||
$location.path('/view');
|
||||
}, function (message) {
|
||||
throw new Error(message);
|
||||
|
|
@ -86,6 +89,9 @@ angular.module('bansho.authentication', [])
|
|||
$location.path('/login');
|
||||
};
|
||||
|
||||
authService.switchTheme = function () {
|
||||
themeManager.switchTheme();
|
||||
};
|
||||
|
||||
return authService;
|
||||
}])
|
||||
|
|
|
|||
|
|
@ -3,6 +3,45 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('bansho.config', [])
|
||||
.service('themeManager', ['$rootScope', 'configManager',
|
||||
function ($rootScope, configManager) {
|
||||
var THEMES = {
|
||||
DARK: "dark",
|
||||
LIGHT: "light",
|
||||
DEFAULT: "dark"
|
||||
};
|
||||
|
||||
var setThemeClass = function (theme, saveConfig) {
|
||||
$rootScope.themeClass = 'color-scheme--' + theme;
|
||||
$rootScope.themeColor = theme;
|
||||
|
||||
if (saveConfig) {
|
||||
configManager.setThemeAndSave(theme);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the application theme from configManager
|
||||
*
|
||||
* If configManager isn't loaded this will set default.
|
||||
*/
|
||||
this.setTheme = function () {
|
||||
var theme = configManager.getTheme();
|
||||
if (theme) {
|
||||
setThemeClass(theme, false);
|
||||
} else {
|
||||
setThemeClass(THEMES.DARK, false);
|
||||
}
|
||||
};
|
||||
|
||||
this.switchTheme = function () {
|
||||
if ($rootScope.themeColor === THEMES.DARK) {
|
||||
setThemeClass(THEMES.LIGHT, true);
|
||||
} else {
|
||||
setThemeClass(THEMES.DARK, true);
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.service('configManager', ['$http', '$q', function ($http, $q) {
|
||||
var config = {},
|
||||
|
|
@ -41,6 +80,35 @@ angular.module('bansho.config', [])
|
|||
return config.data;
|
||||
};
|
||||
|
||||
this.setThemeAndSave = function (theme) {
|
||||
config.data.banshoConfig.theme = theme;
|
||||
saveConfig();
|
||||
};
|
||||
|
||||
this.getTheme = function () {
|
||||
var theme;
|
||||
|
||||
if (config.data) {
|
||||
theme = config.data.banshoConfig.theme;
|
||||
}
|
||||
|
||||
return theme;
|
||||
};
|
||||
|
||||
var saveConfig = function () {
|
||||
var responsePromise = $q.defer();
|
||||
|
||||
$http.post('surveil/v2/bansho/config', JSON.stringify(config.data))
|
||||
.success(function () {
|
||||
responsePromise.resolve();
|
||||
})
|
||||
.error(function () {
|
||||
responsePromise.reject('Failed to send config to server');
|
||||
});
|
||||
|
||||
return responsePromise.promise;
|
||||
};
|
||||
|
||||
this.fetchConfig = function (useStoredConfig) {
|
||||
var responsePromise = $q.defer();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
{
|
||||
"banshoConfig": {
|
||||
"theme": "dark"
|
||||
},
|
||||
"dashboardConfig": {
|
||||
"title": "Unhandled service problems",
|
||||
"refreshInterval": 0,
|
||||
|
|
|
|||
|
|
@ -131,6 +131,7 @@
|
|||
<li class="topbar__settings__subitem"><a href="#">Missing Plugins</a></li>
|
||||
<li class="topbar__settings__subitem"><a href="#">Object History</a></li>
|
||||
<li class="topbar__settings__subitem"><a href="#">Configure</a></li>
|
||||
<li class="topbar__settings__subitem" ng-click="switchTheme()"><a>Change theme</a></li>
|
||||
<li class="topbar__settings__subitem" ng-click="logout()"><a>Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
angular.module('bansho.topbar', ['bansho.surveil'])
|
||||
|
||||
.controller('TopBarCtrl', ['$rootScope', '$scope', '$interval', 'surveilStatus', 'promisesManager', 'authService',
|
||||
function ($rootScope, $scope, $interval, surveilStatus, promisesManager, authService) {
|
||||
.controller('TopBarCtrl', ['$rootScope', '$scope', '$interval', 'surveilStatus', 'promisesManager', 'authService', 'themeManager',
|
||||
function ($rootScope, $scope, $interval, surveilStatus, promisesManager, authService, themeManager) {
|
||||
var getData,
|
||||
hostProblems,
|
||||
serviceProblems;
|
||||
|
|
@ -27,6 +27,10 @@ angular.module('bansho.topbar', ['bansho.surveil'])
|
|||
$scope.logout = function () {
|
||||
authService.logout();
|
||||
};
|
||||
|
||||
$scope.switchTheme = function () {
|
||||
themeManager.switchTheme();
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('banshoTopbar', function () {
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
<!-- endbuild -->
|
||||
</head>
|
||||
|
||||
<body class="layout color-scheme--dark" ng-app="bansho">
|
||||
<body class="layout" ng-class="themeClass" ng-app="bansho">
|
||||
<!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
|
||||
<div class="layout__container">
|
||||
<aside class="layout__aside sidebar-wrapper collapse" id="sidebarWrapper">
|
||||
|
|
|
|||
Loading…
Reference in New Issue