mirror of
https://github.com/sismics/docs.git
synced 2024-11-14 18:27:58 +01:00
#79: Change custom CSS and app name
This commit is contained in:
parent
faa66e01b6
commit
f5394534f7
@ -56,6 +56,8 @@ public class ThemeResource extends BaseResource {
|
|||||||
JsonObject themeConfig = getThemeConfig();
|
JsonObject themeConfig = getThemeConfig();
|
||||||
JsonObjectBuilder json = Json.createObjectBuilder();
|
JsonObjectBuilder json = Json.createObjectBuilder();
|
||||||
json.add("name", themeConfig.getString("name", "Sismics Docs"));
|
json.add("name", themeConfig.getString("name", "Sismics Docs"));
|
||||||
|
json.add("color", themeConfig.getString("color", "#263238"));
|
||||||
|
json.add("css", themeConfig.getString("css", ""));
|
||||||
return Response.ok().entity(json.build()).build();
|
return Response.ok().entity(json.build()).build();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,7 +13,6 @@ angular.module('docs',
|
|||||||
* Configuring modules.
|
* Configuring modules.
|
||||||
*/
|
*/
|
||||||
.config(function($stateProvider, $httpProvider, RestangularProvider) {
|
.config(function($stateProvider, $httpProvider, RestangularProvider) {
|
||||||
|
|
||||||
// Configuring UI Router
|
// Configuring UI Router
|
||||||
$stateProvider
|
$stateProvider
|
||||||
.state('main', {
|
.state('main', {
|
||||||
@ -381,10 +380,15 @@ angular.module('docs',
|
|||||||
/**
|
/**
|
||||||
* Application initialization.
|
* Application initialization.
|
||||||
*/
|
*/
|
||||||
.run(function($rootScope, $state, $stateParams) {
|
.run(function($rootScope, $state, $stateParams, Restangular) {
|
||||||
$rootScope.$state = $state;
|
$rootScope.$state = $state;
|
||||||
$rootScope.$stateParams = $stateParams;
|
$rootScope.$stateParams = $stateParams;
|
||||||
$rootScope.pageTitle = 'Sismics Docs';
|
|
||||||
|
// Fetch the current theme configuration
|
||||||
|
$rootScope.appName = '';
|
||||||
|
Restangular.one('theme').get().then(function(data) {
|
||||||
|
$rootScope.appName = data.name;
|
||||||
|
});
|
||||||
})
|
})
|
||||||
/**
|
/**
|
||||||
* Redirection support for ui-router.
|
* Redirection support for ui-router.
|
||||||
|
@ -3,19 +3,20 @@
|
|||||||
/**
|
/**
|
||||||
* Settings theme page controller.
|
* Settings theme page controller.
|
||||||
*/
|
*/
|
||||||
angular.module('docs').controller('SettingsTheme', function($scope, Restangular) {
|
angular.module('docs').controller('SettingsTheme', function($scope, $rootScope, Restangular) {
|
||||||
// Fetch the current theme configuration
|
// Fetch the current theme configuration
|
||||||
$scope.theme = {
|
Restangular.one('theme').get().then(function(data) {
|
||||||
color: $('.navbar').css('background-color')
|
$scope.theme = data;
|
||||||
};
|
$rootScope.appName = $scope.theme.name;
|
||||||
|
});
|
||||||
|
|
||||||
// Update the main color
|
// Update the theme
|
||||||
$scope.updateColor = function(color) {
|
$scope.update = function() {
|
||||||
Restangular.one('theme').post('color', {
|
$scope.theme.name = $scope.theme.name.length == 0 ? 'Sismics Docs' : $scope.theme.name;
|
||||||
color: color
|
Restangular.one('theme').post('', $scope.theme).then(function() {
|
||||||
}).then(function() {
|
var stylesheet = $('#theme-stylesheet')[0];
|
||||||
var stylesheet = $('#theme-stylesheet')[0];
|
stylesheet.href = stylesheet.href.replace(/\?.*|$/, '?' + new Date().getTime());
|
||||||
stylesheet.href = stylesheet.href.replace(/\?.*|$/, '?' + new Date().getTime());
|
$rootScope.appName = $scope.theme.name;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
@ -95,7 +95,13 @@ angular.module('share',
|
|||||||
/**
|
/**
|
||||||
* Application initialization.
|
* Application initialization.
|
||||||
*/
|
*/
|
||||||
.run(function($rootScope, $state, $stateParams) {
|
.run(function($rootScope, $state, $stateParams, Restangular) {
|
||||||
$rootScope.$state = $state;
|
$rootScope.$state = $state;
|
||||||
$rootScope.$stateParams = $stateParams;
|
$rootScope.$stateParams = $stateParams;
|
||||||
|
|
||||||
|
// Fetch the current theme configuration
|
||||||
|
$rootScope.appName = '';
|
||||||
|
Restangular.one('theme').get().then(function(data) {
|
||||||
|
$rootScope.appName = data.name;
|
||||||
|
});
|
||||||
});
|
});
|
@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html ng-app="docs">
|
<html ng-app="docs">
|
||||||
<head>
|
<head>
|
||||||
<title ng-bind-template="{{ pageTitle }}">Sismics Docs</title>
|
<title ng-bind-template="{{ appName }}">Sismics Docs</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="shortcut icon" href="favicon.png" />
|
<link rel="shortcut icon" href="favicon.png" />
|
||||||
@ -103,7 +103,7 @@
|
|||||||
<img src="favicon.png" />
|
<img src="favicon.png" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="navbar-brand" href="#"> Sismics Docs</a>
|
<a class="navbar-brand" href="#"> {{ appName }}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" collapse="isCollapsed">
|
<div class="collapse navbar-collapse" collapse="isCollapsed">
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
<div ng-if="!user.totp_enabled">
|
<div ng-if="!user.totp_enabled">
|
||||||
<p>
|
<p>
|
||||||
Two-factor authentication allows you to add a layer of security on your <strong>Sismics Docs</strong> account.<br/>
|
Two-factor authentication allows you to add a layer of security on your <strong>{{ appName }}</strong> account.<br/>
|
||||||
Before activating this feature, make sure you have a TOTP-compatible app on your phone:
|
Before activating this feature, make sure you have a TOTP-compatible app on your phone:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
@ -17,7 +17,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<p>
|
<p>
|
||||||
Those applications automatically generate a validation code that changes after a certain period of time.<br/>
|
Those applications automatically generate a validation code that changes after a certain period of time.<br/>
|
||||||
You will be required to enter this validation code each time you login on <strong>Sismics Docs</strong>.
|
You will be required to enter this validation code each time you login on <strong>{{ appName }}</strong>.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<button class="btn btn-primary" ng-click="enableTotp()">Enable two-factor authentication</button>
|
<button class="btn btn-primary" ng-click="enableTotp()">Enable two-factor authentication</button>
|
||||||
@ -34,7 +34,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
Two-factor authentication is enabled on your account.<br/>
|
Two-factor authentication is enabled on your account.<br/>
|
||||||
Each time you login on <strong>Sismics Docs</strong>, you will be asked a validation code from your configured phone app.<br/>
|
Each time you login on <strong>{{ appName }}</strong>, you will be asked a validation code from your configured phone app.<br/>
|
||||||
If you loose your phone, you will not be able to login into your account but active sessions will allow you to regenerate a secrey key.
|
If you loose your phone, you will not be able to login into your account but active sessions will allow you to regenerate a secrey key.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
|
@ -1,8 +1,26 @@
|
|||||||
<h1>Theme <small>customization</small></h1>
|
<h1>Theme <small>customization</small></h1>
|
||||||
<form class="form-horizontal" name="editColorForm" novalidate>
|
<form class="form-horizontal" name="editColorForm" novalidate>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label" for="inputName">Application name</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input type="text" class="form-control"
|
||||||
|
id="inputName" ng-model="theme.name" ng-blur="update()" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="col-sm-2 control-label" for="inputColor">Main color</label>
|
<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)"
|
<div class="col-sm-1">
|
||||||
data-color="" ng-model="theme.color" ng-style="{ 'background': theme.color }"> </span>
|
<span colorpicker class="btn btn-default" id="inputColor" on-hide="update()"
|
||||||
|
data-color="" ng-model="theme.color" ng-style="{ 'background': theme.color }"> </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label" for="inputCss">Custom CSS</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<textarea class="form-control" rows="6" placeholder="Custom CSS to add after the main stylesheet"
|
||||||
|
id="inputCss" ng-model="theme.css" ng-blur="update()"></textarea>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html ng-app="share">
|
<html ng-app="share">
|
||||||
<head>
|
<head>
|
||||||
<title>Sismics Docs</title>
|
<title>{{ appName }}</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="shortcut icon" href="favicon.png" />
|
<link rel="shortcut icon" href="favicon.png" />
|
||||||
@ -49,7 +49,7 @@
|
|||||||
<img src="favicon.png" />
|
<img src="favicon.png" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="navbar-brand" href="#"> Sismics Docs</a>
|
<a class="navbar-brand" href="#"> {{ appName }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -31,6 +31,8 @@ public class TestThemeResource extends BaseJerseyTest {
|
|||||||
JsonObject json = target().path("/theme").request()
|
JsonObject json = target().path("/theme").request()
|
||||||
.get(JsonObject.class);
|
.get(JsonObject.class);
|
||||||
Assert.assertEquals("Sismics Docs", json.getString("name"));
|
Assert.assertEquals("Sismics Docs", json.getString("name"));
|
||||||
|
Assert.assertEquals("#263238", json.getString("color"));
|
||||||
|
Assert.assertEquals("", json.getString("css"));
|
||||||
|
|
||||||
// Update the main color as admin
|
// Update the main color as admin
|
||||||
target().path("/theme").request()
|
target().path("/theme").request()
|
||||||
@ -50,5 +52,7 @@ public class TestThemeResource extends BaseJerseyTest {
|
|||||||
json = target().path("/theme").request()
|
json = target().path("/theme").request()
|
||||||
.get(JsonObject.class);
|
.get(JsonObject.class);
|
||||||
Assert.assertEquals("My App", json.getString("name"));
|
Assert.assertEquals("My App", json.getString("name"));
|
||||||
|
Assert.assertEquals("#ff0000", json.getString("color"));
|
||||||
|
Assert.assertEquals(".body { content: 'Custom CSS'; }", json.getString("css"));
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user