Replace the single tenant avatar with a pair of theme-scoped brand logos.
Render only the theme-matching <img> server-side and swap src on theme
toggle via a JS hook — no reload, no double request, no CSS tricks.
Tenant logos
- TenantLogoService (ImageUploadTrait) with theme whitelist and per-theme
storage storage/tenants/{uuid}/logo/{light|dark}/, SIZES 128/256/512
- Public serving endpoint auth/tenant-logo-file so login can show the
logo pre-auth; matching authenticated admin preview endpoint
- appTenantLogoUrl(?size, ?theme) with 4-step fallback cascade; PDF +
mail always request 'light'
- Admin tenant edit: avatar block replaced by "Tenant logos" details
block inside the Master-data tab, two side-by-side slots via Pico
.grid with the core app-file-upload partial
- Policy rename ABILITY_ADMIN_TENANTS_AVATAR_VIEW -> LOGO_VIEW, action
routes logo / logo-delete / logo-file with theme body/query param
- API endpoint path kept (backward compat), internals on new service
- CLI tenant:logo-migrate-avatars moves legacy avatar/ -> logo/light/
idempotently (--dry-run, --yes, --cleanup)
- i18n "Tenant image" removed, 12 new keys synced across de/en
File upload component
- Full-width preview + filename/actions below (3D stack layout)
- Fixed 16:9 aspect ratio with 1rem inner padding for consistent
preview size across any logo aspect
- Transparency checker pattern as background so black logos stay
visible on dark mode and white logos on light mode
- form="" + deleteFormId support so the partial works with barrier
forms inside another form
Buttons
- width:100% dropped from button[type="submit"]; scoped back via
.login-main for the auth-flow primary CTA
- .outline base rule now tints background via color-mix of --app-color
so secondary/primary/danger outlines all gain a subtle surface
- .outline.secondary restyled Stripe-style in both themes: solid white
chip with soft shadow in light, solid elevated dark chip with white
text in dark; neutral border replaces role-colored border
- .app-action-success/.app-action-danger outlines get color-mix bg +
theme-aware outline-text tokens for stronger contrast
- Filled .primary/.app-action-success/.app-action-danger get raised
box-shadow (inset highlight + drop) — opt-in via class so chrome
buttons stay flat
- Dropped the legacy .secondary utility that was clobbering the
custom-property cascade with a hardcoded muted color
Theme swap
- Logo img carries data-src-light + data-src-dark; theme-toggle JS
swaps src when data-theme changes, keeping the topbar/login logo in
sync without a page reload
Quality gates: PHPUnit (2045), PHPStan L5, CS-Fixer, docs link/drift,
codex skills sync — all green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
209 lines
9.6 KiB
PHTML
209 lines
9.6 KiB
PHTML
<?php
|
|
|
|
use MintyPHP\Session;
|
|
|
|
$user = $_SESSION['user'] ?? [];
|
|
$accountUrl = accountUrl();
|
|
$userUuid = trim((string) ($user['uuid'] ?? ''));
|
|
$accountEditUrl = $userUuid !== '' ? lurl("admin/users/edit/{$userUuid}") : $accountUrl;
|
|
$themes = appThemes();
|
|
$theme = currentTheme();
|
|
$csrfKey = Session::$csrfSessionKey;
|
|
$csrfToken = $_SESSION[$csrfKey] ?? '';
|
|
|
|
// Tenant branding data (from $layoutNav, same source as app-main-aside.phtml)
|
|
$layoutNav = is_array($layoutNav ?? null) ? $layoutNav : [];
|
|
$tenantLogo = is_array($layoutNav['tenantLogo'] ?? null) ? $layoutNav['tenantLogo'] : [];
|
|
$brandTenantName = trim((string) ($tenantLogo['name'] ?? ''));
|
|
$brandHasTenantLogo = !empty($tenantLogo['hasLogoLight']) || !empty($tenantLogo['hasLogoDark']);
|
|
$brandTenantLogoUrl = $brandHasTenantLogo ? appTenantLogoUrl(256, $theme) : '';
|
|
$brandTenantLogoLight = $brandHasTenantLogo ? appTenantLogoUrl(256, 'light') : '';
|
|
$brandTenantLogoDark = $brandHasTenantLogo ? appTenantLogoUrl(256, 'dark') : '';
|
|
|
|
// Tenant switcher data
|
|
$currentTenant = $_SESSION['current_tenant'] ?? 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();
|
|
$layoutAuth = is_array($viewAuth['layout'] ?? null) ? $viewAuth['layout'] : [];
|
|
$layoutNav = is_array($layoutNav ?? null) ? $layoutNav : [];
|
|
$moduleSlots = is_array($layoutNav['moduleSlots'] ?? null) ? $layoutNav['moduleSlots'] : [];
|
|
$moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $moduleSlots['topbar.right_item'] : [];
|
|
|
|
?>
|
|
<header class="app-header">
|
|
<nav class="app-topbar">
|
|
<div class="app-topbar-left">
|
|
<button type="button" class="app-topbar-hamburger" data-sidebar-toggle
|
|
aria-expanded="false"
|
|
aria-label="<?php e(t('Open navigation')); ?>"
|
|
data-open-label="<?php e(t('Open navigation')); ?>"
|
|
data-close-label="<?php e(t('Close navigation')); ?>">
|
|
<i class="bi bi-list" aria-hidden="true"></i>
|
|
</button>
|
|
<a href="<?php e(lurl('')); ?>" class="app-topbar-brand">
|
|
<?php if ($brandTenantLogoUrl !== ''): ?>
|
|
<img class="app-tenant-logo" src="<?php e($brandTenantLogoUrl); ?>"
|
|
data-theme-src
|
|
data-src-light="<?php e($brandTenantLogoLight); ?>"
|
|
data-src-dark="<?php e($brandTenantLogoDark); ?>"
|
|
alt="<?php e($brandTenantName); ?>">
|
|
<?php elseif ($brandTenantName !== ''): ?>
|
|
<span class="app-topbar-brand-name"><?php e($brandTenantName); ?></span>
|
|
<?php else: ?>
|
|
<span class="app-topbar-brand-name"><?php e(appTitle()); ?></span>
|
|
<?php endif; ?>
|
|
</a>
|
|
<?php
|
|
if (is_array($breadcrumbs ?? null) && $breadcrumbs !== []) {
|
|
require __DIR__ . '/app-breadcrumb.phtml';
|
|
}
|
|
?>
|
|
<span id="async-messages" role="status" aria-live="polite" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="app-topbar-center">
|
|
<button type="button" class="app-topbar-search-trigger" data-app-search-trigger aria-label="<?php e(t('Search')); ?>" title="<?php e(t('Search')); ?>">
|
|
<i class="bi bi-search" aria-hidden="true"></i>
|
|
<span class="app-topbar-search-trigger-text"><?php e(t('Search...')); ?></span>
|
|
<kbd class="app-topbar-search-trigger-shortcut" data-search-trigger-shortcut aria-hidden="true"></kbd>
|
|
</button>
|
|
</div>
|
|
<ul class="app-topbar-right">
|
|
<?php foreach ($moduleTopbarSlots as $slot): ?>
|
|
<?php
|
|
if (!is_array($slot)) {
|
|
continue;
|
|
}
|
|
$slotPermission = trim((string) ($slot['permission'] ?? ''));
|
|
if ($slotPermission !== '' && empty($layoutAuth[$slotPermission])) {
|
|
continue;
|
|
}
|
|
$slotTemplate = trim((string) ($slot['template'] ?? ''));
|
|
if ($slotTemplate === '' || !is_file($slotTemplate)) {
|
|
continue;
|
|
}
|
|
include $slotTemplate;
|
|
?>
|
|
<?php endforeach; ?>
|
|
<?php if ($canSwitchTenant): ?>
|
|
<li data-app-component="tenant-switcher" data-tenant-switcher data-switch-tenant-url="<?php e(lurl('admin/users/switch-tenant')); ?>" data-tooltip="<?php e(t('Tenant')); ?>" data-tooltip-pos="bottom">
|
|
<details class="dropdown app-topbar-tenant-menu" data-summary-chevron="none">
|
|
<summary aria-label="<?php e(t('Switch tenant')); ?>" title="<?php e($tenantLabel); ?>">
|
|
<i class="bi bi-building" aria-hidden="true"></i>
|
|
</summary>
|
|
<ul class="app-topbar-menu-list app-topbar-menu-list--right">
|
|
<?php foreach ($availableTenants as $tenant): ?>
|
|
<?php
|
|
$tenantId = (int) ($tenant['id'] ?? 0);
|
|
$isActive = $tenantId === $currentTenantId;
|
|
$rowLabel = trim((string) ($tenant['description'] ?? ''));
|
|
if ($rowLabel === '') {
|
|
$rowLabel = t('None');
|
|
}
|
|
?>
|
|
<li>
|
|
<a href="#"
|
|
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; ?>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
<?php endif; ?>
|
|
<li>
|
|
<details class="dropdown app-topbar-user-menu" data-summary-chevron="none" data-app-component="theme-controls"
|
|
<?php if ($allowUserTheme): ?>
|
|
data-theme-menu
|
|
data-theme-url="<?php e(lurl('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"></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" data-app-component="details-aside-toggle" 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"' : ''; // raw-html-ok: hardcoded ARIA attribute ?>>
|
|
<?php e(t($label)); ?>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
<li>
|
|
<button type="button" data-app-component="contrast-toggle" 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('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>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|