vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-11-22 14:07:55 +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(); 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();
} }

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

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

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

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

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

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

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

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

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

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

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

@ -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 }">&nbsp;</span> <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> </div>
</form> </form>

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

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

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