vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-11-14 18:27:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

#79: Change custom CSS and app name

Browse Source
This commit is contained in:
jendib 2016-05-08 15:38:47 +02:00
parent faa66e01b6
commit f5394534f7
No known key found for this signature in database
GPG Key ID: 06EE7F699579166F
9 changed files with 62 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,6 +56,8 @@ public class ThemeResource extends BaseResource {
JsonObject themeConfig = getThemeConfig();
JsonObjectBuilder json = Json.createObjectBuilder();
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();
}

10
docs-web/src/main/webapp/src/app/docs/app.js
View File

@ -13,7 +13,6 @@ angular.module('docs',
* Configuring modules.
*/
.config(function($stateProvider, $httpProvider, RestangularProvider) {
// Configuring UI Router
$stateProvider
.state('main', {
@ -381,10 +380,15 @@ angular.module('docs',
/**
* Application initialization.
*/
.run(function($rootScope, $state, $stateParams) {
.run(function($rootScope, $state, $stateParams, Restangular) {
$rootScope.$state = $state;
$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.

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

@ -3,19 +3,20 @@
/**
* Settings theme page controller.
*/
angular.module('docs').controller('SettingsTheme', function($scope, Restangular) {
// Fetch the current theme configuration
$scope.theme = {
color: $('.navbar').css('background-color')
};
angular.module('docs').controller('SettingsTheme', function($scope, $rootScope, Restangular) {
// Fetch the current theme configuration
Restangular.one('theme').get().then(function(data) {
$scope.theme = data;
$rootScope.appName = $scope.theme.name;
});
// 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());
});
}
// Update the theme
$scope.update = function() {
$scope.theme.name = $scope.theme.name.length == 0 ? 'Sismics Docs' : $scope.theme.name;
Restangular.one('theme').post('', $scope.theme).then(function() {
var stylesheet = $('#theme-stylesheet')[0];
stylesheet.href = stylesheet.href.replace(/\?.*|$/, '?' + new Date().getTime());
$rootScope.appName = $scope.theme.name;
});
}
});

8
docs-web/src/main/webapp/src/app/share/app.js
View File

@ -95,7 +95,13 @@ angular.module('share',
/**
* Application initialization.
*/
.run(function($rootScope, $state, $stateParams) {
.run(function($rootScope, $state, $stateParams, Restangular) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
// Fetch the current theme configuration
$rootScope.appName = '';
Restangular.one('theme').get().then(function(data) {
$rootScope.appName = data.name;
});
});

4
docs-web/src/main/webapp/src/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html ng-app="docs">
<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 name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.png" />
@ -103,7 +103,7 @@
<img src="favicon.png" />
</div>
<a class="navbar-brand" href="#"> Sismics Docs</a>
<a class="navbar-brand" href="#"> {{ appName }}</a>
</div>
<div class="collapse navbar-collapse" collapse="isCollapsed">

6
docs-web/src/main/webapp/src/partial/docs/settings.security.html
View File

@ -7,7 +7,7 @@
<div ng-if="!user.totp_enabled">
<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:
</p>
<ul>
@ -17,7 +17,7 @@
</ul>
<p>
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>
<button class="btn btn-primary" ng-click="enableTotp()">Enable two-factor authentication</button>
@ -34,7 +34,7 @@
</div>
<p>
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.
</p>
<p>

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

@ -1,8 +1,26 @@
<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="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">
<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 class="col-sm-1">
<span colorpicker class="btn btn-default" id="inputColor" on-hide="update()"
data-color="" ng-model="theme.color" ng-style="{ 'background': theme.color }">&nbsp;&nbsp;&nbsp;</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>
</form>

4
docs-web/src/main/webapp/src/share.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html ng-app="share">
<head>
<title>Sismics Docs</title>
<title>{{ appName }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.png" />
@ -49,7 +49,7 @@
<img src="favicon.png" />
</div>
<a class="navbar-brand" href="#"> Sismics Docs</a>
<a class="navbar-brand" href="#"> {{ appName }}</a>
</div>
</div>

4
docs-web/src/test/java/com/sismics/docs/rest/TestThemeResource.java
View File

@ -31,6 +31,8 @@ public class TestThemeResource extends BaseJerseyTest {
JsonObject json = target().path("/theme").request()
.get(JsonObject.class);
Assert.assertEquals("Sismics Docs", json.getString("name"));
Assert.assertEquals("#263238", json.getString("color"));
Assert.assertEquals("", json.getString("css"));
// Update the main color as admin
target().path("/theme").request()
@ -50,5 +52,7 @@ public class TestThemeResource extends BaseJerseyTest {
json = target().path("/theme").request()
.get(JsonObject.class);
Assert.assertEquals("My App", json.getString("name"));
Assert.assertEquals("#ff0000", json.getString("color"));
Assert.assertEquals(".body { content: 'Custom CSS'; }", json.getString("css"));
}
}