fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(drawer): open-full action as secondary outline button with text + icon

Browse Source 
Converts the "Open full page" control in the detail drawer header from an
icon-only link into a text+icon button using the standard
`secondary outline small` classes. Because the base button rule in
app-shell.css only targets `button, [type=…], [role=button]`, the anchor
gets `role="button"` so the core cascade applies (border-radius, padding,
hover/focus states). Component-local CSS is trimmed to just the flex
layout (icon + label with gap) and text-decoration reset — border, radius
and colors come from the shared button base.

Tooltip is removed (redundant with visible text); aria-label remains for
screen readers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-22 22:41:12 +02:00
parent bd10e07f37
commit 4a8b9ab64d
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/css/components/app-detail-drawer.css
View File

@@ -82,6 +82,14 @@
margin-bottom: 0;
}
.app-detail-drawer-full {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
text-decoration: none;
}
.app-detail-drawer-body {
flex: 1 1 auto;
overflow-y: auto;

8
web/js/components/app-detail-drawer.js
View File

@@ -48,10 +48,10 @@ function ensureDrawerElement(labels) {
</button>
</div>
<div class="app-detail-drawer-actions">
<a class="transparent icon-button" data-detail-drawer-full
target="_blank" rel="noopener"
aria-label="${labels.openFull}" data-tooltip="${labels.openFull}" data-tooltip-pos="bottom">
<i class="bi bi-box-arrow-up-right"></i>
<a role="button" class="secondary outline small app-detail-drawer-full" data-detail-drawer-full
target="_blank" rel="noopener" aria-label="${labels.openFull}">
<i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
<span>${labels.openFull}</span>
</a>
<button type="button" class="transparent icon-button" data-detail-drawer-close
aria-label="${labels.close}" data-tooltip="${labels.close}" data-tooltip-pos="bottom">