Files
breadcrumb-the-shire/templates/partials/app-detail-drawer.phtml
fs 4d1bd13a3b 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>
2026-04-25 19:06:06 +02:00

58 lines
2.3 KiB
PHTML

<?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>