mirror of
https://github.com/Ylianst/MeshCentral.git
synced 2025-11-07 12:52:54 -05:00
UI Toggle between Classic and Modern (#6763)
* [ENH] Add toggle switch for new MeshCentral UI in settings and top header of the classic UI * [ENH] Add toggle for new MeshCentral UI in settings and in top headbar of the modern UI * add showModernUIToggle and store uiviewmode in db --------- Co-authored-by: kambereBr <brunokambere@gmail.com>
This commit is contained in:
Simon Smith
GitHub
@@ -164,6 +164,9 @@
|
||||
<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 class=textnewui id=textnewui onmouseup=toggleBootstrapUIMode() onkeypress="if (event.key=='Enter') { toggleBootstrapUIMode(); }">
|
||||
<b>Try the new MeshCentral UI</b>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page_leftbar">
|
||||
<div style="height:16px"></div>
|
||||
@@ -199,11 +202,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> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -1723,6 +1728,9 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Show the modern ui switcher
|
||||
QV('textnewui', ((features2 & 0x40000000) == 0) ? false : true);
|
||||
|
||||
// Connect to the mesh server
|
||||
meshserver = MeshServerCreateControl(domainUrl);
|
||||
meshserver.onStateChanged = onStateChanged;
|
||||
@@ -2183,6 +2191,24 @@
|
||||
QV('body', true);
|
||||
}
|
||||
|
||||
function saveUserInterfaceMode() {
|
||||
var nUiViewMode = 2;
|
||||
if (Q('ui1').checked) { nUiViewMode = 3; }
|
||||
if (getstore('uiViewMode', 2) != nUiViewMode) {
|
||||
putstore('uiViewMode', nUiViewMode);
|
||||
reload();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleBootstrapUIMode() {
|
||||
if (xxdialogMode) return;
|
||||
var uiViewMode = getstore('uiViewMode', 2);
|
||||
var x = '<input type=radio id=ui0 name=uiradio value=2 ' + ((uiViewMode == 2)?'checked':'') + '><label for=ui0>' + "Classic" + '</label><br>';
|
||||
x += '<input type=radio id=ui1 name=uiradio value=3 ' + ((uiViewMode == 3)?'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;
|
||||
|
||||
@@ -153,6 +153,9 @@
|
||||
<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 class=textnewui id=textnewui onmouseup=toggleBootstrapUIMode() onkeypress="if (event.key=='Enter') { toggleBootstrapUIMode(); }">
|
||||
<b>Try the new MeshCentral UI</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar flex-column" id="page_leftbar">
|
||||
<div style="height:24px"></div>
|
||||
@@ -190,6 +193,11 @@
|
||||
onkeypress="if (event.key == 'Enter') userInterfaceSelectMenu(3)">
|
||||
<div class="uiSelector3"></div>
|
||||
</div>
|
||||
<div tabindex=0 id=uiViewButton7 class=uiSelector
|
||||
onclick=toggleBootstrapUIMode() title="Toggle Modern UI"
|
||||
onkeypress="if (event.key == 'Enter') toggleBootstrapUIMode()">
|
||||
<div class="uiSelector7"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div tabindex=0 id=uiViewButton6 class=uiSelector onclick="showNotes(false)"
|
||||
@@ -207,6 +215,7 @@
|
||||
onkeypress="if (event.key == 'Enter') toggleFooterBarMode()">
|
||||
<div class="uiSelector5"></div>
|
||||
</div>
|
||||
<div class=uiSelector_end> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -2149,6 +2158,9 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Show the modern ui switcher
|
||||
QV('textnewui', ((features2 & 0x40000000) == 0) ? false : true);
|
||||
|
||||
// Connect to the mesh server
|
||||
meshserver = MeshServerCreateControl(domainUrl);
|
||||
meshserver.onStateChanged = onStateChanged;
|
||||
@@ -2622,6 +2634,31 @@
|
||||
QV('body', true);
|
||||
}
|
||||
|
||||
function saveUserInterfaceMode() {
|
||||
var nUiViewMode = 3;
|
||||
if (Q('ui0').checked) { nUiViewMode = 2; }
|
||||
if (getstore('uiViewMode', 3) != nUiViewMode) {
|
||||
putstore('uiViewMode', nUiViewMode);
|
||||
// Check if the URL includes 'sitestyle=' and remove it
|
||||
var url = new URL(window.location.href);
|
||||
if (url.searchParams.has('sitestyle')) {
|
||||
url.searchParams.delete('sitestyle');
|
||||
window.history.replaceState({}, document.title, url.toString());
|
||||
}
|
||||
reload();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleBootstrapUIMode() {
|
||||
if (xxdialogMode) return;
|
||||
var uiViewMode = getstore('uiViewMode', 3);
|
||||
var x = '<div class=form-check><input type=radio class=form-check-input id=ui0 name=uiradio value=2 ' + ((uiViewMode == 2)?'checked':'') + '><label class=form-check-label for=ui0>' + "Classic" + '</label></div>';
|
||||
x += '<div class=form-check><input type=radio class=form-check-input id=ui1 name=uiradio value=3 ' + ((uiViewMode == 3)?'checked':'') + '><label class=form-check-label for=ui1>' + "Modern" + '</label></div>';
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user