refactor(settings/branding): two side-by-side upload cards via barrier forms
Branding now follows the tenant-logos pattern: four hidden barrier forms (logo upload + delete, favicon upload + delete) declared once at the top and two file-upload partials placed side-by-side inside a grid, hooked to their forms via the HTML5 form="..." attribute. The redundant preview wrapper above each upload is gone — the file-upload partial already renders the current image, replace/delete buttons and metadata. The favicon hint moves from a separate blockquote into the upload's hint field so it sits in the dropzone where it matters. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -23,82 +23,92 @@ $hasFavicon = app(\MintyPHP\Service\Branding\BrandingFaviconService::class)->has
|
||||
require templatePath('partials/app-details-titlebar.phtml');
|
||||
?>
|
||||
|
||||
<details class="app-details-card" name="settings-branding-logo" data-details-key="settings-branding-logo" open>
|
||||
<summary>
|
||||
<span class="app-details-card-summary-title"><?php e(t('App logo')); ?></span>
|
||||
<span class="app-details-card-summary-meta">
|
||||
<span class="badge" data-variant="neutral"><?php e($hasLogo ? t('Configured') : t('Default')); ?></span>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="app-details-card-container">
|
||||
<div class="entity-avatar-block avatar-square avatar-ratio-16-9 avatar-borderless">
|
||||
<a data-fslightbox="app-logo" href="<?php e(appLogoUrl(256)); ?>">
|
||||
<img class="entity-avatar-image" src="<?php e(appLogoUrl(256)); ?>" alt="<?php e(t('App logo')); ?>">
|
||||
</a>
|
||||
</div>
|
||||
<?php if ($canUpdateSettings): ?>
|
||||
<form class="user-avatar-form" method="post" action="admin/settings/logo" enctype="multipart/form-data">
|
||||
<?php
|
||||
$fileUpload = [
|
||||
'name' => 'logo',
|
||||
'accept' => 'image/svg+xml,image/png,image/jpeg,image/webp',
|
||||
'hint' => t('Allowed file types: SVG, PNG, JPG, WEBP'),
|
||||
'currentSrc' => $hasLogo ? appLogoUrl(128) : '',
|
||||
'deleteAction' => $hasLogo ? 'admin/settings/logo-delete' : '',
|
||||
];
|
||||
require templatePath('partials/app-file-upload.phtml');
|
||||
?>
|
||||
<div class="app-form-actions">
|
||||
<button type="submit" name="action" value="save" class="secondary outline">
|
||||
<?php e(t('Save')); ?>
|
||||
</button>
|
||||
<button type="submit" name="action" value="save_close" class="primary">
|
||||
<?php e(t('Save & close')); ?>
|
||||
</button>
|
||||
</div>
|
||||
<?php Session::getCsrfInput(); ?>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</details>
|
||||
<?php if ($canUpdateSettings): ?>
|
||||
<form id="branding-logo-form" method="post" action="admin/settings/logo"
|
||||
enctype="multipart/form-data" data-standard-detail-form="1" hidden>
|
||||
<?php Session::getCsrfInput(); ?>
|
||||
</form>
|
||||
<form id="branding-logo-delete-form" method="post" action="admin/settings/logo-delete" hidden>
|
||||
<?php Session::getCsrfInput(); ?>
|
||||
</form>
|
||||
<form id="branding-favicon-form" method="post" action="admin/settings/favicon"
|
||||
enctype="multipart/form-data" hidden>
|
||||
<?php Session::getCsrfInput(); ?>
|
||||
</form>
|
||||
<form id="branding-favicon-delete-form" method="post" action="admin/settings/favicon-delete" hidden>
|
||||
<?php Session::getCsrfInput(); ?>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
|
||||
<details class="app-details-card" name="settings-branding-favicon" data-details-key="settings-branding-favicon">
|
||||
<summary>
|
||||
<span class="app-details-card-summary-title"><?php e(t('Favicon')); ?></span>
|
||||
<span class="app-details-card-summary-meta">
|
||||
<span class="badge" data-variant="neutral"><?php e($hasFavicon ? t('Configured') : t('Default')); ?></span>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="app-details-card-container">
|
||||
<blockquote data-variant="info">
|
||||
<small><?php e(t('Square images are recommended (icons are center-cropped).')); ?></small>
|
||||
</blockquote>
|
||||
<?php if ($canUpdateSettings): ?>
|
||||
<form class="user-avatar-form" method="post" action="admin/settings/favicon" enctype="multipart/form-data">
|
||||
<?php
|
||||
$fileUpload = [
|
||||
'name' => 'favicon',
|
||||
'accept' => 'image/png',
|
||||
'hint' => t('Allowed file types: PNG'),
|
||||
'currentSrc' => $hasFavicon ? asset('favicon/favicon-32x32.png') : '',
|
||||
'currentLabel' => t('Favicon'),
|
||||
'deleteAction' => $hasFavicon ? 'admin/settings/favicon-delete' : '',
|
||||
];
|
||||
require templatePath('partials/app-file-upload.phtml');
|
||||
?>
|
||||
<div class="grid">
|
||||
<details class="app-details-card" name="settings-branding-logo" data-details-key="settings-branding-logo" open>
|
||||
<summary>
|
||||
<span class="app-details-card-summary-title"><?php e(t('App logo')); ?></span>
|
||||
<span class="app-details-card-summary-meta">
|
||||
<span class="badge" data-variant="neutral"><?php e($hasLogo ? t('Configured') : t('Default')); ?></span>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="app-details-card-container">
|
||||
<?php
|
||||
$fileUpload = [
|
||||
'name' => 'logo',
|
||||
'accept' => 'image/svg+xml,image/png,image/jpeg,image/webp',
|
||||
'hint' => t('Allowed file types: SVG, PNG, JPG, WEBP'),
|
||||
'currentSrc' => $hasLogo ? appLogoUrl(256) : '',
|
||||
'currentLabel' => t('App logo'),
|
||||
'formId' => $canUpdateSettings ? 'branding-logo-form' : '',
|
||||
'deleteFormId' => $hasLogo && $canUpdateSettings ? 'branding-logo-delete-form' : '',
|
||||
'deleteConfirm' => t('Remove the app logo?'),
|
||||
];
|
||||
require templatePath('partials/app-file-upload.phtml');
|
||||
?>
|
||||
<?php if ($canUpdateSettings): ?>
|
||||
<div class="app-form-actions">
|
||||
<button type="submit" name="action" value="save" class="secondary outline">
|
||||
<button type="submit" form="branding-logo-form" name="action" value="save" class="secondary outline">
|
||||
<?php e(t('Save')); ?>
|
||||
</button>
|
||||
<button type="submit" name="action" value="save_close" class="primary">
|
||||
<button type="submit" form="branding-logo-form" name="action" value="save_close" class="primary">
|
||||
<?php e(t('Save & close')); ?>
|
||||
</button>
|
||||
</div>
|
||||
<?php Session::getCsrfInput(); ?>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</details>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="app-details-card" name="settings-branding-favicon" data-details-key="settings-branding-favicon" open>
|
||||
<summary>
|
||||
<span class="app-details-card-summary-title"><?php e(t('Favicon')); ?></span>
|
||||
<span class="app-details-card-summary-meta">
|
||||
<span class="badge" data-variant="neutral"><?php e($hasFavicon ? t('Configured') : t('Default')); ?></span>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="app-details-card-container">
|
||||
<?php
|
||||
$fileUpload = [
|
||||
'name' => 'favicon',
|
||||
'accept' => 'image/png',
|
||||
'hint' => t('PNG, square recommended (icons are center-cropped)'),
|
||||
'currentSrc' => $hasFavicon ? asset('favicon/favicon-32x32.png') : '',
|
||||
'currentLabel' => t('Favicon'),
|
||||
'formId' => $canUpdateSettings ? 'branding-favicon-form' : '',
|
||||
'deleteFormId' => $hasFavicon && $canUpdateSettings ? 'branding-favicon-delete-form' : '',
|
||||
'deleteConfirm' => t('Remove the favicon?'),
|
||||
];
|
||||
require templatePath('partials/app-file-upload.phtml');
|
||||
?>
|
||||
<?php if ($canUpdateSettings): ?>
|
||||
<div class="app-form-actions">
|
||||
<button type="submit" form="branding-favicon-form" name="action" value="save" class="secondary outline">
|
||||
<?php e(t('Save')); ?>
|
||||
</button>
|
||||
<button type="submit" form="branding-favicon-form" name="action" value="save_close" class="primary">
|
||||
<?php e(t('Save & close')); ?>
|
||||
</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
<aside id="app-details-aside-section">
|
||||
<div class="app-details-aside-section"></div>
|
||||
|
||||
Reference in New Issue
Block a user