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

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 {