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

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

@@ -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);
}
}
}

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

@@ -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 {

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');
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;

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');
};
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) {

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

@@ -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();
}
});

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';
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);
}
};

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

@@ -52,6 +52,12 @@ const safeStorageSet = (key, value) => {
}
};
const escapeHtmlAttr = (value) => String(value ?? '')
.replaceAll('&', '&')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;');
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);