bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: use hidden state for shell dropdowns

Browse Source
This commit is contained in:
a.tolmachev
2026-05-02 14:54:46 +00:00
parent 39cae4a557
commit 0e67879051
11 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/agents.html
+2 -2
View File
@@ -29,7 +29,7 @@
<span class="ws-current-name" id="ws-current-name">acme-workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -77,7 +77,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link active" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/api-keys.html
+2 -2
View File
@@ -41,7 +41,7 @@
<span class="ws-current-name" id="ws-current-name">acme-workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -93,7 +93,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link active" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/async-jobs.html
+2 -2
View File
@@ -23,7 +23,7 @@
<span class="ws-current-name" id="ws-current-name">workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -58,7 +58,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/logs.html
+2 -2
View File
@@ -27,7 +27,7 @@
<span class="ws-current-name" id="ws-current-name">acme-workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -74,7 +74,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/secrets.html
+2 -2
View File
@@ -55,7 +55,7 @@
<span class="ws-current-name" id="ws-current-name" data-testid="shell-workspace-name">workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -92,7 +92,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/settings.html
+2 -2
View File
@@ -27,7 +27,7 @@
<span class="ws-current-name" id="ws-current-name">acme-workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -74,7 +74,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/stream-sessions.html
+2 -2
View File
@@ -23,7 +23,7 @@
<span class="ws-current-name" id="ws-current-name">workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -58,7 +58,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/usage.html
+2 -2
View File
@@ -27,7 +27,7 @@
<span class="ws-current-name" id="ws-current-name">acme-workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -74,7 +74,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/html/wizard/index.html
+2 -2
View File
@@ -27,7 +27,7 @@
<span class="ws-current-name" id="ws-current-name" data-testid="shell-workspace-name">acme-workspace</span>
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown" id="ws-dropdown" hidden>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
@@ -79,7 +79,7 @@
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link active" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
apps/ui/js/nav.js
+9 -9
View File
@@ -10,33 +10,33 @@
var mobileNav = document.querySelector('.mobile-nav');
if (dropdown) {
dropdown.style.display = 'none';
dropdown.hidden = true;
}
if (mobileNav) {
mobileNav.style.display = 'none';
mobileNav.hidden = true;
}
if (avatar && dropdown) {
avatar.addEventListener('click', function (event) {
event.stopPropagation();
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
dropdown.hidden = !dropdown.hidden;
});
}
if (hamburger && mobileNav) {
hamburger.addEventListener('click', function (event) {
event.stopPropagation();
mobileNav.style.display = mobileNav.style.display === 'none' ? 'block' : 'none';
hamburger.classList.toggle('open', mobileNav.style.display !== 'none');
mobileNav.hidden = !mobileNav.hidden;
hamburger.classList.toggle('open', !mobileNav.hidden);
});
}
document.addEventListener('click', function (event) {
if (dropdown && !event.target.closest('.user-menu')) {
dropdown.style.display = 'none';
dropdown.hidden = true;
}
if (mobileNav && !event.target.closest('.navbar') && !event.target.closest('.mobile-nav')) {
mobileNav.style.display = 'none';
mobileNav.hidden = true;
if (hamburger) {
hamburger.classList.remove('open');
}
@@ -52,7 +52,7 @@
document.querySelectorAll('[data-action="profile"]').forEach(function (button) {
button.addEventListener('click', function () {
if (dropdown) {
dropdown.style.display = 'none';
dropdown.hidden = true;
}
window.location.href = ((window.CrankRoutes && window.CrankRoutes.settings) || '/settings') + '#profile';
});
@@ -61,7 +61,7 @@
document.querySelectorAll('[data-action="settings-link"]').forEach(function (button) {
button.addEventListener('click', function () {
if (dropdown) {
dropdown.style.display = 'none';
dropdown.hidden = true;
}
window.location.href = (window.CrankRoutes && window.CrankRoutes.settings) || '/settings';
});
apps/ui/js/workspace.js
+4 -4
View File
@@ -169,7 +169,7 @@ function renderWorkspaceList() {
manageLink.href = (window.CrankRoutes && window.CrankRoutes.workspaceSetup) || '/workspace-setup';
manageLink.addEventListener('click', function() {
var dd = document.getElementById('ws-dropdown');
if (dd) dd.style.display = 'none';
if (dd) dd.hidden = true;
});
manageLink.appendChild(
buildIconSvg(
@@ -222,7 +222,7 @@ function initWorkspaceSwitcher() {
function toggleWsSwitcher(e) {
e.stopPropagation();
var dd = document.getElementById('ws-dropdown');
if (dd) dd.style.display = dd.style.display === 'none' ? '' : 'none';
if (dd) dd.hidden = !dd.hidden;
}
function switchWorkspace(workspaceId) {
@@ -230,7 +230,7 @@ function switchWorkspace(workspaceId) {
if (!workspace) return;
var dd = document.getElementById('ws-dropdown');
if (dd) dd.style.display = 'none';
if (dd) dd.hidden = true;
if (!window.CrankApi || !window.CrankAuth || typeof window.CrankAuth.replaceSession !== 'function') {
cacheCurrentWorkspace(workspace);
@@ -282,6 +282,6 @@ window.addEventListener('crank:sessionchange', function() {
document.addEventListener('click', function(e) {
if (!e.target.closest('#ws-switcher')) {
var dd = document.getElementById('ws-dropdown');
if (dd) dd.style.display = 'none';
if (dd) dd.hidden = true;
}
});