Improved night mode in web app.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meshcentral",
-  "version": "0.3.4-a",
+  "version": "0.3.4-c",
   "keywords": [
     "Remote Management",
     "Intel AMT",

public/styles/style.css

@@ -352,6 +352,7 @@ body {
     width: 300px;
     padding: 16px;
     text-align: center;
+    color: black;
 }
 
 #passwordPolicyCallout, #rpasswordPolicyCallout {
@@ -460,6 +461,7 @@ body {
     top: 180px;
     left: calc((100% / 2) - 200px);
     width: 400px;
+    color:black;
 }
 
 #dialogHeader {
@@ -615,6 +617,31 @@ body {
     text-align: center;
 }
 
+.deviceBarCheckbox {
+    width:22px;
+    float:left;
+    background-color:white;
+}
+
+.night .deviceBarCheckbox {
+    background-color:black;
+}
+
+#devs {
+    color:black;
+}
+
+.deviceBarIcon {
+    float:left;
+    height:18px;
+    width:18px;
+    background-color:white
+}
+
+.night .deviceBarIcon {
+    background-color:black;
+}
+
 #devListToolbarViewIcons {
     float: right;
 }
@@ -739,8 +766,8 @@ NoMeshesPanel img {
 }
 
 #p2AccountImage {
-    width: 150px;
+    width: 128px;
-    height: 103px;
+    height: 128px;
     margin-bottom: 10px;
     margin-right: 20px;
     float: right;
@@ -1172,6 +1199,10 @@ a {
     opacity: 0.5;
 }
 
+    .night .lbbutton {
+        background-color: black;
+    }
+
     .lbbutton:hover {
         opacity: 1;
     }
@@ -1187,7 +1218,7 @@ a {
 }
 
 .lb1 {
-    background: url(../images/leftbar-62.jpg) -0px 0px;
+    background: url(../images/leftbar-64.png) -1px -2px;
     height: 62px;
     width: 62px;
     cursor: pointer;
@@ -1198,7 +1229,7 @@ a {
 }
 
 .lb2 {
-    background: url(../images/leftbar-62.jpg) -75px 0px;
+    background: url(../images/leftbar-64.png) -66px -2px;
     height: 62px;
     width: 62px;
     cursor: pointer;
@@ -1209,7 +1240,7 @@ a {
 }
 
 .lb3 {
-    background: url(../images/leftbar-62.jpg) -150px 0px;
+    background: url(../images/leftbar-64.png) -130px -2px;
     height: 62px;
     width: 62px;
     cursor: pointer;
@@ -1220,7 +1251,7 @@ a {
 }
 
 .lb4 {
-    background: url(../images/leftbar-62.jpg) -225px 0px;
+    background: url(../images/leftbar-64.png) -194px -2px;
     height: 62px;
     width: 62px;
     cursor: pointer;
@@ -1231,7 +1262,7 @@ a {
 }
 
 .lb5 {
-    background: url(../images/leftbar-62.jpg) -294px 0px;
+    background: url(../images/leftbar-64.png) -257px -2px;
     height: 62px;
     width: 62px;
     cursor: pointer;
@@ -1242,7 +1273,7 @@ a {
 }
 
 .lb6 {
-    background: url(../images/leftbar-62.jpg) -360px 0px;
+    background: url(../images/leftbar-64.png) -318px -2px;
     height: 62px;
     width: 62px;
     cursor: pointer;
@@ -1675,6 +1706,11 @@ a {
     margin-bottom: 2px;
 }
 
+.night .bar {
+    color: black;
+}
+
+
 #p3users .bar {
     width: 100%;
     font-size: medium;
@@ -1687,6 +1723,10 @@ a {
     background-color: white;
 }
 
+    .night .baricon {
+        background-color: black;
+    }
+
     .baricon div {
         width: 16px;
         margin-top: 4px;
@@ -1707,6 +1747,7 @@ a {
     height: 18px;
     float: left;
     margin-bottom: 2px;
+    color: black;
 }
 
 .bar182 {
@@ -2020,6 +2061,7 @@ a {
     top: 24px;
     bottom: 0px;
     width: 100%;
+    color:black;
 }
 
 .deskToolsBar {
@@ -2047,6 +2089,19 @@ a {
     margin-left: 6px;
 }
 
+.serverStateTableCell {
+    width: 300px;
+    height: 24px;
+    background-color: #d3d9d6;
+    margin-bottom: 4px;
+    vertical-align: middle;
+    border-spacing: 0;
+}
+
+.night .serverStateTableCell {
+    color: black;
+}
+
 .userTableHeader {
     border-bottom: 1pt solid lightgray;
     padding-top: 4px;

views/default.handlebars

@@ -245,7 +245,7 @@
             </div>
             <div id=p2 style="display:none">
                 <h1>My Account</h1>
-                <img id="p2AccountImage" alt="" src="images/mainaccount.jpg"/>
+                <img id="p2AccountImage" alt="" src="images/clipboard-128.png"/>
                 <div id="p2AccountSecurity" style="display:none">
                     <p><strong>Account security</strong></p>
                     <div style="margin-left:25px">
@@ -688,8 +688,8 @@
             </div>
             <div id=p20 style="display:none">
                 <picture id=MainMeshImage style=border-width:0px;height:200px;width:200px;float:right>
-                    <source type="image/webp" width=200 height=200 srcset="images/webp/mesh-200.webp">
+                    <source type="image/webp" width=200 height=200 srcset="images/webp/mesh-256.webp">
-                    <img alt="" width=200 height=200 src=images/mesh-200.jpg />
+                    <img alt="" width=200 height=200 src=images/mesh-256.png />
                 </picture>
                 <div style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
                 <h1>General - <span id=p20meshName></span></h1>
@@ -708,8 +708,8 @@
                         <td style=width:20px></td>
                         <td style=width:200px>
                             <picture id=MainUserImage style=border-width:0px;height:200px;width:200px;float:right>
-                                <source type="image/webp" width=200 height=200 srcset="images/webp/user-200.webp">
+                                <source type="image/webp" width=200 height=200 srcset="images/webp/user-256.webp">
-                                <img alt="" width=200 height=200 src=images/user-200.jpg />
+                                <img alt="" width=200 height=200 src=images/user-256.jpg />
                             </picture>
                             <div style="width:100%;text-align:center"><strong><span id=MainUserState></span></strong></div>
                         </td>
@@ -927,7 +927,7 @@
         var uiMode = parseInt(getstore('uiMode', 1));
         var webPageStackMenu = false;
         var webPageFullScreen = true;
-        var nightMode = (getstore('uiMode', 1) == 1);
+        var nightMode = (getstore('_nightMode', '0') == '1');
 
         function startup() {
             if ((features & 32) == 0) {
@@ -1090,7 +1090,7 @@
         function toggleNightMode() {
             nightMode = !nightMode;
             if (nightMode) { QC('body').add('night'); } else { QC('body').remove('night'); }
-            putstore('nightMode', nightMode?1:0);
+            putstore('_nightMode', nightMode?'1':'0');
         }
 
         // Toggle the web page to full screen
@@ -2245,8 +2245,8 @@
                             if ((node.conn & 8) != 0) { states.push('<span title="Mesh agent is reachable using another agent as relay.">Relay</span>'); }
                         }
                         r += '<tr><td><div id=devs class=bar18 onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=height:18px;width:100%;font-size:medium>';
-                        r += '<div style=width:22px;float:left;background-color:white><input class="' + node.meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + node._id + ' type=checkbox></div>';
+                        r += '<div class=deviceBarCheckbox><input class="' + node.meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + node._id + ' type=checkbox></div>';
-                        r += '<div style=float:left;height:18px;width:18px;background-color:white onclick=gotoDevice(\'' + node._id + '\',null,null,event)><div class=j' + icon + ' style=width:16px;margin-top:1px;margin-left:2px;height:16px></div></div>';
+                        r += '<div class=deviceBarIcon onclick=gotoDevice(\'' + node._id + '\',null,null,event)><div class=\"j' + icon + '\" style=width:16px;margin-top:1px;margin-left:2px;height:16px></div></div>';
                         r += '<div class=g1 style=height:18px;float:left></div><div class=g2 style=height:18px;float:right></div>';
                         r += '<div style=cursor:pointer;font-size:14px title="' + title + '" onclick=gotoDevice(\'' + node._id + '\',null,null,event)><span style=width:300px>' + name + '</span></div></div></td>';
                         r += '<td style=text-align:center>' + getUserShortStr(node);
@@ -3832,7 +3832,7 @@
                 QH('MainComputerState', powerstate);
 
                 // Set the node icon
-                Q('MainComputerImage').setAttribute("src", "images/icons200-" + node.icon + "-1.jpg");
+                Q('MainComputerImage').setAttribute("src", "images/icons256-" + node.icon + "-1.png");
                 Q('MainComputerImage').className = ((!node.conn) || (node.conn == 0)?'gray':'');
 
                 // Check if we have terminal and file access
@@ -7531,7 +7531,7 @@
                 for (var i in message.values) {
                     x += '<div class=userTableHeader style=margin-bottom:4px;width:200px>' + i + '</div>';
                     for (var j in message.values[i]) {
-                        x += '<div style=display:inline-block><table style=width:300px;height:24px;background-color:#d3d9d6;margin-bottom:4px;vertical-align:middle;border-spacing:0><tr><td class=h1></td><td><span>' + j + '</span><span style=float:right>' + message.values[i][j] + '</span></td><td class=h2></td></tr></table></div>';
+                        x += '<div style=display:inline-block><table class=serverStateTableCell><tr><td class=h1></td><td><span>' + j + '</span><span style=float:right>' + message.values[i][j] + '</span></td><td class=h2></td></tr></table></div>';
                     }
                 }
             }

views/login.handlebars

@@ -24,6 +24,7 @@
                         <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=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>
@@ -34,7 +35,7 @@
                     <tr>
                         <td id="welcomeimage">
                             <picture>
-                                <img alt="" src=welcome.jpg />
+                                <img alt="" src=welcome.jpg style="border-radius:20px" />
                             </picture>
                         </td>
                         <td id="logincell">
@@ -254,8 +255,10 @@
         var features = parseInt('{{{features}}}');
         var welcomeText = decodeURIComponent("{{{welcometext}}}");
         var currentpanel = 0;
-        var uiMode = parseInt(getstore('uiMode', 1));
+        var uiMode = parseInt(getstore('uiMode', '1'));
         var webPageFullScreen = true;
+        var nightMode = (getstore('_nightMode', '0') == '1');
+
         //var webPageFullScreen = getstore('webPageFullScreen', true);
         //if (webPageFullScreen == 'false') { webPageFullScreen = false; }
         //if (webPageFullScreen == 'true') { webPageFullScreen = true; }
@@ -269,6 +272,8 @@
                 if (top != self && (loc == null || top.active == false)) { top.location = self.location; return; }
             }
 
+            if (nightMode) { QC('body').add('night'); }
+
             QV('createPanelHint', passRequirements.hint === true);
             QV('resetpasswordpanelHint', passRequirements.hint === true);
 
@@ -645,6 +650,7 @@
             Q('uiViewButton3').classList.remove('uiSelectorSel');
             try { Q('uiViewButton' + uiMode).classList.add('uiSelectorSel'); } catch (ex) { }
             QV('uiMenu', (QS('uiMenu').display == 'none'));
+            if (nightMode) { Q('uiViewButton4').classList.add('uiSelectorSel'); }
         }
 
         function userInterfaceSelectMenu(s) {
@@ -655,6 +661,12 @@
             //toggleStackMenu(0);
         }
 
+        function toggleNightMode() {
+            nightMode = !nightMode;
+            if (nightMode) { QC('body').add('night'); } else { QC('body').remove('night'); }
+            putstore('_nightMode', (nightMode ? '1' : '0'));
+        }
+
         function center() {
             /* Now we use CSS media to achive the same effect as deleted JS  */
 

webserver.js

@@ -2705,18 +2705,18 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
             // Server picture
             obj.app.get(url + 'serverpic.ashx', function (req, res) {
                 // Check if we have "server.jpg" in the data folder, if so, use that.
-                if ((parent.configurationFiles != null) && (parent.configurationFiles['server.jpg'] != null)) {
+                if ((parent.configurationFiles != null) && (parent.configurationFiles['server.png'] != null)) {
-                    res.set({ 'Content-Type': 'image/jpeg' });
+                    res.set({ 'Content-Type': 'image/png' });
-                    res.send(parent.configurationFiles['server.jpg']);
+                    res.send(parent.configurationFiles['server.png']);
                 } else {
                     // Check if we have "server.jpg" in the data folder, if so, use that.
-                    var p = obj.path.join(obj.parent.datapath, 'server.jpg');
+                    var p = obj.path.join(obj.parent.datapath, 'server.png');
                     if (obj.fs.existsSync(p)) {
                         // Use the data folder server picture
                         try { res.sendFile(p); } catch (e) { res.sendStatus(404); }
                     } else {
                         // Use the default server picture
-                        try { res.sendFile(obj.path.join(obj.parent.webPublicPath, 'images/server-200.jpg')); } catch (e) { res.sendStatus(404); }
+                        try { res.sendFile(obj.path.join(obj.parent.webPublicPath, 'images/server-256.png')); } catch (e) { res.sendStatus(404); }
                     }
                 }
             });