refactor(file-upload): SSR-first state, click-to-replace, cleaner preview
- Server renders initial file-upload state (src, alt, label text, has-current class) so there is no flash of broken-image icon while JS boots. JS no longer duplicates that work — it only reacts to user input (select, clear, drag-and-drop) and uses data-current-src solely to restore the server file after a blob preview. - Clicking the current preview image now opens the file dialog, mirrors the Replace button, with hover affordance (cursor + primary border). - Drop the transparency checker pattern in the preview — the admin UI does not need Figma-style transparency semantics. Preview is now a flat theme-aware surface (--app-preview-bg) that keeps white or black logos visible against a neutral gray. - Move tenant favicon out of the aside into the Master-data tab as its own details block next to the Tenant-logos section. Uses the same barrier-form pattern (HTML5 form attribute + app-file-upload.phtml) for a consistent instant-upload UX. - Tenant-logo slot label is a native <label> element — picks up the global form-label typography and spacing, no custom muted-color class needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -43,13 +43,13 @@ $hasCurrent = $uploadCurrentSrc !== '';
|
||||
$hasDelete = $hasCurrent && ($uploadDeleteAction !== '' || $uploadDeleteFormId !== '');
|
||||
|
||||
?>
|
||||
<div data-app-component="file-upload" class="app-file-upload"
|
||||
<?php if ($hasCurrent): ?>data-current-src="<?php e($uploadCurrentSrc); ?>" data-current-label="<?php e($uploadCurrentLabel); ?>"<?php endif; ?>>
|
||||
<div data-app-component="file-upload" class="app-file-upload<?php e($hasCurrent ? ' has-current' : ''); ?>"
|
||||
<?php if ($hasCurrent): ?>data-current-src="<?php e($uploadCurrentSrc); ?>"<?php endif; ?>>
|
||||
<?php if ($hasCurrent): ?>
|
||||
<div class="app-file-upload-current">
|
||||
<img class="app-file-upload-current-image" src="" alt="">
|
||||
<img class="app-file-upload-current-image" src="<?php e($uploadCurrentSrc); ?>" alt="<?php e($uploadCurrentLabel); ?>" loading="lazy">
|
||||
<div class="app-file-upload-current-meta">
|
||||
<span class="app-file-upload-current-label"></span>
|
||||
<span class="app-file-upload-current-label"><?php e($uploadCurrentLabel); ?></span>
|
||||
<span class="app-file-upload-current-actions">
|
||||
<button type="button" class="app-file-upload-replace-button"><?php e(t('Replace')); ?></button>
|
||||
<?php if ($hasDelete): ?>
|
||||
|
||||
@@ -22,7 +22,7 @@ $previewUrl = $hasLogo
|
||||
: '';
|
||||
?>
|
||||
<div class="tenant-logo-slot">
|
||||
<span class="tenant-logo-slot-label"><?php e($fieldLabel); ?></span>
|
||||
<label><?php e($fieldLabel); ?></label>
|
||||
<?php if ($canUpdate && $uploadFormId !== ''): ?>
|
||||
<?php
|
||||
$fileUpload = [
|
||||
|
||||
Reference in New Issue
Block a user