-
{{{titlehtml}}}
- {{{title1}}}
- {{{title2}}}
-
+
+
+
+
+ {{{titlehtml}}}
+
+
+ {{{title1}}}
+ {{{title2}}}
+
+
+
-
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ UI Settings
+
+
+
+
+
+
+
+ Toggle night mode
+
+
+
+
+
+ Personal Notes
+
+
+
+
+ My Account
+
+
+
+
+
+
+ Logout
+
+
@@ -2112,120 +2206,13 @@
}
args.hide = hide;
QV('uiViewButton5', !(args.hide & 4)); // Hide the footer toggle button if footer is hidden anyway.
+ QV('toggleFooterMenuItem', !(args.hide & 4)); // Hide the footer toggle menu item if footer is hidden anyway.
+ QV('toggleNightMenuItem', ((features2 & 0x00100000) == 0) && ((features2 & 0x00200000) == 0)); // Hide night mode toggle if permanent night (1) or day (2) mode is set
+ //QV('toggleModernUIMenuItem', ((features2 & 0x80000000) == 0)); // Show only if allowed and not forced siteStyle=3
+ updateMobileTopBarVisibility();
adjustPanels();
- // Setup logout control
- var logoutControl = '';
- if (logoutControls) {
- 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;
- }
-
- // Check permissions
- var siteRights = userinfo ? userinfo.siteadmin : 0;
- var serverFeatures = parseInt('{{{serverfeatures}}}');
- var canViewUsers = ((users != null) && ((features & 4) == 0)) || (((userinfo && userinfo.siteadmin & 512) != 0) && ((features & 0x08000000) != 0));
- var canViewFiles = (siteRights & 8) != 0;
- var canViewServer = (siteRights & 21) && ((serverFeatures & 64) != 0);
-
- logoutControl = '
' +
- '
';
- }
- }
- if (args.hide & 1) { QH('logoutControlSpan2', logoutControl); } else { QH('logoutControlSpan', logoutControl); }
-
- setTimeout(updateUserDropdown, 100);
+ setTimeout(updateUserDropdownVisibility, 100);
// Setup the context menu
document.onclick = function (e) { hideContextMenu(); }
@@ -2664,6 +2651,7 @@
QV('uiMenu', false);
QV('topMenu', false);
updateNightModeIcon();
+ updateMobileTopBarVisibility();
} else {
userDropdownMenu.style.display = 'none';
var uiSubmenu = Q('uiSubmenu');
@@ -2707,21 +2695,27 @@
function toggleUISubmenu(event) {
if (event) {
event.stopPropagation();
+ event.preventDefault();
}
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) {
+ uiSubmenu.style.display = 'none';
+ uiSubmenu.classList.remove('show');
+ var chevronIcon = document.querySelector('.userDropdownUISettings .fa-chevron-right');
+ if (chevronIcon) {
+ chevronIcon.classList.remove('rotated');
+ }
+ document.removeEventListener('click', closeUISubmenu);
+ } else {
+ uiSubmenu.style.display = 'block';
+ uiSubmenu.classList.add('show');
+ var chevronIcon = document.querySelector('.userDropdownUISettings .fa-chevron-right');
+ if (chevronIcon) {
+ chevronIcon.classList.add('rotated');
}
- }
- if (!isVisible) {
setTimeout(function() {
document.addEventListener('click', closeUISubmenu);
}, 10);
@@ -2735,7 +2729,11 @@
if (uiSubmenu && userDropdown) {
if (!uiSubmenu.contains(event.target) && !userDropdown.contains(event.target)) {
uiSubmenu.style.display = 'none';
- resetChevronArrow();
+ uiSubmenu.classList.remove('show');
+ var chevronIcon = document.querySelector('.userDropdownUISettings .fa-chevron-right');
+ if (chevronIcon) {
+ chevronIcon.classList.remove('rotated');
+ }
document.removeEventListener('click', closeUISubmenu);
}
}
@@ -2751,6 +2749,21 @@
adjustPanels();
}
+ function updateMobileTopBarVisibility() {
+ try {
+ var items = document.querySelectorAll('.mobile-menu-item');
+ for (var i = 0; i < items.length; i++) {
+ if ((uiMode == 2) || (uiMode == 3)) {
+ items[i].classList.add('d-none');
+ } else {
+ if (!(items[i].classList.contains('users-menu-item') || items[i].classList.contains('files-menu-item') || items[i].classList.contains('server-menu-item'))) {
+ items[i].classList.remove('d-none');
+ }
+ }
+ }
+ } catch (ex) { }
+ }
+
function toggleNightMode() {
if (xxdialogMode) return;
var cNightMode = getstore('nightMode', '0');
@@ -2930,6 +2943,7 @@
QV('p2AccountImageFrame', !accountSettingsLocked)
QV('p2ServerActions', (siteRights & 21) && ((serverFeatures & 143) != 0));
QV('LeftMenuMyServer', (siteRights & 21) && ((serverFeatures & 64) != 0)); // 16 + 4 + 1
+ try { (QS('LeftMenuMyServer').display == 'none') ? QC('mobileServerMenuItem').add('d-none') : QC('mobileServerMenuItem').remove('d-none'); } catch (e) { }
QV('MainMenuMyServer', siteRights & 21);
QV('p2ServerActionsBackup', (siteRights & 1) && ((serverFeatures & 1) != 0));
QV('p2ServerActionsRestore', (siteRights & 4) && ((serverFeatures & 2) != 0));
@@ -2938,6 +2952,7 @@
QV('p2ServerActionsConfig', (siteRights & 16) && ((serverFeatures & 128) != 0));
QV('MainMenuMyFiles', siteRights & 8);
QV('LeftMenuMyFiles', siteRights & 8);
+ try { (QS('LeftMenuMyFiles').display == 'none') ? QC('mobileFilesMenuItem').add('d-none') : QC('mobileFilesMenuItem').remove('d-none'); } catch (e) { }
if (((siteRights & 8) == 0) && (xxcurrentView == 5)) { setDialogMode(0); go(1); }
if (currentNode != null) { gotoDevice(currentNode._id, xxcurrentView, true); }
@@ -3067,6 +3082,7 @@
// Adjust "My Users" tabs
QV('MainMenuMyUsers', ((users != null) && ((features & 4) == 0)) || (((userinfo.siteadmin & 512) != 0) && ((features & 0x08000000) != 0)));
QV('LeftMenuMyUsers', ((users != null) && ((features & 4) == 0)) || (((userinfo.siteadmin & 512) != 0) && ((features & 0x08000000) != 0)));
+ try { (QS('LeftMenuMyUsers').display == 'none') ? QC('mobileUsersMenuItem').add('d-none') : QC('mobileUsersMenuItem').remove('d-none'); } catch (e) { }
QV('UsersGeneral', ((users != null) && ((features & 4) == 0)));
QV('UsersGroups', ((users != null) && ((features & 4) == 0)));
QV('UsersRecordings', ((userinfo.siteadmin & 512) != 0) && ((features & 0x08000000) != 0));
@@ -18822,6 +18838,174 @@
meshserver.send({ action: 'removemeshuser', meshid: meshid, userid: currentUser._id });
}
+
+ //
+ // UserDropDown Menu
+ //
+
+ var userDropdownOpen = false;
+ var uiSubmenuOpen = false;
+
+ function initializeUserDropdown() {
+ var dropdownButton = Q('userDropdownButton');
+ var dropdownMenu = Q('userDropdownMenu');
+ var uiSettingsButton = document.querySelector('.userDropdownUISettings');
+ var uiSubmenu = Q('uiSubmenu');
+
+ if (!dropdownButton || !dropdownMenu) return;
+
+ QS('uiSubmenu').display = 'none';
+ QS('uiSubmenu').opacity = '0';
+ QS('uiSubmenu').transform = 'translateX(12px)';
+ dropdownMenu.classList.remove('show');
+
+ dropdownButton.onclick = function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ userDropdownOpen = !userDropdownOpen;
+ dropdownMenu.classList.toggle('show');
+ if (!userDropdownOpen) {
+ QS('uiSubmenu').display = 'none';
+ QS('uiSubmenu').opacity = '0';
+ QS('uiSubmenu').transform = 'translateX(12px)';
+ uiSubmenuOpen = false;
+ resetChevronArrow();
+ }
+ };
+
+ document.addEventListener('click', function(e) {
+ var uiSubmenu = Q('uiSubmenu');
+ if (!dropdownMenu.contains(e.target) && !dropdownButton.contains(e.target) && !uiSubmenu.contains(e.target)) {
+ dropdownMenu.classList.remove('show');
+ QS('uiSubmenu').display = 'none';
+ QS('uiSubmenu').opacity = '0';
+ QS('uiSubmenu').transform = 'translateX(12px)';
+ userDropdownOpen = false;
+ uiSubmenuOpen = false;
+ resetChevronArrow();
+ }
+ });
+ }
+
+ function toggleUISubmenu() {
+ uiSubmenuOpen = !uiSubmenuOpen;
+
+ var uiSubmenu = Q('uiSubmenu');
+ var isDesktop = window.innerWidth > 769;
+ var reduceMotion = (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+
+ if (uiSubmenuOpen) {
+ QS('uiSubmenu').display = 'block';
+
+ if (isDesktop && (reduceMotion == false)) {
+ setTimeout(function() {
+ QS('uiSubmenu').opacity = '1';
+ QS('uiSubmenu').transform = 'translateX(0)';
+ }, 10);
+ } else {
+ QS('uiSubmenu').opacity = '1';
+ QS('uiSubmenu').transform = 'translateX(0)';
+ }
+ } else {
+ if (isDesktop && (reduceMotion == false)) {
+ QS('uiSubmenu').opacity = '0';
+ QS('uiSubmenu').transform = 'translateX(12px)';
+ setTimeout(function() {
+ QS('uiSubmenu').display = 'none';
+ }, 300);
+ } else {
+ QS('uiSubmenu').display = 'none';
+ QS('uiSubmenu').opacity = '0';
+ QS('uiSubmenu').transform = 'translateX(12px)';
+ }
+ }
+
+ var chevronIcon = document.querySelector('.userDropdownUISettings .fa-chevron-right');
+ if (chevronIcon) {
+ chevronIcon.style.transform = uiSubmenuOpen ? 'rotate(90deg)' : '';
+ }
+ }
+
+ function handleUserMenuItem(action) {
+ Q('userDropdownMenu').classList.remove('show');
+ QS('uiSubmenu').display = 'none';
+ QS('uiSubmenu').opacity = '0';
+ QS('uiSubmenu').transform = 'translateX(12px)';
+ userDropdownOpen = false;
+ uiSubmenuOpen = false;
+ resetChevronArrow();
+
+ switch(action) {
+ case 'devices': goForward('devices'); break;
+ case 'events': goForward('events'); break;
+ case 'users': goForward('users'); break;
+ case 'files': goForward('files'); break;
+ case 'server': goForward('server'); break;
+ case 'toggle-modern-ui': toggleBootstrapUIMode(); break;
+ case 'left-bar': userInterfaceSelectMenu(1); break;
+ case 'top-bar': userInterfaceSelectMenu(2); break;
+ case 'fixed-width': userInterfaceSelectMenu(3); break;
+ case 'toggle-footer': toggleFooterBarMode(); break;
+ case 'toggle-night': toggleNightMode(); break;
+ case 'notes': showNotes(false); break;
+ case 'account': go(2); break;
+ case 'logout':
+ if (logoutControls && logoutControls.logoutUrl) {
+ window.location.href = logoutControls.logoutUrl;
+ }
+ break;
+ }
+ }
+
+ function resetChevronArrow() {
+ var arrow = document.querySelector('.userDropdownUISettings .fa-chevron-right');
+ if (arrow) arrow.style.transform = '';
+ }
+
+ function updateUserDropdownVisibility() {
+ var userDropdown = Q('userDropdown');
+ var dropdownName = Q('userDropdownName');
+ var dropdownImage = Q('userDropdownImage');
+
+ if (logoutControls && logoutControls.name) {
+ QS('userDropdown').display = 'block';
+ dropdownName.textContent = logoutControls.name;
+
+ if (userinfo && userinfo.flags && (userinfo.flags & 1)) {
+ var rnd = userinfo.accountImageRnd || Math.floor(Math.random() * 9999999999);
+ dropdownImage.src = 'userimage.ashx?rnd=' + rnd;
+ }
+ } else {
+ QS('userDropdown').display = 'none';
+ }
+ }
+
+ function updateNightModeIcon() {
+ var nightModeItem = document.querySelector('.userDropdownMenuItem[data-action="toggle-night"]');
+ if (nightModeItem) {
+ var icon = nightModeItem.querySelector('#nightModeIcon');
+ var textSpan = nightModeItem.querySelector('#nightModeText');
+ 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.id = 'nightModeIcon';
+ newIcon.className = 'fa ' + iconClass + ' userDropdownMenuIcon night-mode-icon';
+ icon.parentNode.replaceChild(newIcon, icon);
+ textSpan.textContent = text;
+ }
+ }
+ }
+ document.addEventListener('DOMContentLoaded', function() {
+ initializeUserDropdown();
+ updateUserDropdownVisibility();
+ updateNightModeIcon();
+ });
+
+
+
+
//
// MY USER EVENTS
//
@@ -19532,29 +19716,6 @@
}
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() {
diff --git a/webserver.js b/webserver.js
index 2861544f..4a4e58bf 100644
--- a/webserver.js
+++ b/webserver.js
@@ -3393,6 +3393,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
if (domain.devicesearchbargroupname === true) { features2 += 0x10000000; } // Search bar will find by group name too
if (((typeof domain.passwordrequirements != 'object') || (domain.passwordrequirements.duo2factor != false)) && (typeof domain.duo2factor == 'object') && (typeof domain.duo2factor.integrationkey == 'string') && (typeof domain.duo2factor.secretkey == 'string') && (typeof domain.duo2factor.apihostname == 'string')) { features2 += 0x20000000; } // using Duo for 2FA is allowed
if (domain.showmodernuitoggle == true) { features2 += 0x40000000; } // Indicates that the new UI should be shown
+ if (domain.sitestyle === 3) { features2 |= 0x80000000; } // Indicates that Modern UI is forced (siteStyle = 3)
return { features: features, features2: features2 };
}
' +
- '
' +
- '' + logoutControls.name + '' +
- '' +
- '
' +
- '' +
- '
' +
-
- '
' +
- '' +
- '' + "My Devices" + '' +
- '
' +
-
- '' +
- '' +
- '' + "My Events" + '' +
- '
' +
-
- (canViewUsers ? '' +
- '' +
- '' + "My Users" + '' +
- '
' : '') +
-
- (canViewFiles ? '' +
- '' +
- '' + "My Files" + '' +
- '
' : '') +
-
- (canViewServer ? '' +
- '' +
- '' + "My Server" + '' +
- '
' : '') +
-
- '' +
-
- '' +
- '' +
- '' + "UI Settings" + '' +
- '' +
- '
' +
-
- '' +
-
- '' +
- '' +
- '' + "Toggle night mode" + '' +
- '
' +
-
- '' +
- '' +
- '' + "Personal Notes" + '' +
- '
' +
-
- '' +
- '' +
- '' + "My Account" + '' +
- '
' +
-
- '';
-
- if (logoutControls.logoutUrl != null) {
- logoutControl += '' +
- '' +
- '' + "Logout" + '' +
- '
';
- }
-
- logoutControl += '