[ENH] Add toggle switch for new MeshCentral UI in settings and top header of the classic UI

public/styles/style.css

@@ -263,6 +263,12 @@ body {
     right: 3px;
 }
 
+.textnewui {
+    color: white;
+    font-weight: bold;
+    padding: 2px;
+}
+
 .LogoffLinkColor {
     color:white;
 }
@@ -2896,7 +2902,7 @@ a {
     width: 28px;
 }
 
-.viewSelector3 {
+.viewSelector3, .uiSelector7 {
     margin-left: 2px;
     margin-top: 2px;
     background: url(../images/views.png) -56px 0px;
@@ -2996,6 +3002,13 @@ a {
         background-color: #AAA;
     }
 
+.uiSelector_end {
+    width: 32px;
+    height: 32px;
+    float: left;
+    margin: 3px;
+}
+
 .uiSelectorSel {
     background-color: #BBB;
     opacity: 0.8;

views/default.handlebars

@@ -164,6 +164,16 @@
                 <div id=notificationCount onclick="clickNotificationIcon()" class="unselectable" style="display: none;" title="Click to view current notifications">0</div>
             </div>
             <p id="logoutControl"><span id=logoutControlSpan class="logoncontrolspan"></span><span id=idleTimeoutNotify style="color:yellow"></span></p>
+            <div style="position:absolute;right:0;margin-right:8px;cursor:pointer;">
+                <table>
+                    <tr>
+                        <td class="textnewui"><label class="form-check-label text-white" for="inputUiViewMode">Try the new MeshCentral UI &ensp;</label></td>
+                        <td class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="inputUiViewMode" onchange="toggleBootstrapUIMode()">
+                        </td>
+                    </tr>
+                </table>
+            </div>
         </div>
         <div id="page_leftbar">
             <div style="height:16px"></div>
@@ -199,11 +209,13 @@
                                         <div tabindex=0 id=uiViewButton1 class=uiSelector onclick=userInterfaceSelectMenu(1) title="Left bar interface" onkeypress="if (event.key == 'Enter') userInterfaceSelectMenu(1)"><div class="uiSelector1"></div></div>
                                         <div tabindex=0 id=uiViewButton2 class=uiSelector onclick=userInterfaceSelectMenu(2) title="Top bar interface" onkeypress="if (event.key == 'Enter') userInterfaceSelectMenu(2)"><div class="uiSelector2"></div></div>
                                         <div tabindex=0 id=uiViewButton3 class=uiSelector onclick=userInterfaceSelectMenu(3) title="Fixed width interface" onkeypress="if (event.key == 'Enter') userInterfaceSelectMenu(3)"><div class="uiSelector3"></div></div>
+                                        <div tabindex=0 id=uiViewButton7 class=uiSelector onclick=toggleBootstrapUIMode() title="Toggle Bootstrap UI" onkeypress="if (event.key == 'Enter') toggleBootstrapUIMode()"><div class="uiSelector7"></div></div>
                                     </td>
                                     <td>
                                         <div tabindex=0 id=uiViewButton6 class=uiSelector onclick="showNotes(false)" title="Personal Notes" onkeypress="if (event.key == 'Enter') showNotes(false)"><div class="uiSelector6"></div></div>
                                         <div tabindex=0 id=uiViewButton4 class=uiSelector onclick=toggleNightMode() title="Toggle night mode" onkeypress="if (event.key == 'Enter') toggleNightMode()"><div class="uiSelector4"></div></div>
                                         <div tabindex=0 id=uiViewButton5 class=uiSelector onclick=toggleFooterBarMode() title="Toggle footer bar" onkeypress="if (event.key == 'Enter') toggleFooterBarMode()"><div class="uiSelector5"></div></div>
+                                        <div class=uiSelector_end>&nbsp;</div>
                                     </td>
                                 </tr>
                             </table>
@@ -1572,6 +1584,7 @@
         var deskAspectRatio = 0;
         try { deskAspectRatio = parseInt(getstore('deskAspectRatio', '0')); } catch (ex) { }
         var uiMode = parseInt(getstore('uiMode', 1));
+        // var uiViewMode = parseInt(getstore('uiViewMode', 0));
         var webPageStackMenu = false;
         var webPageFullScreen = true;
         var nightMode = setNightMode();
@@ -2182,6 +2195,21 @@
             QV('body', true);
         }
 
+        function saveUserInterfaceMode() {
+            var nUiViewMode = 0;
+            if (Q('ui1').checked) { nUiViewMode = 1; }
+            putstore('uiViewMode', nUiViewMode);
+        }
+
+        function toggleBootstrapUIMode() {
+            if (xxdialogMode) return;
+            var uiViewMode = getstore('uiViewMode', '0');
+            var x = '<input type=radio id=ui0 name=uiradio value=0 ' + ((uiViewMode == 0)?'checked':'') + '><label for=ui0>' + "Classic" + '</label><br>';
+            x += '<input type=radio id=ui1 name=uiradio value=1 ' + ((uiViewMode == 1)?'checked':'') + '><label for=ui1>' + "Modern" + '</label><br>';
+            setDialogMode(2, "User Interface", 3, saveUserInterfaceMode, x);
+            QV('uiMenu', false);
+        }
+
         function getNodeFromId(id) { if (nodes != null) { for (var i in nodes) { if (nodes[i]._id == id) return nodes[i]; } } return null; }
         function reload() {
             var x = window.location.href;