refactor(ui): move detail drawer chrome to a server-rendered partial
The drawer chrome used to be built in JS via a 50-line innerHTML string and needed every caller to plumb through a labels object sourced from per-page PHP config. That diverged from the codebase convention — the confirm dialog, search dialog and session warning are all PHP partials mounted once in templates/default.phtml. The drawer now follows the same pattern: templates/partials/app-detail-drawer.phtml renders the markup with t() labels, default.phtml mounts it inside the logged-in shell, and the JS only attaches behavior via the [data-detail-drawer] selector. Knock-on cleanup: ensureDrawerElement and resolveLabels disappear from the JS, all three initDetailDrawer callers (admin/users, address book, helpdesk debitor) drop their labels parameter, and the matching dead 'drawerClose'/'drawerPrev'/… entries leave the per-page PHP grid configs. The drawer also gains a clean fallback when the partial is missing (console warn + null return), so logged-out edges can't crash. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -340,6 +340,7 @@ $componentPageConfig['moduleRuntimeComponents'] = $moduleRuntimeComponents;
|
||||
<?php if ($isLoggedIn): ?>
|
||||
<?php require __DIR__ . '/partials/app-search-dialog.phtml'; ?>
|
||||
<?php require __DIR__ . '/partials/app-session-warning-dialog.phtml'; ?>
|
||||
<?php require __DIR__ . '/partials/app-detail-drawer.phtml'; ?>
|
||||
<?php endif; ?>
|
||||
<?php foreach ($moduleBodyEndTemplateSlots as $slot): ?>
|
||||
<?php
|
||||
|
||||
57
templates/partials/app-detail-drawer.phtml
Normal file
57
templates/partials/app-detail-drawer.phtml
Normal file
@@ -0,0 +1,57 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Shared right-edge detail drawer.
|
||||
*
|
||||
* Mounted once at the bottom of the logged-in shell so admin list pages
|
||||
* can attach behavior via [data-detail-drawer]. Markup mirrors what
|
||||
* web/js/components/app-detail-drawer.js drives — JS only queries
|
||||
* data-attributes, never injects chrome.
|
||||
*/
|
||||
|
||||
?>
|
||||
<div class="app-detail-drawer"
|
||||
data-detail-drawer
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-hidden="true"
|
||||
hidden>
|
||||
<div class="app-detail-drawer-backdrop" data-detail-drawer-backdrop></div>
|
||||
<aside class="app-detail-drawer-panel" data-detail-drawer-panel tabindex="-1">
|
||||
<header class="app-detail-drawer-header">
|
||||
<div class="app-detail-drawer-stepper">
|
||||
<button type="button" class="transparent icon-button" data-detail-drawer-prev
|
||||
aria-label="<?php e(t('Previous')); ?>"
|
||||
data-tooltip="<?php e(t('Previous')); ?>"
|
||||
data-tooltip-pos="bottom">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</button>
|
||||
<button type="button" class="transparent icon-button" data-detail-drawer-next
|
||||
aria-label="<?php e(t('Next')); ?>"
|
||||
data-tooltip="<?php e(t('Next')); ?>"
|
||||
data-tooltip-pos="bottom">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-detail-drawer-actions">
|
||||
<a role="button" class="secondary outline small app-detail-drawer-full"
|
||||
data-detail-drawer-full
|
||||
aria-label="<?php e(t('Open full page')); ?>">
|
||||
<i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
|
||||
<span><?php e(t('Open full page')); ?></span>
|
||||
</a>
|
||||
<button type="button" class="transparent icon-button" data-detail-drawer-close
|
||||
aria-label="<?php e(t('Close')); ?>"
|
||||
data-tooltip="<?php e(t('Close')); ?>"
|
||||
data-tooltip-pos="bottom">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="app-detail-drawer-body" data-detail-drawer-body>
|
||||
<div class="app-detail-drawer-loading" data-detail-drawer-loading hidden><?php e(t('Loading')); ?></div>
|
||||
<div class="app-detail-drawer-error" data-detail-drawer-error hidden><?php e(t('Failed to load')); ?></div>
|
||||
<div class="app-detail-drawer-content" data-detail-drawer-content></div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
Reference in New Issue
Block a user