forked from fa/breadcrumb-the-shire
topbar anpassungen
This commit is contained in:
@@ -102,6 +102,7 @@ Listen mit `rowDblClick.getUrl(...)` nutzen standardmäßig eine zugängliche Ro
|
||||
- sichtbare Action-Spalte rechts (`Open`/`Edit`)
|
||||
- Doppelklick bleibt als Fallback aktiv
|
||||
- `Enter` auf fokussierter Zeile navigiert zur selben URL
|
||||
- Action-Header/Tooltip zeigt den Enter-Hinweis
|
||||
|
||||
Optionale Konfiguration über `createServerGrid(...)`:
|
||||
|
||||
@@ -134,6 +135,13 @@ Hinweis:
|
||||
|
||||
- Falls eine Seite `actions.enabled: true` explizit setzt, wird keine zusätzliche automatische Row-Action-Spalte injiziert.
|
||||
|
||||
### Grid Error Recovery
|
||||
|
||||
Bei Grid-Fehlern rendert die Factory automatisch einen Retry-CTA im Error-State.
|
||||
|
||||
- Label kommt aus `language.errorRetry` (Fallback: `Retry`).
|
||||
- Klick auf Retry lädt den Grid-Server-Request erneut.
|
||||
|
||||
### Filter UX 2.0 (Globaler Standard)
|
||||
|
||||
Für Listen gilt standardmäßig:
|
||||
|
||||
@@ -199,6 +199,8 @@
|
||||
"Modified": "Aktualisiert",
|
||||
"No users found": "Keine Benutzer gefunden",
|
||||
"Open": "Öffnen",
|
||||
"Press Enter to open row": "Drücke Enter, um die Zeile zu öffnen",
|
||||
"Retry": "Erneut versuchen",
|
||||
"Yes": "Ja",
|
||||
"No": "Nein",
|
||||
"User created": "Benutzer erstellt",
|
||||
@@ -340,12 +342,18 @@
|
||||
"New folder": "Neuer Ordner",
|
||||
"Toggle navigation": "Navigation umschalten",
|
||||
"Primary navigation": "Hauptnavigation",
|
||||
"Language switcher": "Sprachauswahl",
|
||||
"Sort column ascending": "Spalte aufsteigend sortieren",
|
||||
"Sort column descending": "Spalte absteigend sortieren",
|
||||
"Previous": "Zurück",
|
||||
"Next": "Weiter",
|
||||
"Navigation": "Navigation",
|
||||
"Display": "Anzeige",
|
||||
"Session": "Sitzung",
|
||||
"Page %d of %d": "Seite %d von %d",
|
||||
"Page %d": "Seite %d",
|
||||
"Per page": "Pro Seite",
|
||||
"Skip to main content": "Zum Hauptinhalt springen",
|
||||
"Rows per page": "Einträge pro Seite",
|
||||
"Showing": "Zeige",
|
||||
"of": "von",
|
||||
|
||||
@@ -199,6 +199,8 @@
|
||||
"Modified": "Modified",
|
||||
"No users found": "No users found",
|
||||
"Open": "Open",
|
||||
"Press Enter to open row": "Press Enter to open row",
|
||||
"Retry": "Retry",
|
||||
"Yes": "Yes",
|
||||
"No": "No",
|
||||
"User created": "User created",
|
||||
@@ -340,12 +342,18 @@
|
||||
"New folder": "New folder",
|
||||
"Toggle navigation": "Toggle navigation",
|
||||
"Primary navigation": "Primary navigation",
|
||||
"Language switcher": "Language switcher",
|
||||
"Sort column ascending": "Sort column ascending",
|
||||
"Sort column descending": "Sort column descending",
|
||||
"Previous": "Previous",
|
||||
"Next": "Next",
|
||||
"Navigation": "Navigation",
|
||||
"Display": "Display",
|
||||
"Session": "Session",
|
||||
"Page %d of %d": "Page %d of %d",
|
||||
"Page %d": "Page %d",
|
||||
"Per page": "Per page",
|
||||
"Skip to main content": "Skip to main content",
|
||||
"Rows per page": "Rows per page",
|
||||
"Showing": "Showing",
|
||||
"of": "of",
|
||||
|
||||
@@ -19,6 +19,7 @@ function gridLang(): array
|
||||
'navigate' => t('Page %d of %d'),
|
||||
'page' => t('Page %d'),
|
||||
'rowsPerPage' => t('Rows per page'),
|
||||
'rowsPerPageShort' => t('Per page'),
|
||||
'showing' => t('Showing'),
|
||||
'of' => t('of'),
|
||||
'to' => t('to'),
|
||||
@@ -28,7 +29,9 @@ function gridLang(): array
|
||||
'column' => t('Actions'),
|
||||
'open' => t('Open'),
|
||||
'edit' => t('Edit'),
|
||||
'rowEnterHint' => t('Press Enter to open row'),
|
||||
],
|
||||
'errorRetry' => t('Retry'),
|
||||
'loading' => t('Loading...'),
|
||||
'noRecordsFound' => t('No records found'),
|
||||
'error' => t('An error happened while fetching the data'),
|
||||
|
||||
@@ -36,13 +36,14 @@ if ($bufferTitle !== '') {
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="app-skip-link" href="#app-main-content"><?php e(t('Skip to main content')); ?></a>
|
||||
<div class="app-container">
|
||||
<?php require __DIR__ . '/partials/app-main-aside-icon-bar.phtml'; ?>
|
||||
<?php require __DIR__ . '/partials/app-main-aside.phtml'; ?>
|
||||
<div class="app-main">
|
||||
<main>
|
||||
<?php require __DIR__ . '/partials/app-topbar.phtml'; ?>
|
||||
<div class="app-main-content">
|
||||
<div id="app-main-content" class="app-main-content" tabindex="-1">
|
||||
<?php require __DIR__ . '/partials/app-flash.phtml'; ?>
|
||||
<?php Buffer::get('html'); ?>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@ $publicTarget = ltrim($publicTarget, '/');
|
||||
|
||||
<?php if ($variant === 'dropdown'): ?>
|
||||
<details class="dropdown">
|
||||
<summary>
|
||||
<summary aria-label="<?php e(t('Language switcher')); ?>">
|
||||
<i class="bi bi-translate"></i>
|
||||
</summary>
|
||||
<ul dir="rtl">
|
||||
@@ -38,6 +38,24 @@ $publicTarget = ltrim($publicTarget, '/');
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</details>
|
||||
<?php elseif ($variant === 'menu-items'): ?>
|
||||
<?php foreach ($locales as $locale): ?>
|
||||
<?php
|
||||
$isActive = $locale === I18n::$locale;
|
||||
$label = strtoupper((string) $locale);
|
||||
$publicUrl = $base . '/' . $locale . ($publicTarget !== '' ? '/' . $publicTarget : '');
|
||||
$switchUrl = $isLoggedIn
|
||||
? ($baseUrl . '?locale=' . $locale . '&return=' . urlencode($returnTarget))
|
||||
: $publicUrl;
|
||||
?>
|
||||
<li>
|
||||
<a href="<?php e($switchUrl); ?>"
|
||||
class="<?php e($isActive ? 'active' : ''); ?>"
|
||||
<?php if ($isActive) { ?>aria-current="true"<?php } ?>>
|
||||
<?php e(t('Language')); ?>: <?php e($label); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<?php if ($isLoggedIn): ?>
|
||||
<form class="nav nav--lang" method="get" action="<?php e($baseUrl); ?>" aria-label="Language switcher">
|
||||
|
||||
@@ -8,81 +8,63 @@ $userUuid = trim((string) ($user['uuid'] ?? ''));
|
||||
$accountEditUrl = $userUuid !== '' ? lurl("admin/users/edit/{$userUuid}") : $accountUrl;
|
||||
$themes = appThemes();
|
||||
$theme = currentTheme();
|
||||
$themeIcon = str_starts_with($theme, 'dark') ? 'bi-moon-stars-fill' : 'bi-sun-fill';
|
||||
$csrfKey = Session::$csrfSessionKey;
|
||||
$csrfToken = $_SESSION[$csrfKey] ?? '';
|
||||
|
||||
// Tenant switcher data
|
||||
$currentTenant = $_SESSION['current_tenant'] ?? null;
|
||||
$currentTenantId = $currentTenant['id'] ?? null;
|
||||
$currentTenantId = (int) ($currentTenant['id'] ?? 0);
|
||||
$availableTenants = $_SESSION['available_tenants'] ?? [];
|
||||
$tenantLabel = trim((string) ($currentTenant['description'] ?? ''));
|
||||
if ($tenantLabel === '') {
|
||||
$tenantLabel = t('None');
|
||||
}
|
||||
$canSwitchTenant = is_array($currentTenant) && count($availableTenants) > 1;
|
||||
$allowUserTheme = allowUserTheme();
|
||||
|
||||
?>
|
||||
<header class="app-header">
|
||||
<nav>
|
||||
<ul>
|
||||
<nav class="app-topbar">
|
||||
<ul class="app-topbar-left">
|
||||
<li>
|
||||
<a id="global-back" data-tooltip-pos="bottom" data-tooltip="<?php e(t('Back')); ?> (Alt+←)" title="<?php e(t('Back')); ?> (Alt+←)" href="admin"><i class="bi bi-arrow-left"></i></a>
|
||||
<a id="global-back" data-tooltip-pos="bottom" data-tooltip="<?php e(t('Back')); ?> (Alt+←)" title="<?php e(t('Back')); ?> (Alt+←)" aria-label="<?php e(t('Back')); ?> (Alt+←)" href="admin"><i class="bi bi-arrow-left"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="global-forward" data-tooltip-pos="bottom" data-tooltip="<?php e(t('Forward')); ?> (Alt+→)" title="<?php e(t('Forward')); ?> (Alt+→)" href="admin"><i class="bi bi-arrow-right"></i></a>
|
||||
<a id="global-forward" data-tooltip-pos="bottom" data-tooltip="<?php e(t('Forward')); ?> (Alt+→)" title="<?php e(t('Forward')); ?> (Alt+→)" aria-label="<?php e(t('Forward')); ?> (Alt+→)" href="admin"><i class="bi bi-arrow-right"></i></a>
|
||||
</li>
|
||||
<li id="async-messages"></li>
|
||||
</ul>
|
||||
<ul class="nav-list">
|
||||
<li data-tooltip="<?php e(t("Toggle Sidebar"));?>" data-tooltip-pos="bottom">
|
||||
<button id="toggle-aside" data-sidebar-toggle data-sidebar-action="visibility"><i class="bi bi-layout-sidebar-inset"></i></button>
|
||||
</li>
|
||||
<li data-tooltip="<?php e(t("Toggle Detail Sidebar"));?>" data-tooltip-pos="bottom">
|
||||
<button id="toggle-main-content-aside"><i class="bi bi-layout-sidebar-inset-reverse"></i></button>
|
||||
</li>
|
||||
<?php if (allowUserTheme()): ?>
|
||||
<li data-tooltip="<?php e(t('Theme')); ?>" data-tooltip-pos="bottom">
|
||||
<details class="dropdown"
|
||||
data-theme-menu
|
||||
data-theme-url="admin/users/theme"
|
||||
data-csrf-key="<?php e($csrfKey); ?>"
|
||||
data-csrf-token="<?php e($csrfToken); ?>">
|
||||
<summary aria-label="<?php e(t('Toggle theme')); ?>">
|
||||
<i class="bi <?php e($themeIcon); ?>" data-theme-icon></i>
|
||||
<div class="app-topbar-center" aria-hidden="true"></div>
|
||||
<ul class="app-topbar-right">
|
||||
<li class="app-topbar-tenant-slot" data-tooltip="<?php e(t('Tenant')); ?>" data-tooltip-pos="bottom">
|
||||
<?php if ($canSwitchTenant): ?>
|
||||
<details class="dropdown app-topbar-tenant-menu">
|
||||
<summary class="app-topbar-tenant-chip" aria-label="<?php e(t('Switch tenant')); ?>" title="<?php e($tenantLabel); ?>">
|
||||
<span class="app-topbar-tenant-name"><?php e($tenantLabel); ?></span>
|
||||
</summary>
|
||||
<ul dir="rtl">
|
||||
<?php foreach ($themes as $key => $label): ?>
|
||||
<?php $isActiveTheme = $key === $theme; ?>
|
||||
<li>
|
||||
<a href="#" data-theme-option data-theme-value="<?php e($key); ?>"
|
||||
class="<?php e($isActiveTheme ? 'active' : ''); ?>"
|
||||
<?php echo $isActiveTheme ? 'aria-current="true"' : ''; ?>>
|
||||
<?php e(t($label)); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<li data-tooltip="<?php e(t('High contrast')); ?>" data-tooltip-pos="bottom">
|
||||
<button type="button" data-contrast-toggle aria-label="<?php e(t('Toggle contrast')); ?>">
|
||||
<i class="bi bi-circle-half"></i>
|
||||
</button>
|
||||
</li>
|
||||
<?php if ($currentTenant && count($availableTenants) > 1): ?>
|
||||
<li data-tooltip="<?php e(t('Switch tenant')); ?>" data-tooltip-pos="bottom">
|
||||
<details class="dropdown">
|
||||
<summary><i class="bi bi-buildings"></i></summary>
|
||||
<ul dir="rtl">
|
||||
<ul class="app-topbar-menu-list app-topbar-menu-list--right">
|
||||
<?php foreach ($availableTenants as $tenant): ?>
|
||||
<?php $isActive = ($tenant['id'] ?? 0) === $currentTenantId; ?>
|
||||
<?php
|
||||
$tenantId = (int) ($tenant['id'] ?? 0);
|
||||
$isActive = $tenantId === $currentTenantId;
|
||||
$rowLabel = trim((string) ($tenant['description'] ?? ''));
|
||||
if ($rowLabel === '') {
|
||||
$rowLabel = t('None');
|
||||
}
|
||||
?>
|
||||
<li>
|
||||
<a href="#"
|
||||
class="<?php echo $isActive ? 'active' : ''; ?>"
|
||||
<?php if (!$isActive): ?>
|
||||
data-switch-tenant="<?php e($tenant['id'] ?? ''); ?>"
|
||||
data-csrf-key="<?php e($csrfKey); ?>"
|
||||
data-csrf-token="<?php e($csrfToken); ?>"
|
||||
data-error-message="<?php e(t('Failed to switch tenant')); ?>"
|
||||
<?php endif; ?>>
|
||||
<?php e($tenant['description'] ?? ''); ?>
|
||||
class="<?php e($isActive ? 'active' : ''); ?>"
|
||||
title="<?php e($rowLabel); ?>"
|
||||
<?php if ($isActive): ?>
|
||||
aria-current="true"
|
||||
<?php else: ?>
|
||||
data-switch-tenant="<?php e((string) $tenantId); ?>"
|
||||
data-csrf-key="<?php e($csrfKey); ?>"
|
||||
data-csrf-token="<?php e($csrfToken); ?>"
|
||||
data-error-message="<?php e(t('Failed to switch tenant')); ?>"
|
||||
<?php endif; ?>>
|
||||
<?php e($rowLabel); ?>
|
||||
<?php if ($isActive): ?>
|
||||
<i class="bi bi-check"></i>
|
||||
<?php endif; ?>
|
||||
@@ -91,27 +73,79 @@ $availableTenants = $_SESSION['available_tenants'] ?? [];
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<li>
|
||||
<?php
|
||||
$variant = 'dropdown';
|
||||
require __DIR__ . '/app-language-switcher.phtml';
|
||||
unset($variant);
|
||||
?>
|
||||
<?php else: ?>
|
||||
<span class="app-topbar-tenant-chip" aria-label="<?php e(t('Tenant')); ?>" title="<?php e($tenantLabel); ?>">
|
||||
<span class="app-topbar-tenant-name"><?php e($tenantLabel); ?></span>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<li>
|
||||
<details class="dropdown">
|
||||
<summary><i class="bi bi-person-fill"></i></summary>
|
||||
<ul dir="rtl">
|
||||
<details class="dropdown app-topbar-user-menu"
|
||||
<?php if ($allowUserTheme): ?>
|
||||
data-theme-menu
|
||||
data-theme-url="admin/users/theme"
|
||||
data-csrf-key="<?php e($csrfKey); ?>"
|
||||
data-csrf-token="<?php e($csrfToken); ?>"
|
||||
<?php endif; ?>>
|
||||
<summary aria-label="<?php e(t('Account')); ?>">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</summary>
|
||||
<ul class="app-topbar-menu-list app-topbar-menu-list--right">
|
||||
<li class="app-topbar-menu-heading" role="presentation"><small><?php e(t('Navigation')); ?></small></li>
|
||||
<li>
|
||||
<button type="button" class="app-topbar-menu-with-hotkey" id="toggle-aside" data-sidebar-toggle data-sidebar-action="visibility" aria-label="<?php e(t('Toggle Sidebar')); ?>">
|
||||
<span><?php e(t('Toggle Sidebar')); ?></span>
|
||||
<span class="app-topbar-hotkey" aria-hidden="true">Ctrl/Cmd+B</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="app-topbar-menu-item-detail-sidebar">
|
||||
<button type="button" id="toggle-main-content-aside" aria-label="<?php e(t('Toggle Detail Sidebar')); ?>">
|
||||
<?php e(t('Toggle Detail Sidebar')); ?>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="app-topbar-menu-divider" role="separator"></li>
|
||||
<li class="app-topbar-menu-heading" role="presentation"><small><?php e(t('Display')); ?></small></li>
|
||||
<?php if ($allowUserTheme): ?>
|
||||
<?php foreach ($themes as $key => $label): ?>
|
||||
<?php $isActiveTheme = $key === $theme; ?>
|
||||
<li>
|
||||
<a href="#"
|
||||
data-theme-option
|
||||
data-theme-value="<?php e($key); ?>"
|
||||
class="<?php e($isActiveTheme ? 'active' : ''); ?>"
|
||||
<?php echo $isActiveTheme ? 'aria-current="true"' : ''; ?>>
|
||||
<?php e(t($label)); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
<li>
|
||||
<button type="button" data-contrast-toggle aria-label="<?php e(t('Toggle contrast')); ?>" aria-pressed="false">
|
||||
<?php e(t('High contrast')); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="app-topbar-menu-divider" role="separator"></li>
|
||||
<li class="app-topbar-menu-heading" role="presentation"><small><?php e(t('Language')); ?></small></li>
|
||||
<?php
|
||||
$variant = 'menu-items';
|
||||
require __DIR__ . '/app-language-switcher.phtml';
|
||||
unset($variant);
|
||||
?>
|
||||
|
||||
<li class="app-topbar-menu-divider" role="separator"></li>
|
||||
<li class="app-topbar-menu-heading" role="presentation"><small><?php e(t('Account')); ?></small></li>
|
||||
<li><a href="<?php e($accountEditUrl); ?>">
|
||||
<?php e(t('Account')); ?>
|
||||
<?php e(t('My account')); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?php e(lurl('help/hotkeys')); ?>">
|
||||
<?php e(t('Keyboard shortcuts')); ?>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="app-topbar-menu-divider" role="separator"></li>
|
||||
<li class="app-topbar-menu-heading" role="presentation"><small><?php e(t('Session')); ?></small></li>
|
||||
<li><a href="logout">
|
||||
<?php e(t('Logout')); ?>
|
||||
</a>
|
||||
|
||||
@@ -1,4 +1,24 @@
|
||||
@layer layout {
|
||||
.app-skip-link {
|
||||
position: fixed;
|
||||
top: calc(var(--app-spacing) * 0.5);
|
||||
left: var(--app-spacing);
|
||||
padding: calc(var(--app-spacing) * 0.5) var(--app-spacing);
|
||||
border: 1px solid var(--app-primary);
|
||||
border-radius: var(--app-border-radius);
|
||||
background: var(--app-background-color);
|
||||
color: var(--app-primary);
|
||||
text-decoration: none;
|
||||
transform: translateY(-180%);
|
||||
transition: transform var(--app-transition);
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.app-skip-link:focus,
|
||||
.app-skip-link:focus-visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
--app-topbar-item-padding: 5px;
|
||||
--app-topbar-list-gap: 8px;
|
||||
@@ -18,33 +38,41 @@ main:has(.app-details-container) .app-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.app-header nav {
|
||||
.app-header nav.app-topbar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: var(--app-spacing);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-header nav li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-header form:has(input#app-search) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-header li:has(#toggle-main-content-aside) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-header nav > ul {
|
||||
.app-topbar-left,
|
||||
.app-topbar-right {
|
||||
display: flex;
|
||||
gap: var(--app-topbar-list-gap);
|
||||
align-items: center;
|
||||
color: var(--app-muted-color);
|
||||
}
|
||||
|
||||
.app-topbar-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.app-topbar-center {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.app-topbar-menu-item-detail-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.app-header details.dropdown > summary:not([role]) {
|
||||
border: none;
|
||||
height: auto;
|
||||
@@ -53,18 +81,20 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.app-header details.dropdown > summary:not([role]):after {
|
||||
/* .app-header details.dropdown > summary:not([role]):after {
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.app-header nav > ul li a {
|
||||
.app-topbar-left > li > a,
|
||||
.app-topbar-right > li > a {
|
||||
padding: var(--app-topbar-item-padding);
|
||||
color: var(--app-topbar-muted);
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-header button {
|
||||
.app-topbar-left button,
|
||||
.app-topbar-right button {
|
||||
padding: var(--app-topbar-item-padding);
|
||||
color: var(--app-topbar-muted);
|
||||
display: block;
|
||||
@@ -80,6 +110,153 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-topbar-tenant-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.4);
|
||||
max-width: min(26rem, 45vw);
|
||||
padding: calc(var(--app-spacing) * 0.35) calc(var(--app-spacing) * 0.75);
|
||||
border: var(--app-border-width) solid var(--app-border);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--app-topbar-muted);
|
||||
}
|
||||
|
||||
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-topbar-tenant-name {
|
||||
display: inline-block;
|
||||
max-width: min(20rem, 38vw);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-topbar-user-menu > summary {
|
||||
color: var(--app-topbar-muted);
|
||||
}
|
||||
|
||||
.app-topbar-menu-list {
|
||||
min-width: min(17rem, calc(100vw - (var(--app-spacing) * 2)));
|
||||
max-width: min(24rem, calc(100vw - (var(--app-spacing) * 2)));
|
||||
max-height: min(32rem, calc(100vh - (var(--app-spacing) * 4)));
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
.app-topbar-menu-list {
|
||||
max-height: min(32rem, calc(100dvh - (var(--app-spacing) * 4)));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.app-topbar-menu-list {
|
||||
max-height: min(40rem, calc(100vh - (var(--app-spacing) * 4)));
|
||||
}
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
@media (min-width: 768px) {
|
||||
.app-topbar-menu-list {
|
||||
max-height: min(40rem, calc(100dvh - (var(--app-spacing) * 4)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-topbar-menu-list--right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Override global dropdown default (left:0) without using dir=rtl hacks. */
|
||||
.app-header details.dropdown > summary + ul.app-topbar-menu-list--right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
|
||||
.app-topbar-menu-list li > a,
|
||||
.app-topbar-menu-list li > button {
|
||||
display: block;
|
||||
margin: calc(var(--app-form-element-spacing-vertical) * -0.5)
|
||||
calc(var(--app-form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(--app-form-element-spacing-vertical) * 0.5)
|
||||
var(--app-form-element-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--app-dropdown-color);
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.app-topbar-menu-list li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-topbar-menu-list li > button:hover,
|
||||
.app-topbar-menu-list li > button:focus,
|
||||
.app-topbar-menu-list li > button:focus-visible {
|
||||
background-color: var(--app-dropdown-hover-background-color);
|
||||
}
|
||||
|
||||
.app-topbar-menu-list li > button.app-topbar-menu-with-hotkey {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
column-gap: calc(var(--app-spacing) * 0.6);
|
||||
}
|
||||
|
||||
.app-topbar-hotkey {
|
||||
color: var(--app-muted-color);
|
||||
font-size: 0.82em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-topbar-menu-list li.app-topbar-menu-heading {
|
||||
padding-top: calc(var(--app-spacing) * 0.5);
|
||||
padding-bottom: calc(var(--app-spacing) * 0.35);
|
||||
border-bottom: 0;
|
||||
color: var(--app-muted-color);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-topbar-menu-list.app-topbar-menu-list--right li {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.app-topbar-menu-list li.app-topbar-menu-divider {
|
||||
margin: calc(var(--app-spacing) * 0.25) 0;
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
height: 1px;
|
||||
background: var(--app-border);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.app-topbar-menu-list li.app-topbar-menu-divider + li.app-topbar-menu-heading {
|
||||
margin-top: calc(var(--app-spacing) * 0.15);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header.app-header {
|
||||
position: sticky;
|
||||
@@ -92,4 +269,14 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
|
||||
.app-header details.dropdown[open] > summary::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.app-topbar-tenant-chip {
|
||||
max-width: min(14rem, 55vw);
|
||||
}
|
||||
|
||||
.app-topbar-tenant-name {
|
||||
max-width: min(11rem, 45vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -134,6 +134,16 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.gridjs-message.gridjs-error .app-grid-error-actions {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.gridjs-message.gridjs-error .app-grid-retry {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.grid-avatar {
|
||||
--grid-avatar-width: 36px;
|
||||
--grid-avatar-height: 36px;
|
||||
@@ -243,9 +253,23 @@
|
||||
background: var(--app-table-row-stripped-background-color);
|
||||
}
|
||||
|
||||
tr.gridjs-tr[data-row-open-url]:focus td,
|
||||
tr.gridjs-tr[data-row-open-url]:focus-within td {
|
||||
background: var(--app-table-row-stripped-background-color);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--app-primary) 4%,
|
||||
var(--app-background-color)
|
||||
);
|
||||
}
|
||||
|
||||
tr.gridjs-tr[data-row-open-url]:focus-visible td {
|
||||
background: var(--app-table-row-stripped-background-color);
|
||||
box-shadow: inset 0 0 0 var(--app-outline-width) var(--app-primary-focus);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--app-primary) 6%,
|
||||
var(--app-background-color)
|
||||
);
|
||||
}
|
||||
|
||||
tr.gridjs-tr[data-row-open-url]:focus-visible {
|
||||
|
||||
@@ -57,6 +57,10 @@ export function showAsyncFlash(type, message, timeout) {
|
||||
const notice = document.createElement('div');
|
||||
notice.className = 'notice';
|
||||
notice.setAttribute('data-variant', type);
|
||||
const isAssertive = type === 'error' || type === 'warning';
|
||||
notice.setAttribute('role', isAssertive ? 'alert' : 'status');
|
||||
notice.setAttribute('aria-live', isAssertive ? 'assertive' : 'polite');
|
||||
notice.setAttribute('aria-atomic', 'true');
|
||||
|
||||
const messageSpan = document.createElement('span');
|
||||
messageSpan.textContent = message;
|
||||
|
||||
@@ -14,18 +14,24 @@ const setIcon = (button, contrast) => {
|
||||
icon.classList.add(contrast === 'high' ? 'bi-highlights' : 'bi-circle-half');
|
||||
};
|
||||
|
||||
const setPressedState = (button, contrast) => {
|
||||
button.setAttribute('aria-pressed', contrast === 'high' ? 'true' : 'false');
|
||||
};
|
||||
|
||||
const initContrastToggle = () => {
|
||||
const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' });
|
||||
if (!button) {return;}
|
||||
const root = document.documentElement;
|
||||
const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal');
|
||||
setIcon(button, getCurrent());
|
||||
const current = getCurrent();
|
||||
setIcon(button, current);
|
||||
setPressedState(button, current);
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
const current = getCurrent();
|
||||
const next = current === 'high' ? 'normal' : 'high';
|
||||
const next = getCurrent() === 'high' ? 'normal' : 'high';
|
||||
setContrast(next);
|
||||
setIcon(button, next);
|
||||
setPressedState(button, next);
|
||||
try {
|
||||
window.localStorage.setItem(STORAGE_KEY, next);
|
||||
} catch (e) {
|
||||
|
||||
@@ -4,14 +4,21 @@ const updateHistoryButtons = () => {
|
||||
if (!back && !forward) {return;}
|
||||
|
||||
const hasHistory = window.history.length > 1;
|
||||
const setDisabledState = (link, disabled) => {
|
||||
link.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
||||
link.classList.toggle('is-disabled', disabled);
|
||||
if (disabled) {
|
||||
link.setAttribute('tabindex', '-1');
|
||||
} else {
|
||||
link.removeAttribute('tabindex');
|
||||
}
|
||||
};
|
||||
|
||||
if (back) {
|
||||
back.setAttribute('aria-disabled', hasHistory ? 'false' : 'true');
|
||||
back.classList.toggle('is-disabled', !hasHistory);
|
||||
setDisabledState(back, !hasHistory);
|
||||
}
|
||||
if (forward) {
|
||||
forward.setAttribute('aria-disabled', hasHistory ? 'false' : 'true');
|
||||
forward.classList.toggle('is-disabled', !hasHistory);
|
||||
setDisabledState(forward, !hasHistory);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -44,8 +51,8 @@ const initHistoryButtons = () => {
|
||||
|
||||
if (back) {
|
||||
back.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
if (window.history.length > 1) {
|
||||
event.preventDefault();
|
||||
window.history.back();
|
||||
}
|
||||
});
|
||||
@@ -53,8 +60,8 @@ const initHistoryButtons = () => {
|
||||
|
||||
if (forward) {
|
||||
forward.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
if (window.history.length > 1) {
|
||||
event.preventDefault();
|
||||
window.history.forward();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
import { showAsyncFlash } from './app-async-flash.js';
|
||||
import { warnOnce } from '../core/app-dom.js';
|
||||
|
||||
const setPending = (link, pending) => {
|
||||
link.style.pointerEvents = pending ? 'none' : '';
|
||||
link.style.opacity = pending ? '0.5' : '';
|
||||
if (pending) {
|
||||
link.setAttribute('aria-busy', 'true');
|
||||
} else {
|
||||
link.removeAttribute('aria-busy');
|
||||
}
|
||||
};
|
||||
|
||||
const switchTenant = async (link) => {
|
||||
const tenantId = link.dataset.switchTenant;
|
||||
const csrfKey = link.dataset.csrfKey;
|
||||
@@ -12,8 +23,7 @@ const switchTenant = async (link) => {
|
||||
}
|
||||
|
||||
// Disable link during request
|
||||
link.style.pointerEvents = 'none';
|
||||
link.style.opacity = '0.5';
|
||||
setPending(link, true);
|
||||
|
||||
try {
|
||||
const body = new URLSearchParams({
|
||||
@@ -37,21 +47,18 @@ const switchTenant = async (link) => {
|
||||
window.location.reload();
|
||||
} else {
|
||||
warnOnce('FETCH_FAILED', 'Tenant switch failed', { module: 'tenant-switcher', error: data.error });
|
||||
alert(errorMessage);
|
||||
link.style.pointerEvents = '';
|
||||
link.style.opacity = '';
|
||||
showAsyncFlash('error', errorMessage);
|
||||
setPending(link, false);
|
||||
}
|
||||
} else {
|
||||
warnOnce('FETCH_FAILED', `Tenant switch server error: ${response.status}`, { module: 'tenant-switcher' });
|
||||
alert(errorMessage);
|
||||
link.style.pointerEvents = '';
|
||||
link.style.opacity = '';
|
||||
showAsyncFlash('error', errorMessage);
|
||||
setPending(link, false);
|
||||
}
|
||||
} catch (error) {
|
||||
warnOnce('FETCH_ERROR', 'Tenant switch network error', { module: 'tenant-switcher', error });
|
||||
alert(errorMessage);
|
||||
link.style.pointerEvents = '';
|
||||
link.style.opacity = '';
|
||||
showAsyncFlash('error', errorMessage);
|
||||
setPending(link, false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -52,6 +52,12 @@ const safeStorageSet = (key, value) => {
|
||||
}
|
||||
};
|
||||
|
||||
const escapeHtmlAttr = (value) => String(value ?? '')
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"');
|
||||
|
||||
export function createServerGrid(options) {
|
||||
const {
|
||||
container,
|
||||
@@ -187,6 +193,11 @@ export function createServerGrid(options) {
|
||||
|| language?.pagination?.rowsPerPage
|
||||
|| 'Rows per page'
|
||||
).trim() || 'Rows per page';
|
||||
const pageSizeCompactLabel = String(
|
||||
pageSizeConfig.compactLabel
|
||||
|| language?.pagination?.rowsPerPageShort
|
||||
|| 'Per page'
|
||||
).trim() || 'Per page';
|
||||
|
||||
let currentLimit = defaultLimit;
|
||||
const urlLimit = syncLimit ? parseAllowedLimit(params.get(limitParam)) : null;
|
||||
@@ -225,6 +236,12 @@ export function createServerGrid(options) {
|
||||
).trim() || 'Actions';
|
||||
const rowActionOpenLabel = String(language?.actions?.open || 'Open').trim() || 'Open';
|
||||
const rowActionEditLabel = String(language?.actions?.edit || 'Edit').trim() || 'Edit';
|
||||
const rowEnterHint = String(
|
||||
rowInteractionConfig.rowEnterHint
|
||||
|| language?.actions?.rowEnterHint
|
||||
|| 'Press Enter to open row'
|
||||
).trim() || 'Press Enter to open row';
|
||||
const gridRetryLabel = String(language?.errorRetry || 'Retry').trim() || 'Retry';
|
||||
const defaultResolveRowActionLabel = (url) => (
|
||||
/(^|\/)edit(\/|$|\?)/i.test(String(url || '').trim())
|
||||
? rowActionEditLabel
|
||||
@@ -419,7 +436,9 @@ export function createServerGrid(options) {
|
||||
onAction: typeof actions.onAction === 'function' ? actions.onAction : null
|
||||
} : null;
|
||||
const rowOpenActionConfig = !explicitActionConfig && showRowActionButton ? {
|
||||
label: rowActionColumnLabel,
|
||||
label: gridjsLib.html(
|
||||
`<span class="app-grid-actions-header" data-tooltip="${escapeHtmlAttr(rowEnterHint)}" data-tooltip-pos="top" aria-label="${escapeHtmlAttr(rowEnterHint)}">${escapeHtmlAttr(rowActionColumnLabel)}</span>`
|
||||
),
|
||||
index: null,
|
||||
items: [{
|
||||
key: 'row-open',
|
||||
@@ -430,6 +449,8 @@ export function createServerGrid(options) {
|
||||
const normalizedLabel = String(dynamicLabel || '').trim();
|
||||
return normalizedLabel || defaultResolveRowActionLabel(url);
|
||||
},
|
||||
ariaLabel: (_rowData, _url, label) => `${String(label || '').trim()}. ${rowEnterHint}`,
|
||||
title: (_rowData, _url) => rowEnterHint,
|
||||
href: ({ id }) => id
|
||||
}],
|
||||
// For row-open actions the URL itself is the stable row identifier.
|
||||
@@ -463,14 +484,22 @@ export function createServerGrid(options) {
|
||||
if (!item || !item.key) {return '';}
|
||||
const label = typeof item.label === 'function' ? item.label(row, id) : item.label;
|
||||
if (!label) {return '';}
|
||||
const ariaLabelRaw = typeof item.ariaLabel === 'function'
|
||||
? item.ariaLabel(row, id, label)
|
||||
: item.ariaLabel;
|
||||
const titleRaw = typeof item.title === 'function'
|
||||
? item.title(row, id, label)
|
||||
: item.title;
|
||||
const ariaAttr = ariaLabelRaw ? ` aria-label="${escapeHtmlAttr(ariaLabelRaw)}"` : '';
|
||||
const titleAttr = titleRaw ? ` title="${escapeHtmlAttr(titleRaw)}"` : '';
|
||||
const className = item.className ? ` ${item.className}` : '';
|
||||
const type = item.type || 'button';
|
||||
if (type === 'link') {
|
||||
const href = typeof item.href === 'function' ? item.href({ row, id }) : item.href;
|
||||
const url = href || '#';
|
||||
return `<a role="button" class="${className.trim()}" data-grid-action="${item.key}" href="${url}">${label}</a>`;
|
||||
return `<a role="button" class="${className.trim()}" data-grid-action="${item.key}" href="${url}"${ariaAttr}${titleAttr}>${label}</a>`;
|
||||
}
|
||||
return `<button type="button" class="${className.trim()}" data-grid-action="${item.key}">${label}</button>`;
|
||||
return `<button type="button" class="${className.trim()}" data-grid-action="${item.key}"${ariaAttr}${titleAttr}>${label}</button>`;
|
||||
}).join('');
|
||||
return gridjsLib.html(`<div class="${actionConfig.wrapperClass}" role="group">${buttons}</div>`);
|
||||
}
|
||||
@@ -636,6 +665,26 @@ export function createServerGrid(options) {
|
||||
};
|
||||
const setUpdating = () => containerEl.classList.add('gridjs-is-updating');
|
||||
const clearUpdating = () => containerEl.classList.remove('gridjs-is-updating');
|
||||
const ensureErrorRetryControl = () => {
|
||||
const errorMessage = containerEl.querySelector('.gridjs-message.gridjs-error');
|
||||
if (!errorMessage) {
|
||||
return;
|
||||
}
|
||||
if (errorMessage.querySelector('[data-grid-retry]')) {
|
||||
return;
|
||||
}
|
||||
const actionsWrap = document.createElement('div');
|
||||
actionsWrap.className = 'app-grid-error-actions';
|
||||
|
||||
const retryButton = document.createElement('button');
|
||||
retryButton.type = 'button';
|
||||
retryButton.className = 'outline secondary app-grid-retry';
|
||||
retryButton.setAttribute('data-grid-retry', '1');
|
||||
retryButton.textContent = gridRetryLabel;
|
||||
|
||||
actionsWrap.appendChild(retryButton);
|
||||
errorMessage.appendChild(actionsWrap);
|
||||
};
|
||||
|
||||
const store = grid?.config?.store;
|
||||
if (store?.subscribe) {
|
||||
@@ -647,6 +696,11 @@ export function createServerGrid(options) {
|
||||
} else {
|
||||
clearUpdating();
|
||||
}
|
||||
if (state.status === 4) {
|
||||
setTimeout(() => {
|
||||
ensureErrorRetryControl();
|
||||
}, 0);
|
||||
}
|
||||
if (state.status >= 2) {
|
||||
markLoadedOnce();
|
||||
}
|
||||
@@ -856,6 +910,16 @@ export function createServerGrid(options) {
|
||||
});
|
||||
}
|
||||
|
||||
containerEl.addEventListener('click', (event) => {
|
||||
const retryButton = event.target.closest('[data-grid-retry]');
|
||||
if (!retryButton) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
retryButton.setAttribute('aria-busy', 'true');
|
||||
updateGrid({ resetPage: false });
|
||||
});
|
||||
|
||||
let pageSizeSelect = null;
|
||||
const syncPageSizeControl = () => {
|
||||
if (!pageSizeSelect) {
|
||||
@@ -905,9 +969,11 @@ export function createServerGrid(options) {
|
||||
field.dataset.gridPageSizeKey = controlKey;
|
||||
|
||||
const caption = document.createElement('span');
|
||||
caption.textContent = pageSizeLabel;
|
||||
caption.textContent = pageSizeCompactLabel;
|
||||
|
||||
const select = document.createElement('select');
|
||||
select.setAttribute('aria-label', pageSizeLabel);
|
||||
select.setAttribute('title', pageSizeLabel);
|
||||
pageSizeOptions.forEach((option) => {
|
||||
const optionEl = document.createElement('option');
|
||||
optionEl.value = String(option);
|
||||
|
||||
Reference in New Issue
Block a user