Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Switcher to Toggle Between Classic and Bootstrap Interfaces #6664

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

UI Switcher to Toggle Between Classic and Bootstrap Interfaces #6664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3b1ad4
[ENH] Add toggle switch for new MeshCentral UI in settings and top he…
kambereBr Jan 6, 2025
2e37492
[ENH] Add toggle for new MeshCentral UI in settings and in top headba…
kambereBr Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion public/styles/style-bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2870,7 +2870,7 @@ nav .lbbuttonsel2 {
width: 28px;
}

.viewSelector3 {
.viewSelector3, .uiSelector7 {
margin-left: 2px;
margin-top: 2px;
background: url(../images/views.png) -56px 0px;
Expand Down Expand Up @@ -2970,6 +2970,13 @@ nav .lbbuttonsel2 {
background-color: #AAA;
}

.uiSelector_end {
width: 32px;
height: 32px;
float: left;
margin: 3px;
}

.uiSelectorSel {
background-color: #BBB;
opacity: 0.8;
Expand Down
15 changes: 14 additions & 1 deletion public/styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,12 @@ body {
right: 3px;
}

.textnewui {
color: white;
font-weight: bold;
padding: 2px;
}

.LogoffLinkColor {
color:white;
}
Expand Down Expand Up @@ -2896,7 +2902,7 @@ a {
width: 28px;
}

.viewSelector3 {
.viewSelector3, .uiSelector7 {
margin-left: 2px;
margin-top: 2px;
background: url(../images/views.png) -56px 0px;
Expand Down Expand Up @@ -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;
Expand Down
28 changes: 28 additions & 0 deletions views/default.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand Down
33 changes: 33 additions & 0 deletions views/default3.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,17 @@
<img id="topMenuIcon" class=noselect
style="position:absolute;right:0;top:10px;color:#c8c8c8;font-size:44px;margin-right:8px;cursor:pointer;display:none"
onclick=topMenu() src="/images/3bars-30.png" width=30 height=30 />

<div style="position:absolute;right:0;margin-right:8px;cursor:pointer;">
<table>
<tr>
<td class="text-white fw-bold"><label class="form-check-label" 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()" checked="">
</td>
</tr>
</table>
</div>
</div>
<div class="sidebar flex-column" id="page_leftbar">
<div style="height:24px"></div>
Expand Down Expand Up @@ -190,6 +201,11 @@
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)"
Expand All @@ -207,6 +223,7 @@
onkeypress="if (event.key == 'Enter') toggleFooterBarMode()">
<div class="uiSelector5"></div>
</div>
<div class=uiSelector_end>&nbsp;</div>
</td>
</tr>
</table>
Expand Down Expand Up @@ -2685,6 +2702,22 @@
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>';
setModalContent('xxAddAgent', 'User Interface', x);
showModal('xxAddAgentModal', 'idx_dlgOkButton', saveUserInterfaceMode);
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;
Expand Down
Loading