Skip to content

Commit 870f2ff

Browse files
nook24nook24
authored
Merge pull request #22 from statusengine/night-mode
Add night mode to Statusengine Ui
2 parents 7a20e3c + 3dda109 commit 870f2ff

File tree

5 files changed

+329
-8
lines changed

5 files changed

+329
-8
lines changed

‎public/css/night-mode.css‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
/*
2+
* Licensed under MIT
3+
* Night Mode for AdminLTE / Statusengine UI
4+
*
5+
* Based on:
6+
* AdminLTE v2.3.0
7+
* Author: Almsaeed Studio
8+
* Website: Almsaeed Studio <http://almsaeedstudio.com>
9+
* License: Licensed under MIT
10+
*
11+
* Colors from:
12+
* https://bootswatch.com/4/slate/bootstrap.min.css
13+
* Copyright 2012-2018 Thomas Park
14+
* Licensed under MIT
15+
* Based on Bootstrap
16+
*/
17+
18+
/** Core Layout **/
19+
.night-mode body {
20+
color: #aaa;
21+
background-color: #272B30;
22+
}
23+
24+
.night-mode hr {
25+
border-top: 1px solid rgba(0, 0, 0, 0.6);
26+
}
27+
28+
.night-mode .content-wrapper, .right-side {
29+
background-color: #32383e;
30+
}
31+
32+
.night-mode .main-footer {
33+
background: #272B30;
34+
color: #aaa;
35+
border-top: 1px solid rgba(0, 0, 0, 0.3);
36+
}
37+
38+
/** Bootstrap Drop Downs **/
39+
40+
.night-mode .dropdown-menu {
41+
background-color: #32383e;
42+
border: 1px solid rgba(0, 0, 0, 0.6);
43+
}
44+
45+
.night-mode .dropdown-menu > .divider {
46+
background-color: rgba(0, 0, 0, 0.3);
47+
}
48+
49+
.night-mode .dropdown-menu > li > a:hover {
50+
background-color: #272B30;
51+
color: #FFF;
52+
}
53+
54+
.night-mode .navbar-nav > .notifications-menu > .dropdown-menu > li.header, .navbar-nav > .messages-menu > .dropdown-menu > li.header, .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
55+
background-color: #32383e;
56+
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
57+
color: #aaa;
58+
}
59+
60+
.night-mode .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
61+
color: #aaa;
62+
}
63+
64+
.night-mode .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover, .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover, .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
65+
background: #1c1e22;
66+
text-decoration: none;
67+
}
68+
69+
.night-mode .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a, .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a, .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
70+
display: block;
71+
white-space: nowrap;
72+
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
73+
}
74+
75+
.night-mode .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a, .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a, .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
76+
background-color: #32383e;
77+
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
78+
color: #aaa !important;
79+
}
80+
81+
.night-mode #pageSettings {
82+
color: #aaa;
83+
}
84+
85+
.night-mode .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
86+
background-color: #272B30;
87+
}
88+
89+
/** row tables **/
90+
.night-mode .row-even {
91+
background-color: #3A3F44;
92+
}
93+
94+
.night-mode .row-hover:hover {
95+
background-color: #2e3236;
96+
}
97+
98+
/** AdminLTE menu search **/
99+
.skin-blue .sidebar-form input[type="text"]:focus, .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
100+
background-color: #272B30;
101+
color: #aaa;
102+
}
103+
104+
/** AdminLTE Box **/
105+
106+
.night-mode .box {
107+
position: relative;
108+
border-radius: 3px;
109+
background: #272B30;
110+
margin-bottom: 20px;
111+
width: 100%;
112+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
113+
}
114+
115+
.night-mode .box-header {
116+
color: #aaa;
117+
}
118+
119+
.night-mode .box-header.with-border {
120+
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
121+
}
122+
123+
.night-mode .box-body {
124+
color: #aaa;
125+
}
126+
127+
/** Bootstrap Modal **/
128+
.night-mode .modal-header {
129+
color: #aaa;
130+
background-color: #32383e;
131+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
132+
}
133+
134+
.night-mode .modal-body {
135+
color: #aaa;
136+
background-color: #32383e;
137+
}
138+
139+
.night-mode .modal-footer {
140+
color: #aaa;
141+
background-color: #32383e;
142+
border-top: 1px solid rgba(0, 0, 0, 0.2);
143+
}
144+
145+
/** Overwrite btn-default **/
146+
.night-mode .btn-default {
147+
color: #ffffff;
148+
background-color: #3A3F40;
149+
border-color: #000000;
150+
}
151+
152+
.night-mode .btn-default:hover,
153+
.night-mode .btn-default:focus,
154+
.night-mode .btn-default:active,
155+
.night-mode .btn-default.active,
156+
.open .dropdown-toggle.night-mode .btn-default {
157+
color: #ffffff;
158+
background-color: #282C2F;
159+
border-color: #000000;
160+
}
161+
162+
.night-mode .btn-default:active,
163+
.night-mode .btn-default.active,
164+
.open .dropdown-toggle.night-mode .btn-default {
165+
background-image: none;
166+
}
167+
168+
.night-mode .btn-default.disabled,
169+
.night-mode .btn-default[disabled],
170+
fieldset[disabled] .night-mode .btn-default,
171+
.night-mode .btn-default.disabled:hover,
172+
.night-mode .btn-default[disabled]:hover,
173+
fieldset[disabled] .night-mode .btn-default:hover,
174+
.night-mode .btn-default.disabled:focus,
175+
.night-mode .btn-default[disabled]:focus,
176+
fieldset[disabled] .night-mode .btn-default:focus,
177+
.night-mode .btn-default.disabled:active,
178+
.night-mode .btn-default[disabled]:active,
179+
fieldset[disabled] .night-mode .btn-default:active,
180+
.night-mode .btn-default.disabled.active,
181+
.night-mode .btn-default[disabled].active,
182+
fieldset[disabled] .night-mode .btn-default.active {
183+
background-color: #3A3F40;
184+
border-color: #000000;
185+
}
186+
187+
.night-mode .btn-default .badge {
188+
color: #3A3F40;
189+
background-color: #ffffff;
190+
}
191+
192+
.night-mode .open > .dropdown-toggle.btn-default {
193+
color: #FFF;
194+
background-color: #3A3F40;
195+
border-color: #000000;
196+
}
197+
198+
/** btn-app **/
199+
.night-mode .btn-app {
200+
color: #FFFFFF;
201+
background-color: #3A3F40;
202+
border-color: #000000;
203+
}
204+
205+
.night-mode .btn-app:hover,
206+
.night-mode .btn-app:focus,
207+
.night-mode .btn-app:active,
208+
.night-mode .btn-app.active,
209+
.open .dropdown-toggle.night-mode .btn-app {
210+
color: #FFFFFF;
211+
background-color: #282C2F;
212+
border-color: #000000;
213+
}
214+
215+
.night-mode .btn-app:active,
216+
.night-mode .btn-app.active,
217+
.open .dropdown-toggle.night-mode .btn-app {
218+
background-image: none;
219+
}
220+
221+
.night-mode .btn-app.disabled,
222+
.night-mode .btn-app[disabled],
223+
fieldset[disabled] .night-mode .btn-app,
224+
.night-mode .btn-app.disabled:hover,
225+
.night-mode .btn-app[disabled]:hover,
226+
fieldset[disabled] .night-mode .btn-app:hover,
227+
.night-mode .btn-app.disabled:focus,
228+
.night-mode .btn-app[disabled]:focus,
229+
fieldset[disabled] .night-mode .btn-app:focus,
230+
.night-mode .btn-app.disabled:active,
231+
.night-mode .btn-app[disabled]:active,
232+
fieldset[disabled] .night-mode .btn-app:active,
233+
.night-mode .btn-app.disabled.active,
234+
.night-mode .btn-app[disabled].active,
235+
fieldset[disabled] .night-mode .btn-app.active {
236+
background-color: #3A3F40;
237+
border-color: #000000;
238+
}
239+
240+
.night-mode .btn-app .badge {
241+
color: #3A3F40;
242+
background-color: #FFFFFF;
243+
}
244+
245+
/** Input fields **/
246+
.night-mode .form-control {
247+
color: #FFF;
248+
background-color: #3A3F40;
249+
border-color: #000000;
250+
}
251+
252+
/** code **/
253+
.night-mode code {
254+
background: #272B30;
255+
}
256+
257+
/** well **/
258+
.night-mode .well {
259+
background-color: #3A3F44;
260+
border: 1px solid rgba(0, 0, 0, 0.6);
261+
262+
}
263+
264+
.night-mode .text-navy {
265+
color: #FFF !important;
266+
}

‎public/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@
6161

6262

6363
<script type="text/javascript" src="js/scripts/services/ReloadService.js"></script>
64+
<script type="text/javascript" src="js/scripts/services/NightModeService.js"></script>
65+
6466

6567
<script type="text/javascript" src="js/scripts/controllers/IndexController.js"></script>
6668
<script type="text/javascript" src="js/scripts/controllers/DashboardController.js"></script>
@@ -117,6 +119,7 @@
117119
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/>
118120
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css"/>
119121
<link rel="stylesheet" href="css/app.css"/>
122+
<link rel="stylesheet" href="css/night-mode.css" />
120123

121124
</head>
122125
<body class="skin-blue sidebar-mini">

‎public/js/scripts/directives/ReloadConfigDirective.js‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,59 @@
1-
angular.module('Statusengine').directive('reloadConfig', function (ReloadService) {
1+
angular.module('Statusengine').directive('reloadConfig', function(ReloadService, NightModeService){
22
return {
33
restrict: 'A',
44
templateUrl: 'templates/directives/reloadconfig.html',
55
scope: {},
6-
controller: function ($scope, $http) {
6+
controller: function($scope, $http){
77

8-
$('#pageSettings').click(function (event) {
8+
$('#pageSettings').click(function(event){
99
event.stopPropagation();
1010
});
1111

1212
$scope.do_auto_reload = ReloadService.getAutoReloadEnabled();
1313
$scope.ack_and_downtime_is_ok = ReloadService.getAckAndDowntimeIsOk();
1414
$scope.autoreload_frequency = String(ReloadService.getAutoReloadFrequency()); //String() cast fixe selected
1515
$scope.isLoggedIn = false;
16+
$scope.nightMode = NightModeService.isNightModeEnabled();
17+
if($scope.nightMode){
18+
$('body').addClass('night-mode');
19+
}
1620

17-
$scope.$watch('do_auto_reload', function () {
21+
22+
$scope.$watch('nightMode', function(){
23+
if($scope.nightMode === false){
24+
$('body').removeClass('night-mode');
25+
NightModeService.disableNightMode();
26+
}
27+
28+
if($scope.nightMode === true){
29+
$('body').addClass('night-mode');
30+
NightModeService.enableNightMode();
31+
}
32+
});
33+
34+
$scope.$watch('do_auto_reload', function(){
1835
ReloadService.setAutoReloadEnabled($scope.do_auto_reload);
1936
});
2037

21-
$scope.$watch('ack_and_downtime_is_ok', function () {
38+
$scope.$watch('ack_and_downtime_is_ok', function(){
2239
ReloadService.setAckAndDowntimeIsOk($scope.ack_and_downtime_is_ok);
2340
});
2441

2542
$scope.$watch('autoreload_frequency', function(){
2643
ReloadService.setAutoReloadFrequency($scope.autoreload_frequency);
2744
});
2845

46+
2947
$scope.checkLoginState = function(){
3048
$http.get("/api/index.php/loginstate", {}
31-
).then(function (result) {
49+
).then(function(result){
3250
$scope.isLoggedIn = result.data.isLoggedIn;
3351
});
3452
};
3553

3654
$scope.logout = function(){
3755
$http.get("/api/index.php/logout", {}
38-
).then(function (result) {
56+
).then(function(result){
3957
$scope.isLoggedIn = false;
4058
window.location = '/login.html';
4159
});

‎public/js/scripts/services/NightModeService.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
angular.module('Statusengine')
2+
.service('NightModeService', function(){
3+
var nightModeEnabled = false;
4+
5+
if(window.localStorage.getItem('nightMode') === 'true'){
6+
nightModeEnabled = true;
7+
}
8+
9+
return {
10+
isNightModeEnabled: function(){
11+
return nightModeEnabled;
12+
},
13+
enableNightMode: function(){
14+
nightModeEnabled = true;
15+
window.localStorage.setItem('nightMode', true);
16+
},
17+
disableNightMode: function(){
18+
nightModeEnabled = false;
19+
window.localStorage.removeItem('nightMode');
20+
}
21+
}
22+
});

‎public/templates/directives/reloadconfig.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,19 @@
4242
</div>
4343
</div>
4444
</div>
45-
</div>
45+
46+
<div class="col-xs-12 text-center">
47+
<div class="form-group">
48+
<div class="checkbox">
49+
<label>
50+
<input type="checkbox" ng-model="nightMode">
51+
Night mode
52+
<i class="fa fa-moon-o"></i>
53+
</label>
54+
</div>
55+
</div>
56+
</div>
57+
4658
</div>
4759
</li>
4860

0 commit comments

Comments
 (0)