First version of night time mode in the web app.

This commit is contained in:
Ylian Saint-Hilaire 2019-05-10 15:49:44 -07:00
parent 114bad3052
commit d5655a9fdf
6 changed files with 99 additions and 18 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -28,6 +28,11 @@ body {
padding: 0; padding: 0;
} }
.night #container {
color: #bbb;
background-color: #000;
}
.fullscreen.login #container { .fullscreen.login #container {
-ms-grid-rows: 66px 24px 1fr 45px; -ms-grid-rows: 66px 24px 1fr 45px;
grid-template-rows: 66px 24px auto 45px; grid-template-rows: 66px 24px auto 45px;
@ -266,6 +271,10 @@ body {
min-width: unset; min-width: unset;
} }
.night #column_l {
background-color: #000;
}
.menu_stack.fullscreen.fulldesk #column_l { .menu_stack.fullscreen.fulldesk #column_l {
-ms-grid-column: 1; -ms-grid-column: 1;
-ms-grid-row: 1; -ms-grid-row: 1;
@ -618,6 +627,11 @@ body {
border-spacing: 0; border-spacing: 0;
} }
.night #devListToolbarSpan {
color: black;
background-color: #d3d9d6;
}
#SearchInput { #SearchInput {
width: 120px; width: 120px;
} }
@ -911,12 +925,12 @@ NoMeshesPanel img {
} }
#p10html2 thead { #p10html2 thead {
background-color: #AAAAAA; background-color: #AAA;
font-weight: bold; font-weight: bold;
} }
#p10html2 thead tr { #p10html2 thead tr {
background-color: #AAAAAA; background-color: #AAA;
font-weight: bold; font-weight: bold;
} }
@ -1046,6 +1060,10 @@ a {
cursor: pointer; cursor: pointer;
} }
.night a {
color: #369;
}
.i1 { .i1 {
background: url(../images/icons50.png) 0px 0px; background: url(../images/icons50.png) 0px 0px;
height: 50px; height: 50px;
@ -1385,7 +1403,6 @@ a {
.style7 { .style7 {
font-size: large; font-size: large;
background-color: #FFFFFF;
width: 180px; width: 180px;
} }
@ -1398,6 +1415,10 @@ a {
background-color: #C9C9C9; background-color: #C9C9C9;
} }
.night .style10 {
color: #333;
}
.style11 { .style11 {
font-size: large; font-size: large;
background-color: #C9C9C9; background-color: #C9C9C9;
@ -1411,7 +1432,6 @@ a {
.auto-style1 { .auto-style1 {
text-align: right; text-align: right;
background-color: #D3D9D6;
} }
#pTable .auto-style1 { #pTable .auto-style1 {
@ -1419,6 +1439,14 @@ a {
float: right; float: right;
} }
.night .auto-style1 {
color: black;
}
.night #pTable {
color: black;
}
.icon2 { .icon2 {
float: left; float: left;
margin: 7px; margin: 7px;
@ -1478,7 +1506,6 @@ a {
-o-user-select: none; -o-user-select: none;
cursor: default; cursor: default;
-khtml-user-drag: element; -khtml-user-drag: element;
background-color: white;
clear: both; clear: both;
} }
@ -1505,12 +1532,16 @@ a {
/* fallback (Opera) */ /* fallback (Opera) */
/* Mozilla: */ /* Mozilla: */
/* Chrome, Safari:*/ /* Chrome, Safari:*/
background-image: linear-gradient(to right, #ffffff 0%, #c9c9c9 100%); background-image: linear-gradient(to right, #fff 0%, #c9c9c9 100%);
background-color: #c9c9c9; background-color: #c9c9c9;
background-repeat: repeat; background-repeat: repeat;
background-attachment: scroll; background-attachment: scroll;
} }
.night .g1 {
background-image: linear-gradient(to right, #000 0%, #c9c9c9 100%);
}
#p3events .g1 { #p3events .g1 {
float: none; float: none;
} }
@ -1521,7 +1552,11 @@ a {
} }
.g1s { .g1s {
background-image: linear-gradient(to right, #ffffff 0%, #b9b9b9 100%); background-image: linear-gradient(to right, #fff 0%, #b9b9b9 100%);
}
.night .g1s {
background-image: linear-gradient(to right, #000 0%, #b9b9b9 100%);
} }
.g2 { .g2 {
@ -1532,12 +1567,16 @@ a {
/* fallback (Opera) */ /* fallback (Opera) */
/* Mozilla: */ /* Mozilla: */
/* Chrome, Safari:*/ /* Chrome, Safari:*/
background-image: linear-gradient(to right, #c9c9c9 0%, #ffffff 100%); background-image: linear-gradient(to right, #c9c9c9 0%, #fff 100%);
background-color: #c9c9c9; background-color: #c9c9c9;
background-repeat: repeat; background-repeat: repeat;
background-attachment: scroll; background-attachment: scroll;
} }
.night .g2 {
background-image: linear-gradient(to right, #c9c9c9 0%, #000 100%);
}
#p3events .g2 { #p3events .g2 {
float: none; float: none;
} }
@ -1548,7 +1587,11 @@ a {
} }
.g2s { .g2s {
background-image: linear-gradient(to right, #b9b9b9 0%, #ffffff 100%); background-image: linear-gradient(to right, #b9b9b9 0%, #fff 100%);
}
.night .g2s {
background-image: linear-gradient(to right, #b9b9b9 0%, #000 100%);
} }
.h1pre { .h1pre {
@ -1566,12 +1609,16 @@ a {
/* fallback (Opera) */ /* fallback (Opera) */
/* Mozilla: */ /* Mozilla: */
/* Chrome, Safari:*/ /* Chrome, Safari:*/
background-image: linear-gradient(to right, #ffffff 0%, #d3d9d6 100%); background-image: linear-gradient(to right, #fff 0%, #d3d9d6 100%);
background-color: #d3d9d6; background-color: #d3d9d6;
background-repeat: repeat; background-repeat: repeat;
background-attachment: scroll; background-attachment: scroll;
} }
.night .h1 {
background-image: linear-gradient(to right, #000 0%, #d3d9d6 100%);
}
.h2end { .h2end {
height: 100%; height: 100%;
width: 20px; width: 20px;
@ -1586,12 +1633,16 @@ a {
/* fallback (Opera) */ /* fallback (Opera) */
/* Mozilla: */ /* Mozilla: */
/* Chrome, Safari:*/ /* Chrome, Safari:*/
background-image: linear-gradient(to right, #d3d9d6 0%, #ffffff 100%); background-image: linear-gradient(to right, #d3d9d6 0%, #fff 100%);
background-color: #d3d9d6; background-color: #d3d9d6;
background-repeat: repeat; background-repeat: repeat;
background-attachment: scroll; background-attachment: scroll;
} }
.night .h2 {
background-image: linear-gradient(to right, #d3d9d6 0%, #000 100%);
}
.e1 { .e1 {
font-size: large; font-size: large;
margin-top: 4px; margin-top: 4px;
@ -1608,6 +1659,10 @@ a {
background-color: #c9c9c9; background-color: #c9c9c9;
} }
.night .e2 {
color: black;
}
.e2s { .e2s {
background-color: #b9b9b9; background-color: #b9b9b9;
} }
@ -1671,6 +1726,10 @@ a {
border-bottom-color: #DDDDDD; border-bottom-color: #DDDDDD;
} }
.night .DevSt {
color: white;
}
.contextMenu { .contextMenu {
background: #F9F9F9; background: #F9F9F9;
box-shadow: 0 0 12px rgba( 0, 0, 0, .3 ); box-shadow: 0 0 12px rgba( 0, 0, 0, .3 );
@ -2057,7 +2116,7 @@ a {
top: 200px; top: 200px;
text-align: center; text-align: center;
font-size: 1600%; font-size: 1600%;
color: #AAAAAA; color: #AAA;
} }
#p13bigfail { #p13bigfail {
@ -2068,13 +2127,13 @@ a {
top: 200px; top: 200px;
text-align: center; text-align: center;
font-size: 1600%; font-size: 1600%;
color: #AAAAAA; color: #AAA;
} }
.fulldesk #p14title { .fulldesk #p14title {
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
color: #CCCCCC; color: #CCC;
} }
#p14iframe { #p14iframe {
@ -2160,6 +2219,10 @@ a {
overflow-y: auto; overflow-y: auto;
} }
.night #p16events, #p31events {
color: #222;
}
#p40 { #p40 {
height: calc(100vh - 191px); height: calc(100vh - 191px);
} }
@ -2280,6 +2343,13 @@ a {
width: 28px; width: 28px;
} }
.uiSelector4 {
margin: 2px;
background: url(../images/views.png) -280px 0px;
height: 28px;
width: 28px;
}
.backButton { .backButton {
width: 32px; width: 32px;
height: 32px; height: 32px;

File diff suppressed because one or more lines are too long

View File

@ -90,6 +90,7 @@
<div id=uiViewButton1 class=uiSelector onclick=userInterfaceSelectMenu(1) title="Left bar interface"><div class="uiSelector1"></div></div> <div id=uiViewButton1 class=uiSelector onclick=userInterfaceSelectMenu(1) title="Left bar interface"><div class="uiSelector1"></div></div>
<div id=uiViewButton2 class=uiSelector onclick=userInterfaceSelectMenu(2) title="Top bar interface"><div class="uiSelector2"></div></div> <div id=uiViewButton2 class=uiSelector onclick=userInterfaceSelectMenu(2) title="Top bar interface"><div class="uiSelector2"></div></div>
<div id=uiViewButton3 class=uiSelector onclick=userInterfaceSelectMenu(3) title="Fixed width interface"><div class="uiSelector3"></div></div> <div id=uiViewButton3 class=uiSelector onclick=userInterfaceSelectMenu(3) title="Fixed width interface"><div class="uiSelector3"></div></div>
<div id=uiViewButton4 class=uiSelector onclick=toggleNightMode() title="Toggle night mode"><div class="uiSelector4"></div></div>
</div> </div>
</div> </div>
<table id=MainMenuSpan cellpadding=0 cellspacing=0 class=style1> <table id=MainMenuSpan cellpadding=0 cellspacing=0 class=style1>
@ -926,6 +927,7 @@
var uiMode = parseInt(getstore('uiMode', 1)); var uiMode = parseInt(getstore('uiMode', 1));
var webPageStackMenu = false; var webPageStackMenu = false;
var webPageFullScreen = true; var webPageFullScreen = true;
var nightMode = (getstore('uiMode', 1) == 1);
function startup() { function startup() {
if ((features & 32) == 0) { if ((features & 32) == 0) {
@ -944,6 +946,7 @@
QV('autoconnectbutton1', debugmode); // Desktop QV('autoconnectbutton1', debugmode); // Desktop
//QV('DeskClip', debugmode); // Clipboard feature, not completed so show in in debug mode only. //QV('DeskClip', debugmode); // Clipboard feature, not completed so show in in debug mode only.
if (nightMode) { QC('body').add('night'); }
toggleFullScreen(); toggleFullScreen();
// Setup page visuals // Setup page visuals
@ -1070,8 +1073,10 @@
Q('uiViewButton1').classList.remove('uiSelectorSel'); Q('uiViewButton1').classList.remove('uiSelectorSel');
Q('uiViewButton2').classList.remove('uiSelectorSel'); Q('uiViewButton2').classList.remove('uiSelectorSel');
Q('uiViewButton3').classList.remove('uiSelectorSel'); Q('uiViewButton3').classList.remove('uiSelectorSel');
try { Q('uiViewButton' + uiMode).classList.add('uiSelectorSel'); } catch (ex) {} Q('uiViewButton4').classList.remove('uiSelectorSel');
try { Q('uiViewButton' + uiMode).classList.add('uiSelectorSel'); } catch (ex) { }
QV('uiMenu', (QS('uiMenu').display == 'none')); QV('uiMenu', (QS('uiMenu').display == 'none'));
if (nightMode) { Q('uiViewButton4').classList.add('uiSelectorSel'); }
} }
function userInterfaceSelectMenu(s) { function userInterfaceSelectMenu(s) {
@ -1082,6 +1087,12 @@
toggleStackMenu(0); toggleStackMenu(0);
} }
function toggleNightMode() {
nightMode = !nightMode;
if (nightMode) { QC('body').add('night'); } else { QC('body').remove('night'); }
putstore('nightMode', nightMode?1:0);
}
// Toggle the web page to full screen // Toggle the web page to full screen
function toggleFullScreen(toggle) { function toggleFullScreen(toggle) {
if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); } if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long