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

feat(tenant): per-theme logos + file-upload + button UI polish

Browse Source 
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>
This commit is contained in:
Felix Schneider
2026-04-24 20:25:53 +02:00
parent dbeac6b095
commit 6e3fc63c1d
43 changed files with 1009 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/css/base/variables.base.css
View File

@@ -120,6 +120,26 @@
--app-text-selection-color: rgba(2, 154, 232, 0.25);
--app-muted-color: #646b79;
--app-muted-border-color: rgb(231, 234, 239.5);
--app-preview-checker-bg: #ffffff;
--app-preview-checker-fg: #eef0f3;
--app-button-filled-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 2px rgba(0, 0, 0, 0.12);
--app-button-filled-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 4px rgba(0, 0, 0, 0.18);
--app-button-neutral-bg: #ffffff;
--app-button-neutral-bg-hover: #f6f8fa;
--app-button-neutral-border: #e3e6eb;
--app-button-neutral-border-hover: #c5c9d1;
--app-button-neutral-color: #1a1f2a;
--app-button-neutral-color-hover: #0b0f18;
--app-button-neutral-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(17, 24, 39, 0.08);
--app-button-neutral-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 2px 4px rgba(17, 24, 39, 0.12);
--app-primary-h-light: 180.75;
--app-primary-s-light: 37.38%;
--app-primary-l-light: 58.04%;
@@ -293,6 +313,7 @@
--app-action-success-hover-border: #176238;
--app-action-success-focus-color: rgba(31, 122, 69, 0.45);
--app-action-success-outline-background: rgba(31, 122, 69, 0.14);
--app-action-success-outline-color: #155a32;
--app-action-danger-background: #b33636;
--app-action-danger-border: #b33636;
--app-action-danger-color: #fff;
@@ -300,6 +321,7 @@
--app-action-danger-hover-border: #952d2d;
--app-action-danger-focus-color: rgba(179, 54, 54, 0.45);
--app-action-danger-outline-background: rgba(179, 54, 54, 0.14);
--app-action-danger-outline-color: #8f2727;
--app-switch-background-color: #bfc7d9;
--app-switch-checked-background-color: var(--app-primary-background);
--app-switch-color: #fff;
@@ -610,6 +632,26 @@
--app-text-selection-color: rgba(1, 170, 255, 0.1875);
--app-muted-color: #6e6e6c;
--app-muted-border-color: #2f2f2d;
--app-preview-checker-bg: #2a2a28;
--app-preview-checker-fg: #363634;
--app-button-neutral-bg: #30343b;
--app-button-neutral-bg-hover: #3b4048;
--app-button-neutral-border: #464b54;
--app-button-neutral-border-hover: #5b616c;
--app-button-neutral-color: #d5d9e0;
--app-button-neutral-color-hover: #ffffff;
--app-button-neutral-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.3);
--app-button-neutral-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 2px 5px rgba(0, 0, 0, 0.35);
--app-button-filled-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 1px 2px rgba(0, 0, 0, 0.4);
--app-button-filled-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 2px 5px rgba(0, 0, 0, 0.5);
--app-primary-h-dark: var(--app-primary-h-light, var(--app-primary-h-base));
--app-primary-s-dark: var(--app-primary-s-light, var(--app-primary-s-base));
--app-primary-l-dark: var(--app-primary-l-light, var(--app-primary-l-base));
@@ -792,6 +834,7 @@
--app-action-success-hover-border: #176238;
--app-action-success-focus-color: rgba(31, 122, 69, 0.5);
--app-action-success-outline-background: rgba(31, 122, 69, 0.2);
--app-action-success-outline-color: #4cc37a;
--app-action-danger-background: #b33636;
--app-action-danger-border: #b33636;
--app-action-danger-color: #fff;
@@ -799,6 +842,7 @@
--app-action-danger-hover-border: #952d2d;
--app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
--app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
--app-action-danger-outline-color: #e06666;
--app-switch-background-color: #3a3a38;
--app-switch-checked-background-color: var(--app-primary-background);
--app-switch-color: #fff;

41
web/css/components/app-buttons.css
View File

@@ -1,4 +1,29 @@
@layer components {
/* Subtle 3D lift (inset top highlight + drop shadow) on filled
action-intent buttons only — explicit opt-in via class so chrome
buttons (topbar icons, aside icon bar, menu toggles) stay flat. */
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):is(
.primary,
.app-action-success,
.app-action-danger,
.danger
):not(.outline):not(.contrast) {
box-shadow: var(--app-button-filled-shadow);
}
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):is(
.primary,
.app-action-success,
.app-action-danger,
.danger
):not(.outline):not(.contrast):is(
[aria-current]:not([aria-current="false"]),
:hover,
:active
) {
box-shadow: var(--app-button-filled-shadow-hover);
}
/* Action button variants — success and danger colors with outline and focus states. */
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]) {
--app-background-color: var(--app-action-success-background);
@@ -18,9 +43,9 @@
}
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]).outline {
--app-background-color: transparent;
--app-background-color: color-mix(in srgb, var(--app-action-success-border) 10%, transparent);
--app-border-color: var(--app-action-success-border);
--app-color: var(--app-action-success-border);
--app-color: var(--app-action-success-outline-color);
}
.app-action-success:is(
@@ -34,9 +59,9 @@
:active,
:focus
) {
--app-background-color: var(--app-action-success-outline-background);
--app-background-color: color-mix(in srgb, var(--app-action-success-border) 22%, transparent);
--app-border-color: var(--app-action-success-border);
--app-color: var(--app-action-success-border);
--app-color: var(--app-action-success-outline-color);
}
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):focus {
@@ -71,9 +96,9 @@
.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline,
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
--app-background-color: transparent;
--app-background-color: color-mix(in srgb, var(--app-action-danger-border) 10%, transparent);
--app-border-color: var(--app-action-danger-border);
--app-color: var(--app-action-danger-border);
--app-color: var(--app-action-danger-outline-color);
}
.danger:is(
@@ -98,9 +123,9 @@
:active,
:focus
) {
--app-background-color: var(--app-action-danger-outline-background);
--app-background-color: color-mix(in srgb, var(--app-action-danger-border) 22%, transparent);
--app-border-color: var(--app-action-danger-border);
--app-color: var(--app-action-danger-border);
--app-color: var(--app-action-danger-outline-color);
}
.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus,

83
web/css/components/app-file-upload.css
View File

@@ -15,41 +15,56 @@
background: color-mix(in srgb, var(--app-primary) 5%, var(--app-card-background-color));
}
/* ── Current file (server-side, shown when data-current-src is set) ── */
/* ── Current file (server-side, shown when data-current-src is set) ──
Full-width preview on top, filename + actions row below. */
.app-file-upload-current {
display: flex;
align-items: center;
gap: calc(var(--app-spacing) * 0.75);
flex-direction: column;
gap: calc(var(--app-spacing) * 0.5);
padding: calc(var(--app-spacing) * 0.75);
}
.app-file-upload-current-image {
width: 48px;
height: 48px;
width: 100%;
aspect-ratio: 16 / 9;
padding: var(--app-spacing);
border-radius: calc(var(--app-border-radius) * 0.5);
object-fit: cover;
flex-shrink: 0;
object-fit: contain;
object-position: center;
border: 1px solid var(--app-muted-border-color);
background: var(--app-background-color);
background-color: var(--app-preview-checker-bg);
background-image:
linear-gradient(45deg, var(--app-preview-checker-fg) 25%, transparent 25%),
linear-gradient(-45deg, var(--app-preview-checker-fg) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--app-preview-checker-fg) 75%),
linear-gradient(-45deg, transparent 75%, var(--app-preview-checker-fg) 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
box-sizing: border-box;
}
.app-file-upload-current-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
justify-content: space-between;
gap: calc(var(--app-spacing) * 0.5);
min-width: 0;
}
.app-file-upload-current-label {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--app-contrast);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-file-upload-current-actions {
display: flex;
gap: calc(var(--app-spacing) * 0.25);
flex-shrink: 0;
}
.app-file-upload-current-actions button {
@@ -153,11 +168,12 @@
80% { transform: translateX(2px); }
}
/* ── Pending file preview (visible when new file selected) ── */
/* ── Pending file preview (visible when new file selected) ──
Same layout as current: full-width thumb + info row below. */
.app-file-upload-preview {
display: none;
align-items: center;
gap: calc(var(--app-spacing) * 0.75);
flex-direction: column;
gap: calc(var(--app-spacing) * 0.5);
padding: calc(var(--app-spacing) * 0.75);
}
@@ -166,49 +182,60 @@
}
.app-file-upload-thumbnail {
width: 48px;
height: 48px;
width: 100%;
aspect-ratio: 16 / 9;
padding: var(--app-spacing);
border-radius: calc(var(--app-border-radius) * 0.5);
object-fit: cover;
flex-shrink: 0;
object-fit: contain;
object-position: center;
border: 1px solid var(--app-muted-border-color);
background: var(--app-background-color);
background-color: var(--app-preview-checker-bg);
background-image:
linear-gradient(45deg, var(--app-preview-checker-fg) 25%, transparent 25%),
linear-gradient(-45deg, var(--app-preview-checker-fg) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--app-preview-checker-fg) 75%),
linear-gradient(-45deg, transparent 75%, var(--app-preview-checker-fg) 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
box-sizing: border-box;
}
.app-file-upload-file-icon {
width: 48px;
height: 48px;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: calc(var(--app-border-radius) * 0.5);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-xl);
font-size: var(--text-3xl);
color: var(--app-muted-color);
background: var(--app-background-color);
border: 1px solid var(--app-muted-border-color);
}
.app-file-upload-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
justify-content: space-between;
gap: calc(var(--app-spacing) * 0.5);
min-width: 0;
}
.app-file-upload-filename {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--app-contrast);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.app-file-upload-filesize {
font-size: var(--text-xs);
color: var(--app-muted-color);
flex-shrink: 0;
}
.app-file-upload-clear {

49
web/css/components/app-tenant-logo.css Normal file
View File

@@ -0,0 +1,49 @@
@layer components {
/* Topbar + login-hero logo. The server renders the theme-matching src
via appTenantLogoUrl($theme) / appAuthLogoUrl() — no CSS swap needed. */
.app-tenant-logo {
max-width: 160px;
height: 32px;
width: auto;
object-fit: contain;
}
.login-logo .app-tenant-logo {
max-width: 320px;
height: auto;
max-height: 96px;
}
.app-topbar-brand .app-tenant-logo {
max-height: calc(var(--app-topbar-height) - 1rem);
}
/* Tenant-edit "Tenant logos" slots — two Pico .grid columns. */
.tenant-logo-slot {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.tenant-logo-slot-label {
font-size: var(--text-sm);
color: var(--app-muted-color);
margin: 0;
}
.tenant-logo-actions {
display: flex;
justify-content: flex-end;
}
.tenant-logo-actions button {
margin: 0;
}
.tenant-logo-readonly-preview {
max-width: 100%;
max-height: 120px;
object-fit: contain;
}
}

50
web/css/layout/app-shell.css
View File

@@ -975,7 +975,7 @@
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
[type="reset"].outline {
--app-background-color: transparent;
--app-background-color: color-mix(in srgb, var(--app-color) 8%, transparent);
--app-color: var(--app-primary);
--app-border-color: var(--app-primary);
}
@@ -992,7 +992,7 @@
:active,
:focus
) {
--app-background-color: transparent;
--app-background-color: color-mix(in srgb, var(--app-color) 18%, transparent);
--app-color: var(--app-primary-hover);
--app-border-color: var(--app-primary-hover);
}
@@ -1029,6 +1029,37 @@
--app-border-color: var(--app-secondary-hover);
}
/* Stripe-style neutral chip — solid elevated surface, high-contrast text,
subtle neutral border, medium font-weight. Theme-aware via tokens:
in light mode a white chip with soft shadow, in dark mode a lifted
dark-gray chip with white text. */
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
[type="reset"].outline {
--app-background-color: var(--app-button-neutral-bg);
--app-color: var(--app-button-neutral-color);
--app-border-color: var(--app-button-neutral-border);
box-shadow: var(--app-button-neutral-shadow);
font-weight: var(--font-medium);
}
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is(
[aria-current]:not([aria-current="false"]),
:hover,
:active,
:focus
),
[type="reset"].outline:is(
[aria-current]:not([aria-current="false"]),
:hover,
:active,
:focus
) {
--app-background-color: var(--app-button-neutral-bg-hover);
--app-color: var(--app-button-neutral-color-hover);
--app-border-color: var(--app-button-neutral-border-hover);
box-shadow: var(--app-button-neutral-shadow-hover);
}
:is(
button,
[type="submit"],
@@ -1371,7 +1402,6 @@
content: " *";
}
button[type="submit"],
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
@@ -2982,20 +3012,6 @@
text-align: center;
}
.primary {
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
}
.secondary {
border: 1px solid var(--app-border);
color: var(--app-muted-color);
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
}
.secondary:hover {
border: 1px solid var(--app-contrast);
color: var(--app-contrast);
}
/* Loading state - global cursor and interaction blocking */
body.is-loading {
cursor: wait;

8
web/css/pages/app-login.css
View File

@@ -3,6 +3,14 @@
background: transparent;
}
/* Login forms rely on a full-width primary submit button as the main CTA.
Global button[type="submit"] no longer defaults to width:100%, so we
restore that specifically for the auth flow. */
.login-main form > button[type="submit"],
.login-main form > .grid > button[type="submit"] {
width: 100%;
}
/* ── Logo ── */
.login-logo {

22
web/js/components/app-theme-toggle.js
View File

@@ -6,6 +6,28 @@ import { postForm } from '../core/app-http.js';
const setTheme = (theme) => {
document.documentElement.dataset.theme = theme;
syncThemeAwareImages(theme);
};
/**
* Swap `src` on every <img data-theme-src> to the attribute matching the
* current theme — keeps tenant logos (topbar, login hero) in sync with the
* theme toggle without a full page reload.
*/
const syncThemeAwareImages = (theme) => {
const key = theme === 'dark' ? 'dark' : 'light';
const fallback = key === 'dark' ? 'light' : 'dark';
document.querySelectorAll('[data-theme-src]').forEach((img) => {
if (!(img instanceof HTMLImageElement)) {
return;
}
const next = img.dataset['src' + key.charAt(0).toUpperCase() + key.slice(1)]
|| img.dataset['src' + fallback.charAt(0).toUpperCase() + fallback.slice(1)]
|| '';
if (next && img.getAttribute('src') !== next) {
img.setAttribute('src', next);
}
});
};
const isDarkTheme = (theme) => theme === 'dark';

8
web/js/pages/admin-tenants-index.js
View File

@@ -33,11 +33,11 @@ createListPageModule({
sort: true,
width: '75%',
formatter: (cell, row) => {
const hasAvatar = cell?.has_avatar ? 1 : 0;
const hasLogo = cell?.has_logo ? 1 : 0;
const uuid = encodeURIComponent(String(cell?.uuid ?? ''));
let avatarHtml = '';
if (hasAvatar && uuid) {
const src = new URL(`admin/tenants/avatar-file?uuid=${uuid}&size=64`, appBase).toString();
if (hasLogo && uuid) {
const src = new URL(`admin/tenants/logo-file?uuid=${uuid}&theme=light&size=64`, appBase).toString();
avatarHtml = `<img class="grid-avatar grid-avatar-tenant" src="${src}" alt="" loading="lazy">`;
} else {
const initials = escapeHtml(initialsForRow(row));
@@ -75,7 +75,7 @@ createListPageModule({
{
uuid: row.uuid ?? '',
label: row.description ?? '',
has_avatar: row.has_avatar ? 1 : 0,
has_logo: row.has_logo ? 1 : 0,
},
row.total_users ?? 0,
row.uuid,