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>
58 lines
2.3 KiB
PHTML
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>
|