forked from fa/breadcrumb-the-shire
fs
e814b5fd11
- 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>
85 lines
5.0 KiB
PHTML
85 lines
5.0 KiB
PHTML
<?php
|
|
|
|
/**
|
|
* Shared file-upload component — card-based dropzone with drag-and-drop, current file preview, and pending preview.
|
|
*
|
|
* This is a deliberate exception to the "plain HTML inputs" convention: the file-upload markup is complex enough
|
|
* (3 states, nested elements, data attributes, confirm dialog, i18n) that a partial prevents drift across call sites.
|
|
*
|
|
* Usage:
|
|
* $fileUpload = [
|
|
* 'name' => 'avatar', // required — input name attribute
|
|
* 'accept' => 'image/*', // required — accepted file types
|
|
* 'hint' => t('Allowed file types: SVG, PNG, JPG, WEBP'),// optional — hint text below dropzone label
|
|
* 'currentSrc' => 'admin/tenants/logo-file?uuid=…&theme=light&size=128', // optional — URL of existing server file
|
|
* 'currentLabel' => t('Current image'), // optional — label for current file preview
|
|
* 'deleteAction' => 'admin/tenants/logo-delete/…', // optional — formaction for delete button (requires currentSrc)
|
|
* 'deleteConfirm' => t('Delete this image?'), // optional — confirm message on delete
|
|
* 'required' => false, // optional — make input required
|
|
* 'formId' => 'tenant-logo-light-form', // optional — HTML5 form attribute to associate input with an external form
|
|
* 'deleteFormId' => 'tenant-logo-light-delete-form', // optional — HTML5 form attribute for the delete button (bypasses formaction)
|
|
* ];
|
|
* require templatePath('partials/app-file-upload.phtml');
|
|
*
|
|
* @var array<string, mixed> $fileUpload
|
|
*/
|
|
|
|
$fileUpload = is_array($fileUpload ?? null) ? $fileUpload : [];
|
|
$uploadName = trim((string) ($fileUpload['name'] ?? ''));
|
|
if ($uploadName === '') {
|
|
return;
|
|
}
|
|
|
|
$uploadAccept = trim((string) ($fileUpload['accept'] ?? ''));
|
|
$uploadHint = trim((string) ($fileUpload['hint'] ?? ''));
|
|
$uploadCurrentSrc = trim((string) ($fileUpload['currentSrc'] ?? ''));
|
|
$uploadCurrentLabel = trim((string) ($fileUpload['currentLabel'] ?? t('Current image')));
|
|
$uploadDeleteAction = trim((string) ($fileUpload['deleteAction'] ?? ''));
|
|
$uploadDeleteConfirm = trim((string) ($fileUpload['deleteConfirm'] ?? t('Delete this image?')));
|
|
$uploadRequired = (bool) ($fileUpload['required'] ?? false);
|
|
$uploadFormId = trim((string) ($fileUpload['formId'] ?? ''));
|
|
$uploadDeleteFormId = trim((string) ($fileUpload['deleteFormId'] ?? ''));
|
|
$hasCurrent = $uploadCurrentSrc !== '';
|
|
$hasDelete = $hasCurrent && ($uploadDeleteAction !== '' || $uploadDeleteFormId !== '');
|
|
|
|
?>
|
|
<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="<?php e($uploadCurrentSrc); ?>" alt="<?php e($uploadCurrentLabel); ?>" loading="lazy">
|
|
<div class="app-file-upload-current-meta">
|
|
<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): ?>
|
|
<button type="submit" class="app-file-upload-delete-button"
|
|
<?php if ($uploadDeleteFormId !== ''): ?>form="<?php e($uploadDeleteFormId); ?>"<?php else: ?>formaction="<?php e($uploadDeleteAction); ?>" formmethod="post"<?php endif; ?>
|
|
data-confirm-message="<?php e($uploadDeleteConfirm); ?>"><?php e(t('Delete')); ?></button>
|
|
<?php endif; ?>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
<label class="app-file-upload-dropzone">
|
|
<input type="file" name="<?php e($uploadName); ?>"
|
|
<?php if ($uploadAccept !== ''): ?>accept="<?php e($uploadAccept); ?>"<?php endif; ?>
|
|
<?php if ($uploadFormId !== ''): ?>form="<?php e($uploadFormId); ?>"<?php endif; ?>
|
|
<?php if ($uploadRequired): ?>required<?php endif; ?>>
|
|
<span class="app-file-upload-dropzone-icon"><i class="bi bi-cloud-arrow-up"></i></span>
|
|
<span class="app-file-upload-dropzone-label"><?php e(t('Drop file here or click to select')); ?></span>
|
|
<?php if ($uploadHint !== ''): ?>
|
|
<span class="app-file-upload-dropzone-hint"><?php e($uploadHint); ?></span>
|
|
<?php endif; ?>
|
|
</label>
|
|
<div class="app-file-upload-preview">
|
|
<img class="app-file-upload-thumbnail" alt="" hidden>
|
|
<span class="app-file-upload-file-icon" hidden><i class="bi bi-file-earmark"></i></span>
|
|
<span class="app-file-upload-meta">
|
|
<span class="app-file-upload-filename"></span>
|
|
<span class="app-file-upload-filesize"></span>
|
|
</span>
|
|
<button type="button" class="app-file-upload-clear" aria-label="<?php e(t('Remove selected file')); ?>"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
</div>
|