mirror of
https://github.com/Ylianst/MeshCentral.git
synced 2025-10-29 15:25:01 -04:00
Dropdown Menu - re-design / Updated Notifications Icon (#7372)
* Redesign user dropdown menu with new icons and UI Replaces the old top menu and UI selection controls with a modern user dropdown menu featuring new icon assets, improved styling, and a UI settings submenu. Updates CSS for layout and responsiveness, adds new PNG icon files, and refactors related JavaScript logic for menu toggling and user image handling. * Replace user dropdown icons with Font Awesome Swapped out image-based icons in the user dropdown menu for Font Awesome icon elements. This change reduces reliance on image assets, improves consistency, and simplifies icon management. * Update icons in user dropdown menu Replaced the UI Settings, Left bar interface, and night mode icons with more appropriate Font Awesome icons for improved clarity and consistency in the user dropdown menu. * Fixed menu position for Fixed Width Style * Updated Dropdown for Translations Refactored hardcoded dropdown text to support translation handling. * Updated Translations * Updated dropdown to close SubMenu on all buttons. * Removed "UserDummyMenuSpan" Not needed any more as we have removed UIMenu * Improve notification icon UI and add badge Replaces the plain notification count with a bell icon and a badge for better visibility. (FA) * notificationBadge & notificationCount:hover * Add new translations Added new translation entries for 'Toggle Dark Mode', 'Toggle Light Mode', 'Toggle Footer Bar', 'Left Bar Interface', and 'Top Bar Interface' * Updated Dropdown background * Updated Dark/Light Mode Toggle * Updated Right Chevron Arrow
This commit is contained in:
TheDevRyan
GitHub
parent
c7d1c0e18f
commit
acd6001a8a
@ -2341,8 +2341,8 @@ nav .lbbuttonsel2 {
|
||||
.notifiyBox {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 50px;
|
||||
right: 26px;
|
||||
top: 80px;
|
||||
right: 10rem;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
background-color: #F0ECCD;
|
||||
@ -2395,13 +2395,24 @@ nav .lbbuttonsel2 {
|
||||
min-width: 28px;
|
||||
font-size: 20px;
|
||||
border-radius: 5px;
|
||||
background-color: lightblue;
|
||||
text-align: center;
|
||||
margin: 8px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
right: 9rem;
|
||||
top: 0.2em;
|
||||
}
|
||||
#notificationBadge {
|
||||
box-shadow: -0.1px 1px 2px #000000;
|
||||
-webkit-box-shadow: -0.1px 1px 2px #000000;
|
||||
-moz-box-shadow: -0.1px 1px 2px #000000;
|
||||
top: 0.95rem;
|
||||
left: 1.6rem !important;
|
||||
}
|
||||
#notificationCount:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.night #notificationCount {
|
||||
color: black;
|
||||
}
|
||||
@ -3344,6 +3355,12 @@ nav .lbbuttonsel2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#masthead {
|
||||
background-size: 18rem 2.5rem !important;
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
#MainMeshImage /*, #p2AccountImageFrame */ {
|
||||
/* text-align: center !important; */
|
||||
float: none !important;
|
||||
@ -3355,17 +3372,40 @@ nav .lbbuttonsel2 {
|
||||
float: none !important;
|
||||
text-align: left;
|
||||
}
|
||||
#userDropdown {
|
||||
display: inline-block !important;
|
||||
position: absolute !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
#logoutControl {
|
||||
#userDropdownName {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#topMenuIcon {
|
||||
.userDropdownMobileOnly {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#userDropdownMenuDivider.userDropdownMobileOnly {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.userDropdownSubmenu {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
top: 13rem !important;
|
||||
margin-left: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.userDropdownUISettings {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#notificationCount {
|
||||
margin-right: 45px;
|
||||
right: 4rem;
|
||||
}
|
||||
.notifiyBox {
|
||||
right: 3.5rem;
|
||||
}
|
||||
|
||||
.notifiyBox:after {
|
||||
@ -3404,4 +3444,146 @@ nav .lbbuttonsel2 {
|
||||
|
||||
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
|
||||
display: inline !important;
|
||||
} */
|
||||
} */
|
||||
/* User Dropdown Menu Styles */
|
||||
#userDropdown {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: 1000;
|
||||
right: 10px;
|
||||
background: #00000026;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#userDropdownButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#userDropdownButton:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#userDropdownImage {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#userDropdownName {
|
||||
margin-right: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#userDropdownArrow {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#userDropdownMenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
z-index: 10000;
|
||||
min-width: 200px;
|
||||
margin-top: 4px;
|
||||
transform: translateX(0);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#userDropdownMenuContainer {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.userDropdownMenuItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.userDropdownMenuItem:hover {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.userDropdownMenuIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.userDropdownMenuItem span {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#userDropdownMenuDivider {
|
||||
border-top: 1px solid #eee;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.userDropdownSubmenu {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
margin-right: 4px;
|
||||
min-width: 200px;
|
||||
z-index: 10001;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.userDropdownSubmenu .userDropdownMenuItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.userDropdownSubmenu .userDropdownMenuItem:hover {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.userDropdownSubmenu .userDropdownMenuIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.userDropdownMobileOnly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.userDropdownUISettings img:last-child {
|
||||
margin-left: auto;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
body:not(.fullscreen) #userDropdown {
|
||||
right: calc(50vw - 470px);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -145,14 +145,21 @@
|
||||
<div class="title" onclick="go(1,event)">{{{title1}}}</div>
|
||||
<div class="title2">{{{title2}}}</div>
|
||||
<div style="float:right">
|
||||
<div id=notificationCount onclick="clickNotificationIcon()" class="unselectable" style="display: none;"
|
||||
title="Click to view current notifications">0</div>
|
||||
<div id="notificationCount"
|
||||
class="position-relative"
|
||||
title="Click to view current notifications"
|
||||
onclick="clickNotificationIcon()"
|
||||
style="display: none;">
|
||||
<i class="fa-solid fa-bell fa-lg text-white"></i>
|
||||
<span id="notificationBadge"
|
||||
class="position-absolute top-1 start-100 translate-middle badge rounded-pill bg-danger"
|
||||
style="font-size: 0.65rem;">
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p id="logoutControl"><span id=logoutControlSpan class="logoncontrolspan"></span><span id=idleTimeoutNotify
|
||||
style="color:yellow"></span></p>
|
||||
<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>
|
||||
@ -172,55 +179,6 @@
|
||||
<div>
|
||||
<div style="position:relative">
|
||||
<span id=logoutControlSpan2></span>
|
||||
<div tabindex=0 id=uiMenuButton title="User interface selection" onclick="showUserInterfaceSelectMenu()" onkeypress="if (event.key == 'Enter') showUserInterfaceSelectMenu()">
|
||||
♦
|
||||
<div id=uiMenu style="display:none">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<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 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)"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<table id=MainMenuSpan cellpadding=0 cellspacing=0 class=style1>
|
||||
<tr>
|
||||
<td tabindex=0 id=MainMenuMyDevices class="topbar_td style3x" onmouseup=go(1,event)
|
||||
@ -332,13 +290,6 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id=UserDummyMenuSpan>
|
||||
<table id=UserDummyMenu cellpadding=0 cellspacing=0 class=style1>
|
||||
<tr>
|
||||
<td class=style3 style=""> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1975,17 +1926,6 @@
|
||||
class="btn btn-outline-success" /><input type=submit id=p13loginSubmit2 style="display:none"
|
||||
class="btn btn-outline-success" /></form>
|
||||
|
||||
<div id=topMenu style="z-index:1000;background-color:#ffffff;box-shadow:0px 0px 15px #666;font-family:Arial,Helvetica,sans-serif;border-radius:0px 0px 5px 5px;position:fixed;top:50px;right:5px;width:170px;display:none">
|
||||
<div style="padding:12px;border-top:1px solid gray;color:black;cursor:pointer" onclick=topMenu(1)>My Devices</div>
|
||||
<div style="padding:12px;border-top:1px solid gray;color:black;cursor:pointer" onclick=topMenu(2)>My Account</div>
|
||||
<div style="padding:12px;border-top:1px solid gray;color:black;cursor:pointer" onclick=topMenu(3)>My Events</div>
|
||||
<div style="padding:12px;border-top:1px solid gray;color:black;cursor:pointer" onclick=topMenu(5)>My Files</div>
|
||||
<div style="padding:12px;border-top:1px solid gray;color:black;cursor:pointer" onclick=topMenu(4)>My Users</div>
|
||||
<div style="padding:12px;border-top:1px solid gray;color:black;cursor:pointer" onclick=topMenu(6)>My Server</div>
|
||||
<div id="logoutMenuOption">
|
||||
<a id="logoutMenuOptionRef" href=/logout><div style="padding:12px;border-top:1px solid gray;color:black;cursor:pointer">Logout</div></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<audio id="chimes"><source src="sounds/chimes.mp3" type="audio/mp3" /></audio>
|
||||
<iframe style=display:none name="fileDownloadFrame"></iframe>
|
||||
@ -2180,11 +2120,108 @@
|
||||
// Setup logout control
|
||||
var logoutControl = '';
|
||||
if (logoutControls) {
|
||||
if (logoutControls.name != null) { logoutControl = ('<span onmouseup=go(2) CLASS="LogoffLinkColor" style="cursor:pointer">' + format("Welcome {0}.", logoutControls.name) + '</span>'); }
|
||||
if (logoutControls.logoutUrl != null) { logoutControl += format(' <a href="' + logoutControls.logoutUrl + '" CLASS="LogoffLinkColor">' + "Logout" + '</a>'); }
|
||||
if (logoutControls.name != null) {
|
||||
var userImageSrc = 'images/user-256.png';
|
||||
if (userinfo && userinfo.flags && (userinfo.flags & 1)) {
|
||||
if (userinfo.accountImageRnd == null) { userinfo.accountImageRnd = Math.floor(Math.random() * 9999999999); }
|
||||
userImageSrc = 'userimage.ashx?rnd=' + userinfo.accountImageRnd;
|
||||
}
|
||||
|
||||
logoutControl = '<div id="userDropdown">' +
|
||||
'<div id="userDropdownButton">' +
|
||||
'<img id="userDropdownImage" src="' + userImageSrc + '" />' +
|
||||
'<span id="userDropdownName" class="LogoffLinkColor">' + logoutControls.name + '</span>' +
|
||||
'<i class="fa fa-chevron-down LogoffLinkColor" style="font-size: 12px;"></i>' +
|
||||
'</div>' +
|
||||
'<div id="userDropdownMenu">' +
|
||||
'<div id="userDropdownMenuContainer">' +
|
||||
|
||||
'<div class="userDropdownMenuItem userDropdownMobileOnly" onclick="goForward(\'devices\'); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-desktop userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "My Devices" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem userDropdownMobileOnly" onclick="goForward(\'events\'); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-calendar userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "My Events" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem userDropdownMobileOnly" onclick="goForward(\'users\'); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-users userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "My Users" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem userDropdownMobileOnly" onclick="goForward(\'files\'); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-folder userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "My Files" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem userDropdownMobileOnly" onclick="goForward(\'server\'); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-server userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "My Server" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div id="userDropdownMenuDivider" class="userDropdownMobileOnly"></div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem userDropdownUISettings" onclick="toggleUISubmenu(event);">' +
|
||||
'<i class="fa fa-sliders userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "UI Settings" + '</span>' +
|
||||
'<i class="fa fa-chevron-right userDropdownMenuIcon" style="margin-left: auto; margin-right: 0; transition: transform 0.3s ease;"></i>' +
|
||||
'</div>' +
|
||||
|
||||
'<div id="uiSubmenu" class="userDropdownSubmenu" style="display:none;" onclick="event.stopPropagation();">' +
|
||||
'<div class="userDropdownMenuItem" onclick="toggleBootstrapUIMode(); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-toggle-on userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Toggle Modern UI" + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="userDropdownMenuItem" onclick="userInterfaceSelectMenu(1); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-window-maximize fa-rotate-270 userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Left Bar Interface" + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="userDropdownMenuItem" onclick="userInterfaceSelectMenu(2); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-window-maximize userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Top Bar Interface" + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="userDropdownMenuItem" onclick="userInterfaceSelectMenu(3); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-columns userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Fixed Width Interface" + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="userDropdownMenuItem" onclick="toggleFooterBarMode(); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-window-minimize userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Toggle Footer Bar" + '</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem" onclick="toggleNightMode(); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa ' + (document.body.classList.contains('night') ? 'fa-sun' : 'fa-moon') + ' userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Toggle night mode" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem" onclick="showNotes(false); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-sticky-note userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Personal Notes" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div class="userDropdownMenuItem" onclick="go(2); QV(\'userDropdownMenu\', false); QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu);">' +
|
||||
'<i class="fa fa-user userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "My Account" + '</span>' +
|
||||
'</div>' +
|
||||
|
||||
'<div id="userDropdownMenuDivider"></div>';
|
||||
|
||||
if (logoutControls.logoutUrl != null) {
|
||||
logoutControl += '<div class="userDropdownMenuItem" onclick="QV(\'uiSubmenu\', false); resetChevronArrow(); document.removeEventListener(\'click\', closeUISubmenu); window.location.href=\'' + logoutControls.logoutUrl + '\'">' +
|
||||
'<i class="fa fa-sign-out userDropdownMenuIcon"></i>' +
|
||||
'<span>' + "Logout" + '</span>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
logoutControl += '</div></div></div>';
|
||||
}
|
||||
}
|
||||
if (args.hide & 1) { QH('logoutControlSpan2', logoutControl); } else { QH('logoutControlSpan', logoutControl); }
|
||||
if (logoutControls && logoutControls.logoutUrl) { Q('logoutMenuOptionRef').href = logoutControls.logoutUrl; }
|
||||
|
||||
setTimeout(updateUserDropdown, 100);
|
||||
|
||||
// Setup the context menu
|
||||
document.onclick = function (e) { hideContextMenu(); }
|
||||
@ -2612,6 +2649,94 @@
|
||||
if (footerBar) { Q('uiViewButton5').classList.add('uiSelectorSel'); }
|
||||
}
|
||||
|
||||
// Toggle user dropdown menu
|
||||
function toggleUserDropdown() {
|
||||
if (xxdialogMode) return;
|
||||
var userDropdownMenu = Q('userDropdownMenu');
|
||||
if (userDropdownMenu) {
|
||||
var isVisible = (userDropdownMenu.style.display == 'none' || userDropdownMenu.style.display == '');
|
||||
if (isVisible) {
|
||||
userDropdownMenu.style.display = 'block';
|
||||
QV('uiMenu', false);
|
||||
QV('topMenu', false);
|
||||
updateNightModeIcon();
|
||||
} else {
|
||||
userDropdownMenu.style.display = 'none';
|
||||
var uiSubmenu = Q('uiSubmenu');
|
||||
if (uiSubmenu) {
|
||||
uiSubmenu.style.display = 'none';
|
||||
}
|
||||
resetChevronArrow();
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateUserDropdown() {
|
||||
if (logoutControls && logoutControls.name) {
|
||||
var userImageSrc = 'images/user-256.png';
|
||||
if (userinfo && userinfo.flags && (userinfo.flags & 1)) {
|
||||
if (userinfo.accountImageRnd == null) { userinfo.accountImageRnd = Math.floor(Math.random() * 9999999999); }
|
||||
userImageSrc = 'userimage.ashx?rnd=' + userinfo.accountImageRnd;
|
||||
}
|
||||
|
||||
var userImage = Q('userDropdownImage');
|
||||
if (userImage) {
|
||||
userImage.src = userImageSrc;
|
||||
}
|
||||
|
||||
var userDropdownButton = Q('userDropdownButton');
|
||||
if (userDropdownButton) {
|
||||
userDropdownButton.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleUserDropdown();
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
var userDropdownMenu = Q('userDropdownMenu');
|
||||
if (userDropdownMenu) {
|
||||
userDropdownMenu.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleUISubmenu(event) {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
var uiSubmenu = Q('uiSubmenu');
|
||||
if (uiSubmenu) {
|
||||
var isVisible = (uiSubmenu.style.display == 'block');
|
||||
uiSubmenu.style.display = isVisible ? 'none' : 'block';
|
||||
|
||||
var chevronIcon = document.querySelector('.userDropdownMenuItem[onclick*="toggleUISubmenu"] .fa-chevron-right');
|
||||
if (chevronIcon) {
|
||||
if (isVisible) {
|
||||
chevronIcon.style.transform = 'rotate(0deg)';
|
||||
} else {
|
||||
chevronIcon.style.transform = 'rotate(90deg)';
|
||||
}
|
||||
}
|
||||
if (!isVisible) {
|
||||
setTimeout(function() {
|
||||
document.addEventListener('click', closeUISubmenu);
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeUISubmenu(event) {
|
||||
var uiSubmenu = Q('uiSubmenu');
|
||||
var userDropdown = Q('userDropdown');
|
||||
if (uiSubmenu && userDropdown) {
|
||||
if (!uiSubmenu.contains(event.target) && !userDropdown.contains(event.target)) {
|
||||
uiSubmenu.style.display = 'none';
|
||||
resetChevronArrow();
|
||||
document.removeEventListener('click', closeUISubmenu);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function userInterfaceSelectMenu(s) {
|
||||
if (s) { uiMode = s; putstore('uiMode', uiMode); }
|
||||
webPageFullScreen = (uiMode < 3);
|
||||
@ -2681,7 +2806,6 @@
|
||||
QC('body').remove('fullscreen');
|
||||
QC('body').remove('arg_hide');
|
||||
if (xxcurrentView >= 10) QC('column_l').add('room4submenu');
|
||||
QV('UserDummyMenuSpan', false);
|
||||
leftBar.classList.add('d-none');
|
||||
//QV('page_leftbar', false);
|
||||
} else {
|
||||
@ -2690,7 +2814,6 @@
|
||||
QV('page_leftbar', !(args.hide & 16));
|
||||
QV('MainMenuSpan', !(args.hide & 16));
|
||||
if (xxcurrentView >= 10) QC('column_l').remove('room4submenu');
|
||||
QV('UserDummyMenuSpan', (xxcurrentView < 10) && webPageFullScreen);
|
||||
leftBar.classList.remove('d-none');
|
||||
}
|
||||
mainUpdate(512);
|
||||
@ -2843,6 +2966,7 @@
|
||||
|
||||
// If we are site administrator, register to get server statistics
|
||||
if ((siteRights & 21) != 0) { meshserver.send({ action: 'serverstats', interval: 10000 }); }
|
||||
updateUserDropdown();
|
||||
}
|
||||
|
||||
// To boost the speed of the web page when even floods occur, this method perform a delayed update on the web page.
|
||||
@ -3109,6 +3233,7 @@
|
||||
userinfo = message.userinfo;
|
||||
updateSiteAdmin();
|
||||
updateSelf();
|
||||
updateUserDropdown();
|
||||
break;
|
||||
}
|
||||
case 'users': {
|
||||
@ -4638,22 +4763,6 @@
|
||||
// MY DEVICES
|
||||
//
|
||||
|
||||
function topMenu(select) {
|
||||
if ((xxdialogMode != null) && (xxdialogMode != 0) && (xxdialogMode != 999)) return;
|
||||
if (select === undefined) {
|
||||
var x = (QS('topMenu').display == 'none');
|
||||
if (x == true) { if ((xxdialogMode == 0) || (xxdialogMode == null)) { QV('topMenu', true); xxdialogMode = 999; } } else { QV('topMenu', false); xxdialogMode = 0; }
|
||||
} else {
|
||||
QV('topMenu', false);
|
||||
xxdialogMode = 0;
|
||||
if ((select == 1)) { goForward('devices'); }
|
||||
if ((select == 2)) { goForward('account'); }
|
||||
if ((select == 3)) { goForward('events'); }
|
||||
if ((select == 4)) { goForward('users'); }
|
||||
if ((select == 5)) { goForward('files'); }
|
||||
if ((select == 6)) { goForward('server'); }
|
||||
}
|
||||
}
|
||||
|
||||
function onRealNameCheckBox() {
|
||||
showRealNames = Q('RealNameCheckBox').checked;
|
||||
@ -7587,6 +7696,7 @@
|
||||
QV('filesContextMenu', false);
|
||||
QV('deskPlayerContextMenu', false);
|
||||
QV('deskKeyShortcutContextMenu', false);
|
||||
QV('userDropdownMenu', false);
|
||||
QV('deskPreConfigShortcutContextMenu', false);
|
||||
QV('deskPreConfigScriptContextMenu', false);
|
||||
QV('expandAllContextMenu', false);
|
||||
@ -19384,12 +19494,50 @@
|
||||
|
||||
// Set the notification count on the upper right of the screen
|
||||
function setNotificationCount(c) {
|
||||
if (parseInt(Q('notificationCount').innerHTML) == c) return; // If the count did not change, exit now.
|
||||
QH('notificationCount', c);
|
||||
QS('notificationCount')['background-color'] = (c == 0) ? 'lightblue' : 'orange';
|
||||
var badge = Q('notificationBadge');
|
||||
if (parseInt(badge.innerHTML) === c) return;
|
||||
badge.innerHTML = c;
|
||||
QV('notificationCount', c > 0);
|
||||
}
|
||||
|
||||
// Close notification box when clicking outside
|
||||
function setupNotificationClickOutside() {
|
||||
document.addEventListener('click', function(event) {
|
||||
var notificationBox = Q('notifiyBox');
|
||||
var notificationIcon = Q('notificationCount');
|
||||
if (notificationBox && QS('notifiyBox')['display'] !== 'none') {
|
||||
if (!notificationBox.contains(event.target) && !notificationIcon.contains(event.target)) {
|
||||
QV('notifiyBox', false);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
setupNotificationClickOutside();
|
||||
|
||||
// Update night mode icon and text in dropdown menu
|
||||
function updateNightModeIcon() {
|
||||
var nightModeItem = document.querySelector('.userDropdownMenuItem[onclick*="toggleNightMode"]');
|
||||
if (nightModeItem) {
|
||||
var icon = nightModeItem.querySelector('.userDropdownMenuIcon');
|
||||
var textSpan = nightModeItem.querySelector('span');
|
||||
if (icon && textSpan) {
|
||||
var isNightMode = document.body.classList.contains('night');
|
||||
var iconClass = isNightMode ? 'fa-sun' : 'fa-moon';
|
||||
var text = isNightMode ? "Toggle Light Mode" : "Toggle Dark Mode";
|
||||
var newIcon = document.createElement('i');
|
||||
newIcon.className = 'fa ' + iconClass + ' userDropdownMenuIcon';
|
||||
icon.parentNode.replaceChild(newIcon, icon);
|
||||
textSpan.textContent = text;
|
||||
}
|
||||
}
|
||||
}
|
||||
function resetChevronArrow() {
|
||||
var chevronIcon = document.querySelector('.userDropdownMenuItem[onclick*="toggleUISubmenu"] .fa-chevron-right');
|
||||
if (chevronIcon) {
|
||||
chevronIcon.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh the notification box
|
||||
function drawNotifications() {
|
||||
var notifySettings = getstore('notifications', 0);
|
||||
@ -20266,7 +20414,6 @@
|
||||
if ((x == 0) && (webPageFullScreen)) { QC('body').add('arg_hide'); }
|
||||
|
||||
QV('MainSubMenuSpan', (x >= 10) && (x < 20));
|
||||
QV('UserDummyMenuSpan', (x == 51) || ((x < 10) && (x != 6) && webPageFullScreen));
|
||||
QV('MeshSubMenuSpan', (x >= 20) && (x < 30));
|
||||
QV('UserSubMenuSpan', (x >= 30) && (x < 40));
|
||||
QV('ServerSubMenuSpan', x == 6 || x == 115 || x == 40 || x == 41 || x == 42 || x == 43);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user