fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

topbar anpassungen

Browse Source
This commit is contained in:
Felix Schneider
2026-03-05 12:51:53 +01:00
parent c5f657c8c8
commit b2dab5bd6c
14 changed files with 494 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/frontend-javascript.md
View File

@@ -102,6 +102,7 @@ Listen mit `rowDblClick.getUrl(...)` nutzen standardmäßig eine zugängliche Ro
- sichtbare Action-Spalte rechts (`Open`/`Edit`) - sichtbare Action-Spalte rechts (`Open`/`Edit`)
- Doppelklick bleibt als Fallback aktiv - Doppelklick bleibt als Fallback aktiv
- `Enter` auf fokussierter Zeile navigiert zur selben URL - `Enter` auf fokussierter Zeile navigiert zur selben URL
- Action-Header/Tooltip zeigt den Enter-Hinweis
Optionale Konfiguration über `createServerGrid(...)`: 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. - 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) ### Filter UX 2.0 (Globaler Standard)
Für Listen gilt standardmäßig: Für Listen gilt standardmäßig:

8
i18n/default_de.json
View File

@@ -199,6 +199,8 @@
"Modified": "Aktualisiert", "Modified": "Aktualisiert",
"No users found": "Keine Benutzer gefunden", "No users found": "Keine Benutzer gefunden",
"Open": "Öffnen", "Open": "Öffnen",
"Press Enter to open row": "Drücke Enter, um die Zeile zu öffnen",
"Retry": "Erneut versuchen",
"Yes": "Ja", "Yes": "Ja",
"No": "Nein", "No": "Nein",
"User created": "Benutzer erstellt", "User created": "Benutzer erstellt",
@@ -340,12 +342,18 @@
"New folder": "Neuer Ordner", "New folder": "Neuer Ordner",
"Toggle navigation": "Navigation umschalten", "Toggle navigation": "Navigation umschalten",
"Primary navigation": "Hauptnavigation", "Primary navigation": "Hauptnavigation",
"Language switcher": "Sprachauswahl",
"Sort column ascending": "Spalte aufsteigend sortieren", "Sort column ascending": "Spalte aufsteigend sortieren",
"Sort column descending": "Spalte absteigend sortieren", "Sort column descending": "Spalte absteigend sortieren",
"Previous": "Zurück", "Previous": "Zurück",
"Next": "Weiter", "Next": "Weiter",
"Navigation": "Navigation",
"Display": "Anzeige",
"Session": "Sitzung",
"Page %d of %d": "Seite %d von %d", "Page %d of %d": "Seite %d von %d",
"Page %d": "Seite %d", "Page %d": "Seite %d",
"Per page": "Pro Seite",
"Skip to main content": "Zum Hauptinhalt springen",
"Rows per page": "Einträge pro Seite", "Rows per page": "Einträge pro Seite",
"Showing": "Zeige", "Showing": "Zeige",
"of": "von", "of": "von",

8
i18n/default_en.json
View File

@@ -199,6 +199,8 @@
"Modified": "Modified", "Modified": "Modified",
"No users found": "No users found", "No users found": "No users found",
"Open": "Open", "Open": "Open",
"Press Enter to open row": "Press Enter to open row",
"Retry": "Retry",
"Yes": "Yes", "Yes": "Yes",
"No": "No", "No": "No",
"User created": "User created", "User created": "User created",
@@ -340,12 +342,18 @@
"New folder": "New folder", "New folder": "New folder",
"Toggle navigation": "Toggle navigation", "Toggle navigation": "Toggle navigation",
"Primary navigation": "Primary navigation", "Primary navigation": "Primary navigation",
"Language switcher": "Language switcher",
"Sort column ascending": "Sort column ascending", "Sort column ascending": "Sort column ascending",
"Sort column descending": "Sort column descending", "Sort column descending": "Sort column descending",
"Previous": "Previous", "Previous": "Previous",
"Next": "Next", "Next": "Next",
"Navigation": "Navigation",
"Display": "Display",
"Session": "Session",
"Page %d of %d": "Page %d of %d", "Page %d of %d": "Page %d of %d",
"Page %d": "Page %d", "Page %d": "Page %d",
"Per page": "Per page",
"Skip to main content": "Skip to main content",
"Rows per page": "Rows per page", "Rows per page": "Rows per page",
"Showing": "Showing", "Showing": "Showing",
"of": "of", "of": "of",

3
lib/Support/helpers/ui.php
View File

@@ -19,6 +19,7 @@ function gridLang(): array
'navigate' => t('Page %d of %d'), 'navigate' => t('Page %d of %d'),
'page' => t('Page %d'), 'page' => t('Page %d'),
'rowsPerPage' => t('Rows per page'), 'rowsPerPage' => t('Rows per page'),
'rowsPerPageShort' => t('Per page'),
'showing' => t('Showing'), 'showing' => t('Showing'),
'of' => t('of'), 'of' => t('of'),
'to' => t('to'), 'to' => t('to'),
@@ -28,7 +29,9 @@ function gridLang(): array
'column' => t('Actions'), 'column' => t('Actions'),
'open' => t('Open'), 'open' => t('Open'),
'edit' => t('Edit'), 'edit' => t('Edit'),
'rowEnterHint' => t('Press Enter to open row'),
], ],
'errorRetry' => t('Retry'),
'loading' => t('Loading...'), 'loading' => t('Loading...'),
'noRecordsFound' => t('No records found'), 'noRecordsFound' => t('No records found'),
'error' => t('An error happened while fetching the data'), 'error' => t('An error happened while fetching the data'),

3
templates/default.phtml
View File

@@ -36,13 +36,14 @@ if ($bufferTitle !== '') {
</head> </head>
<body> <body>
<a class="app-skip-link" href="#app-main-content"><?php e(t('Skip to main content')); ?></a>
<div class="app-container"> <div class="app-container">
<?php require __DIR__ . '/partials/app-main-aside-icon-bar.phtml'; ?> <?php require __DIR__ . '/partials/app-main-aside-icon-bar.phtml'; ?>
<?php require __DIR__ . '/partials/app-main-aside.phtml'; ?> <?php require __DIR__ . '/partials/app-main-aside.phtml'; ?>
<div class="app-main"> <div class="app-main">
<main> <main>
<?php require __DIR__ . '/partials/app-topbar.phtml'; ?> <?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 require __DIR__ . '/partials/app-flash.phtml'; ?>
<?php Buffer::get('html'); ?> <?php Buffer::get('html'); ?>
</div> </div>

20
templates/partials/app-language-switcher.phtml
View File

@@ -16,7 +16,7 @@ $publicTarget = ltrim($publicTarget, '/');
<?php if ($variant === 'dropdown'): ?> <?php if ($variant === 'dropdown'): ?>
<details class="dropdown"> <details class="dropdown">
<summary> <summary aria-label="<?php e(t('Language switcher')); ?>">
<i class="bi bi-translate"></i> <i class="bi bi-translate"></i>
</summary> </summary>
<ul dir="rtl"> <ul dir="rtl">
@@ -38,6 +38,24 @@ $publicTarget = ltrim($publicTarget, '/');
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
</details> </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 else: ?>
<?php if ($isLoggedIn): ?> <?php if ($isLoggedIn): ?>
<form class="nav nav--lang" method="get" action="<?php e($baseUrl); ?>" aria-label="Language switcher"> <form class="nav nav--lang" method="get" action="<?php e($baseUrl); ?>" aria-label="Language switcher">

170
templates/partials/app-topbar.phtml
View File

@@ -8,81 +8,63 @@ $userUuid = trim((string) ($user['uuid'] ?? ''));
$accountEditUrl = $userUuid !== '' ? lurl("admin/users/edit/{$userUuid}") : $accountUrl; $accountEditUrl = $userUuid !== '' ? lurl("admin/users/edit/{$userUuid}") : $accountUrl;
$themes = appThemes(); $themes = appThemes();
$theme = currentTheme(); $theme = currentTheme();
$themeIcon = str_starts_with($theme, 'dark') ? 'bi-moon-stars-fill' : 'bi-sun-fill';
$csrfKey = Session::$csrfSessionKey; $csrfKey = Session::$csrfSessionKey;
$csrfToken = $_SESSION[$csrfKey] ?? ''; $csrfToken = $_SESSION[$csrfKey] ?? '';
// Tenant switcher data // Tenant switcher data
$currentTenant = $_SESSION['current_tenant'] ?? null; $currentTenant = $_SESSION['current_tenant'] ?? null;
$currentTenantId = $currentTenant['id'] ?? null; $currentTenantId = (int) ($currentTenant['id'] ?? 0);
$availableTenants = $_SESSION['available_tenants'] ?? []; $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"> <header class="app-header">
<nav> <nav class="app-topbar">
<ul> <ul class="app-topbar-left">
<li> <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>
<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>
<li id="async-messages"></li> <li id="async-messages"></li>
</ul> </ul>
<ul class="nav-list"> <div class="app-topbar-center" aria-hidden="true"></div>
<li data-tooltip="<?php e(t("Toggle Sidebar"));?>" data-tooltip-pos="bottom"> <ul class="app-topbar-right">
<button id="toggle-aside" data-sidebar-toggle data-sidebar-action="visibility"><i class="bi bi-layout-sidebar-inset"></i></button> <li class="app-topbar-tenant-slot" data-tooltip="<?php e(t('Tenant')); ?>" data-tooltip-pos="bottom">
</li> <?php if ($canSwitchTenant): ?>
<li data-tooltip="<?php e(t("Toggle Detail Sidebar"));?>" data-tooltip-pos="bottom"> <details class="dropdown app-topbar-tenant-menu">
<button id="toggle-main-content-aside"><i class="bi bi-layout-sidebar-inset-reverse"></i></button> <summary class="app-topbar-tenant-chip" aria-label="<?php e(t('Switch tenant')); ?>" title="<?php e($tenantLabel); ?>">
</li> <span class="app-topbar-tenant-name"><?php e($tenantLabel); ?></span>
<?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>
</summary> </summary>
<ul dir="rtl"> <ul class="app-topbar-menu-list app-topbar-menu-list--right">
<?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">
<?php foreach ($availableTenants as $tenant): ?> <?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> <li>
<a href="#" <a href="#"
class="<?php echo $isActive ? 'active' : ''; ?>" class="<?php e($isActive ? 'active' : ''); ?>"
<?php if (!$isActive): ?> title="<?php e($rowLabel); ?>"
data-switch-tenant="<?php e($tenant['id'] ?? ''); ?>" <?php if ($isActive): ?>
data-csrf-key="<?php e($csrfKey); ?>" aria-current="true"
data-csrf-token="<?php e($csrfToken); ?>" <?php else: ?>
data-error-message="<?php e(t('Failed to switch tenant')); ?>" data-switch-tenant="<?php e((string) $tenantId); ?>"
<?php endif; ?>> data-csrf-key="<?php e($csrfKey); ?>"
<?php e($tenant['description'] ?? ''); ?> data-csrf-token="<?php e($csrfToken); ?>"
data-error-message="<?php e(t('Failed to switch tenant')); ?>"
<?php endif; ?>>
<?php e($rowLabel); ?>
<?php if ($isActive): ?> <?php if ($isActive): ?>
<i class="bi bi-check"></i> <i class="bi bi-check"></i>
<?php endif; ?> <?php endif; ?>
@@ -91,27 +73,79 @@ $availableTenants = $_SESSION['available_tenants'] ?? [];
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
</details> </details>
</li> <?php else: ?>
<?php endif; ?> <span class="app-topbar-tenant-chip" aria-label="<?php e(t('Tenant')); ?>" title="<?php e($tenantLabel); ?>">
<li> <span class="app-topbar-tenant-name"><?php e($tenantLabel); ?></span>
<?php </span>
$variant = 'dropdown'; <?php endif; ?>
require __DIR__ . '/app-language-switcher.phtml';
unset($variant);
?>
</li> </li>
<li> <li>
<details class="dropdown"> <details class="dropdown app-topbar-user-menu"
<summary><i class="bi bi-person-fill"></i></summary> <?php if ($allowUserTheme): ?>
<ul dir="rtl"> 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); ?>"> <li><a href="<?php e($accountEditUrl); ?>">
<?php e(t('Account')); ?> <?php e(t('My account')); ?>
</a> </a>
</li> </li>
<li><a href="<?php e(lurl('help/hotkeys')); ?>"> <li><a href="<?php e(lurl('help/hotkeys')); ?>">
<?php e(t('Keyboard shortcuts')); ?> <?php e(t('Keyboard shortcuts')); ?>
</a> </a>
</li> </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"> <li><a href="logout">
<?php e(t('Logout')); ?> <?php e(t('Logout')); ?>
</a> </a>

223
web/css/layout/app-topbar.css
View File

@@ -1,4 +1,24 @@
@layer layout { @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-header {
--app-topbar-item-padding: 5px; --app-topbar-item-padding: 5px;
--app-topbar-list-gap: 8px; --app-topbar-list-gap: 8px;
@@ -18,33 +38,41 @@ main:has(.app-details-container) .app-header {
margin-bottom: 0; margin-bottom: 0;
} }
.app-header nav { .app-header nav.app-topbar {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--app-spacing); gap: var(--app-spacing);
align-items: center;
} }
.app-header nav li { .app-header nav li {
padding: 0; padding: 0;
} }
.app-header form:has(input#app-search) { .app-topbar-left,
flex: 1; .app-topbar-right {
}
.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 {
display: flex; display: flex;
gap: var(--app-topbar-list-gap); gap: var(--app-topbar-list-gap);
align-items: center; align-items: center;
color: var(--app-muted-color); 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]) { .app-header details.dropdown > summary:not([role]) {
border: none; border: none;
height: auto; height: auto;
@@ -53,18 +81,20 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
background: transparent; background: transparent;
} }
.app-header details.dropdown > summary:not([role]):after { /* .app-header details.dropdown > summary:not([role]):after {
display: none; display: none;
} } */
.app-header nav > ul li a { .app-topbar-left > li > a,
.app-topbar-right > li > a {
padding: var(--app-topbar-item-padding); padding: var(--app-topbar-item-padding);
color: var(--app-topbar-muted); color: var(--app-topbar-muted);
display: block; display: block;
margin: 0; margin: 0;
} }
.app-header button { .app-topbar-left button,
.app-topbar-right button {
padding: var(--app-topbar-item-padding); padding: var(--app-topbar-item-padding);
color: var(--app-topbar-muted); color: var(--app-topbar-muted);
display: block; display: block;
@@ -80,6 +110,153 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
pointer-events: none; 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) { @media (min-width: 768px) {
header.app-header { header.app-header {
position: sticky; 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 { .app-header details.dropdown[open] > summary::before {
display: none; display: none;
} }
@media (max-width: 767px) {
.app-topbar-tenant-chip {
max-width: min(14rem, 55vw);
}
.app-topbar-tenant-name {
max-width: min(11rem, 45vw);
}
}
} }

26
web/css/vendor-overrides/gridjs.css
View File

@@ -134,6 +134,16 @@
opacity: 0.7; 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 {
--grid-avatar-width: 36px; --grid-avatar-width: 36px;
--grid-avatar-height: 36px; --grid-avatar-height: 36px;
@@ -243,9 +253,23 @@
background: var(--app-table-row-stripped-background-color); 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 { tr.gridjs-tr[data-row-open-url]:focus-visible td {
background: var(--app-table-row-stripped-background-color); 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 { tr.gridjs-tr[data-row-open-url]:focus-visible {

4
web/js/components/app-async-flash.js
View File

@@ -57,6 +57,10 @@ export function showAsyncFlash(type, message, timeout) {
const notice = document.createElement('div'); const notice = document.createElement('div');
notice.className = 'notice'; notice.className = 'notice';
notice.setAttribute('data-variant', type); 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'); const messageSpan = document.createElement('span');
messageSpan.textContent = message; messageSpan.textContent = message;

12
web/js/components/app-contrast-toggle.js
View File

@@ -14,18 +14,24 @@ const setIcon = (button, contrast) => {
icon.classList.add(contrast === 'high' ? 'bi-highlights' : 'bi-circle-half'); 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 initContrastToggle = () => {
const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' }); const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' });
if (!button) {return;} if (!button) {return;}
const root = document.documentElement; const root = document.documentElement;
const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal'); const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal');
setIcon(button, getCurrent()); const current = getCurrent();
setIcon(button, current);
setPressedState(button, current);
button.addEventListener('click', () => { button.addEventListener('click', () => {
const current = getCurrent(); const next = getCurrent() === 'high' ? 'normal' : 'high';
const next = current === 'high' ? 'normal' : 'high';
setContrast(next); setContrast(next);
setIcon(button, next); setIcon(button, next);
setPressedState(button, next);
try { try {
window.localStorage.setItem(STORAGE_KEY, next); window.localStorage.setItem(STORAGE_KEY, next);
} catch (e) { } catch (e) {

19
web/js/components/app-nav-history.js
View File

@@ -4,14 +4,21 @@ const updateHistoryButtons = () => {
if (!back && !forward) {return;} if (!back && !forward) {return;}
const hasHistory = window.history.length > 1; 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) { if (back) {
back.setAttribute('aria-disabled', hasHistory ? 'false' : 'true'); setDisabledState(back, !hasHistory);
back.classList.toggle('is-disabled', !hasHistory);
} }
if (forward) { if (forward) {
forward.setAttribute('aria-disabled', hasHistory ? 'false' : 'true'); setDisabledState(forward, !hasHistory);
forward.classList.toggle('is-disabled', !hasHistory);
} }
}; };
@@ -44,8 +51,8 @@ const initHistoryButtons = () => {
if (back) { if (back) {
back.addEventListener('click', (event) => { back.addEventListener('click', (event) => {
event.preventDefault();
if (window.history.length > 1) { if (window.history.length > 1) {
event.preventDefault();
window.history.back(); window.history.back();
} }
}); });
@@ -53,8 +60,8 @@ const initHistoryButtons = () => {
if (forward) { if (forward) {
forward.addEventListener('click', (event) => { forward.addEventListener('click', (event) => {
event.preventDefault();
if (window.history.length > 1) { if (window.history.length > 1) {
event.preventDefault();
window.history.forward(); window.history.forward();
} }
}); });

29
web/js/components/app-tenant-switcher.js
View File

@@ -1,5 +1,16 @@
import { showAsyncFlash } from './app-async-flash.js';
import { warnOnce } from '../core/app-dom.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 switchTenant = async (link) => {
const tenantId = link.dataset.switchTenant; const tenantId = link.dataset.switchTenant;
const csrfKey = link.dataset.csrfKey; const csrfKey = link.dataset.csrfKey;
@@ -12,8 +23,7 @@ const switchTenant = async (link) => {
} }
// Disable link during request // Disable link during request
link.style.pointerEvents = 'none'; setPending(link, true);
link.style.opacity = '0.5';
try { try {
const body = new URLSearchParams({ const body = new URLSearchParams({
@@ -37,21 +47,18 @@ const switchTenant = async (link) => {
window.location.reload(); window.location.reload();
} else { } else {
warnOnce('FETCH_FAILED', 'Tenant switch failed', { module: 'tenant-switcher', error: data.error }); warnOnce('FETCH_FAILED', 'Tenant switch failed', { module: 'tenant-switcher', error: data.error });
alert(errorMessage); showAsyncFlash('error', errorMessage);
link.style.pointerEvents = ''; setPending(link, false);
link.style.opacity = '';
} }
} else { } else {
warnOnce('FETCH_FAILED', `Tenant switch server error: ${response.status}`, { module: 'tenant-switcher' }); warnOnce('FETCH_FAILED', `Tenant switch server error: ${response.status}`, { module: 'tenant-switcher' });
alert(errorMessage); showAsyncFlash('error', errorMessage);
link.style.pointerEvents = ''; setPending(link, false);
link.style.opacity = '';
} }
} catch (error) { } catch (error) {
warnOnce('FETCH_ERROR', 'Tenant switch network error', { module: 'tenant-switcher', error }); warnOnce('FETCH_ERROR', 'Tenant switch network error', { module: 'tenant-switcher', error });
alert(errorMessage); showAsyncFlash('error', errorMessage);
link.style.pointerEvents = ''; setPending(link, false);
link.style.opacity = '';
} }
}; };

74
web/js/core/app-grid-factory.js
View File

@@ -52,6 +52,12 @@ const safeStorageSet = (key, value) => {
} }
}; };
const escapeHtmlAttr = (value) => String(value ?? '')
.replaceAll('&', '&amp;')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;');
export function createServerGrid(options) { export function createServerGrid(options) {
const { const {
container, container,
@@ -187,6 +193,11 @@ export function createServerGrid(options) {
|| language?.pagination?.rowsPerPage || language?.pagination?.rowsPerPage
|| 'Rows per page' || 'Rows per page'
).trim() || 'Rows per page'; ).trim() || 'Rows per page';
const pageSizeCompactLabel = String(
pageSizeConfig.compactLabel
|| language?.pagination?.rowsPerPageShort
|| 'Per page'
).trim() || 'Per page';
let currentLimit = defaultLimit; let currentLimit = defaultLimit;
const urlLimit = syncLimit ? parseAllowedLimit(params.get(limitParam)) : null; const urlLimit = syncLimit ? parseAllowedLimit(params.get(limitParam)) : null;
@@ -225,6 +236,12 @@ export function createServerGrid(options) {
).trim() || 'Actions'; ).trim() || 'Actions';
const rowActionOpenLabel = String(language?.actions?.open || 'Open').trim() || 'Open'; const rowActionOpenLabel = String(language?.actions?.open || 'Open').trim() || 'Open';
const rowActionEditLabel = String(language?.actions?.edit || 'Edit').trim() || 'Edit'; 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) => ( const defaultResolveRowActionLabel = (url) => (
/(^|\/)edit(\/|$|\?)/i.test(String(url || '').trim()) /(^|\/)edit(\/|$|\?)/i.test(String(url || '').trim())
? rowActionEditLabel ? rowActionEditLabel
@@ -419,7 +436,9 @@ export function createServerGrid(options) {
onAction: typeof actions.onAction === 'function' ? actions.onAction : null onAction: typeof actions.onAction === 'function' ? actions.onAction : null
} : null; } : null;
const rowOpenActionConfig = !explicitActionConfig && showRowActionButton ? { 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, index: null,
items: [{ items: [{
key: 'row-open', key: 'row-open',
@@ -430,6 +449,8 @@ export function createServerGrid(options) {
const normalizedLabel = String(dynamicLabel || '').trim(); const normalizedLabel = String(dynamicLabel || '').trim();
return normalizedLabel || defaultResolveRowActionLabel(url); return normalizedLabel || defaultResolveRowActionLabel(url);
}, },
ariaLabel: (_rowData, _url, label) => `${String(label || '').trim()}. ${rowEnterHint}`,
title: (_rowData, _url) => rowEnterHint,
href: ({ id }) => id href: ({ id }) => id
}], }],
// For row-open actions the URL itself is the stable row identifier. // 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 '';} if (!item || !item.key) {return '';}
const label = typeof item.label === 'function' ? item.label(row, id) : item.label; const label = typeof item.label === 'function' ? item.label(row, id) : item.label;
if (!label) {return '';} 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 className = item.className ? ` ${item.className}` : '';
const type = item.type || 'button'; const type = item.type || 'button';
if (type === 'link') { if (type === 'link') {
const href = typeof item.href === 'function' ? item.href({ row, id }) : item.href; const href = typeof item.href === 'function' ? item.href({ row, id }) : item.href;
const url = 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(''); }).join('');
return gridjsLib.html(`<div class="${actionConfig.wrapperClass}" role="group">${buttons}</div>`); 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 setUpdating = () => containerEl.classList.add('gridjs-is-updating');
const clearUpdating = () => containerEl.classList.remove('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; const store = grid?.config?.store;
if (store?.subscribe) { if (store?.subscribe) {
@@ -647,6 +696,11 @@ export function createServerGrid(options) {
} else { } else {
clearUpdating(); clearUpdating();
} }
if (state.status === 4) {
setTimeout(() => {
ensureErrorRetryControl();
}, 0);
}
if (state.status >= 2) { if (state.status >= 2) {
markLoadedOnce(); 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; let pageSizeSelect = null;
const syncPageSizeControl = () => { const syncPageSizeControl = () => {
if (!pageSizeSelect) { if (!pageSizeSelect) {
@@ -905,9 +969,11 @@ export function createServerGrid(options) {
field.dataset.gridPageSizeKey = controlKey; field.dataset.gridPageSizeKey = controlKey;
const caption = document.createElement('span'); const caption = document.createElement('span');
caption.textContent = pageSizeLabel; caption.textContent = pageSizeCompactLabel;
const select = document.createElement('select'); const select = document.createElement('select');
select.setAttribute('aria-label', pageSizeLabel);
select.setAttribute('title', pageSizeLabel);
pageSizeOptions.forEach((option) => { pageSizeOptions.forEach((option) => {
const optionEl = document.createElement('option'); const optionEl = document.createElement('option');
optionEl.value = String(option); optionEl.value = String(option);