Skip to content

Commit 3dd77c9

Browse files
ToolboxAidToolboxAid
committed
Finalize Tool Display Mode single-line layout
1 parent 0c0f2eb commit 3dd77c9

13 files changed

Lines changed: 634 additions & 189 deletions

‎assets/theme-v2/css/accordion.css‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,7 @@ details.vertical-accordion summary::-webkit-details-marker {
7575
}
7676

7777
.horizontal-accordion-toggle__icon,
78-
.vertical-accordion__chevron,
79-
.tool-display-mode__chevron {
78+
.vertical-accordion__chevron {
8079
--accordion-button-border: var(--line);
8180
--accordion-button-background: var(--panel-soft);
8281
--accordion-button-color: var(--gold);
@@ -109,8 +108,7 @@ details.vertical-accordion summary::-webkit-details-marker {
109108
margin-left: auto
110109
}
111110

112-
.vertical-accordion__chevron .theme-icon,
113-
.tool-display-mode__chevron .theme-icon {
111+
.vertical-accordion__chevron .theme-icon {
114112
height: var(--space-14);
115113
width: var(--space-14)
116114
}

‎assets/theme-v2/css/layout.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,6 @@ div {
196196
min-width: var(--space-0)
197197
}
198198

199-
body.tool-focus-mode .site-header,
200199
body.tool-focus-mode .page-title,
201200
body.tool-focus-mode .footer {
202201
display: none !important
@@ -313,6 +312,10 @@ body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .site-header {
313312
z-index: var(--z-index-lg)
314313
}
315314

315+
body.tool-focus-mode .site-header > .container.nav {
316+
display: none !important
317+
}
318+
316319
body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .footer {
317320
inset-block-end: var(--space-0);
318321
inset-inline: var(--space-0);

‎assets/theme-v2/css/panels.css‎

Lines changed: 34 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -274,117 +274,61 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
274274
border-radius: var(--radius-lg);
275275
background: var(--panel);
276276
box-shadow: var(--shadow-lg);
277-
overflow: hidden;
278-
display: flex;
279-
align-items: center;
280-
justify-content: center;
281-
gap: var(--space-12)
277+
overflow: hidden
282278
}
283279

284280
.tool-display-mode summary {
285281
color: var(--gold);
286282
font-weight: var(--font-weight-heavy);
287283
cursor: pointer;
288284
list-style: none;
289-
padding: var(--space-10) var(--space-44) var(--space-10) var(--space-10);
285+
padding: var(--space-10);
290286
display: flex;
291287
align-items: center;
292-
justify-content: center;
293-
gap: var(--space-10);
294-
flex: 0 0 auto
288+
flex-direction: row;
289+
flex-wrap: wrap;
290+
justify-content: flex-start;
291+
gap: var(--space-8) var(--space-10);
292+
min-width: var(--space-0);
293+
width: 100%
295294
}
296295

297296
.tool-display-mode summary::-webkit-details-marker {
298297
display: none
299298
}
300299

301300
.tool-display-mode__mode-icon {
302-
color: var(--cyan)
303-
}
304-
305-
.tool-display-mode__chevron {
306-
position: absolute;
307-
right: var(--space-12);
308-
top: 50%;
309-
transform: translateY(-50%);
310-
z-index: var(--z-index-sm)
301+
color: var(--gold);
302+
flex: 0 0 auto;
303+
height: calc(var(--icon-size-sm) * 2.6);
304+
margin-left: auto;
305+
width: calc(var(--icon-size-sm) * 2.6)
311306
}
312307

313308
.tool-display-mode__badge {
314-
width: 64px;
315-
height: 64px;
309+
flex: 0 0 auto;
310+
width: 128px;
311+
height: 128px;
316312
object-fit: contain;
317313
object-position: center;
318314
border: 0;
319315
border-radius: var(--space-0);
320316
background: transparent
321317
}
322318

323-
.tool-display-mode__body {
324-
display: grid;
325-
grid-template-columns: auto minmax(var(--space-0), 1fr);
326-
grid-template-rows: auto auto;
327-
align-items: center;
328-
column-gap: var(--space-15);
329-
row-gap: var(--space-8);
330-
min-width: var(--space-0);
331-
padding: var(--space-10) var(--space-14) var(--space-10) var(--space-0)
332-
}
333-
334-
.tool-display-mode__identity-row {
335-
display: contents
336-
}
337-
338-
.tool-display-mode__navigation-row {
339-
grid-column: 2;
340-
grid-row: 2;
341-
display: flex;
342-
align-items: center;
343-
gap: var(--space-14);
344-
flex-wrap: wrap
345-
}
346-
347-
.tool-display-mode__navigation-link {
348-
align-items: center;
349-
color: var(--text);
350-
display: inline-flex;
351-
gap: var(--space-6);
352-
line-height: var(--line-height-tight)
353-
}
354-
355-
.tool-display-mode__navigation-link:hover,
356-
.tool-display-mode__navigation-link:focus-visible {
357-
color: var(--gold)
358-
}
359-
360-
.tool-display-mode__navigation-link--disabled {
361-
color: var(--muted)
362-
}
363-
364-
.tool-display-mode__navigation-icon {
365-
color: currentColor
366-
}
367-
368319
.tool-display-mode__character {
369-
grid-column: 1;
370-
grid-row: 1 / span 2;
371-
width: 225px;
372-
height: 127px;
320+
width: min(224px, 100%);
321+
height: auto;
373322
object-fit: contain;
374323
display: block;
375-
flex: 0 0 auto
324+
flex: 0 0 min(224px, 100%);
325+
min-width: min(144px, 100%)
376326
}
377327

378328
.tool-display-mode__fullscreen-name {
379-
display: none;
380-
white-space: nowrap
381-
}
382-
383-
.tool-display-mode__description {
384-
grid-column: 2;
385-
grid-row: 1;
386-
color: var(--gold);
387-
font-weight: var(--font-weight-heavy);
329+
display: inline-flex;
330+
flex: 1 1 4rem;
331+
min-width: var(--space-0);
388332
overflow: hidden;
389333
text-overflow: ellipsis;
390334
white-space: nowrap
@@ -393,17 +337,21 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
393337
body.tool-focus-mode .tool-display-mode {
394338
border-color: var(--line);
395339
background: var(--panel);
396-
box-shadow: var(--shadow-lg);
397-
justify-content: center
340+
box-shadow: var(--shadow-lg)
398341
}
399342

400-
body.tool-focus-mode .tool-display-mode__fullscreen-name {
401-
display: inline
343+
body.tool-focus-mode .tool-display-mode__badge {
344+
width: 64px;
345+
height: 64px
402346
}
403347

404-
body.tool-focus-mode .tool-display-mode__badge {
405-
width: 32px;
406-
height: 32px
348+
body.tool-focus-mode .tool-display-mode__character {
349+
display: none
350+
}
351+
352+
body.tool-focus-mode .tool-display-mode__fullscreen-name {
353+
justify-content: center;
354+
text-align: center
407355
}
408356

409357
.side-menu a {

‎assets/theme-v2/css/status.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,11 @@ body.tool-focus-mode .toolbox-status-bar {
135135

136136
body.tool-focus-mode {
137137
--toolbox-status-bar-height: var(--space-52);
138-
--toolbox-status-top-reserve: var(--space-0)
138+
--toolbox-status-top-reserve: var(--space-78)
139139
}
140140

141141
body.tool-focus-mode:has(.platform-banner) {
142-
--toolbox-status-top-reserve: var(--space-52)
142+
--toolbox-status-top-reserve: var(--space-78)
143143
}
144144

145145
body.tool-focus-mode .tool-workspace {
@@ -165,6 +165,10 @@ body.tool-focus-mode .tool-center-panel {
165165
color: var(--text)
166166
}
167167

168+
body.tool-focus-mode [data-platform-banner-placement="footer"] {
169+
display: none !important
170+
}
171+
168172
.platform-banner__inner {
169173
width: var(--container-width);
170174
margin: var(--space-0) auto;

‎assets/theme-v2/js/tool-display-mode.js‎

Lines changed: 9 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,8 @@
7373
document.querySelectorAll("details.vertical-accordion").forEach(wireVerticalAccordionChevron);
7474
}
7575

76-
function updateToolDisplayModeChevron() {
77-
const iconName = displayMode.open ? "chevron-up" : "chevron-down";
78-
const shell = createChevronShell(iconName, "tool-display-mode__chevron", "tool-display-mode__chevron-icon");
79-
replaceIconNode(summary, ":scope > .tool-display-mode__chevron", shell);
80-
}
81-
8276
function updateToolDisplayModeModeIcon() {
83-
const iconName = document.body.classList.contains("tool-focus-mode") || document.fullscreenElement
77+
const iconName = document.body.classList.contains("tool-focus-mode")
8478
? "exit-fullscreen"
8579
: "fullscreen";
8680
const icon = createThemeIconNode(iconName, "layout-icon tool-display-mode__mode-icon");
@@ -107,7 +101,6 @@
107101
function refreshThemeIcons() {
108102
refreshVerticalAccordionChevrons();
109103
updateToolDisplayModeModeIcon();
110-
updateToolDisplayModeChevron();
111104
refreshHorizontalToggleIcons();
112105
}
113106

@@ -146,68 +139,24 @@
146139
const summary = document.createElement("summary");
147140
summary.setAttribute("aria-label", "Tool Display Mode");
148141
summary.title = "Tool Display Mode";
149-
summary.appendChild(createThemeIconNode("fullscreen", "layout-icon tool-display-mode__mode-icon"));
150142

151143
const badge = document.createElement("img");
152144
badge.className = "tool-display-mode__badge";
153145
badge.src = publicImageSource(slot.dataset.toolIconSrc, "badges");
154146
badge.alt = toolName + " badge";
155-
summary.appendChild(badge);
156147

157148
const fullscreenName = document.createElement("span");
158149
fullscreenName.className = "tool-display-mode__fullscreen-name";
159150
fullscreenName.textContent = toolName;
160-
summary.appendChild(fullscreenName);
161-
displayMode.appendChild(summary);
162-
displayMode.addEventListener("toggle", updateToolDisplayModeChevron);
163-
164-
const body = document.createElement("div");
165-
body.className = "tool-display-mode__body";
166-
167-
const identityRow = document.createElement("div");
168-
identityRow.className = "tool-display-mode__identity-row content-cluster";
169-
identityRow.dataset.toolDisplayModeRow = "identity";
170151

171152
const character = document.createElement("img");
172153
character.className = "tool-display-mode__character";
173154
character.src = publicImageSource(slot.dataset.toolCharacterSrc, "characters");
174155
character.alt = toolName + " character";
175-
identityRow.appendChild(character);
176-
177-
const description = document.createElement("span");
178-
description.className = "tool-display-mode__description";
179-
description.textContent = toolName;
180-
identityRow.appendChild(description);
181-
body.appendChild(identityRow);
182-
displayMode.appendChild(body);
156+
summary.append(badge, fullscreenName, character, createThemeIconNode("fullscreen", "layout-icon tool-display-mode__mode-icon"));
157+
displayMode.append(summary);
183158
slot.replaceWith(displayMode);
184159

185-
function createNavigationControl(direction, target) {
186-
const controlLabel = direction === "previous" ? "Previous" : "Next";
187-
const dataAttribute = direction === "previous" ? "toolNavPrevious" : "toolNavNext";
188-
const iconName = direction === "previous" ? "chevron-left" : "chevron-right";
189-
const icon = createThemeIconNode(iconName, "layout-icon tool-display-mode__navigation-icon");
190-
const label = document.createTextNode(controlLabel + ": " + (target?.label || "Unavailable"));
191-
192-
if (!target || target.disabled) {
193-
const disabledText = document.createElement("span");
194-
disabledText.className = "pill tool-display-mode__navigation-link tool-display-mode__navigation-link--disabled";
195-
disabledText.dataset[dataAttribute] = "disabled";
196-
disabledText.append(icon, label);
197-
return disabledText;
198-
}
199-
200-
const link = document.createElement("a");
201-
link.className = "tool-display-mode__navigation-link";
202-
link.href = target.href;
203-
link.dataset[dataAttribute] = target.kind;
204-
if (target.group) {
205-
link.dataset.toolNavGroup = target.group;
206-
}
207-
link.append(icon, label);
208-
return link;
209-
}
210-
211160
function applyRegistryImages(registry) {
212161
const registryTool = registry.getToolBySlug(toolSlug);
213162
if (!registryTool) {
@@ -240,35 +189,24 @@
240189
badge.alt = registryName + " badge";
241190
fullscreenName.textContent = registryName;
242191
character.alt = registryName + " character";
243-
description.textContent = registryName;
244192
badge.src = registry.getToolImageSource(registryTool, "badge");
245193
character.src = registry.getToolImageSource(registryTool, "tool");
246194
}
247195

248-
async function renderToolNavigation() {
196+
async function renderToolDisplayMetadata() {
249197
try {
250198
const registry = await import("/toolbox/tool-registry-api-client.js");
251199
const registryDiagnostic = registry.getToolRegistryApiDiagnostic();
252200
if (registryDiagnostic) {
253201
throw new Error(registryDiagnostic);
254202
}
255-
const navigation = registry.getToolNavigationTargets(toolSlug);
256203
applyRegistryImages(registry);
257-
const navigationRow = document.createElement("nav");
258-
navigationRow.className = "tool-display-mode__navigation-row content-cluster";
259-
navigationRow.dataset.toolDisplayModeRow = "navigation";
260-
navigationRow.setAttribute("aria-label", "Tool build-order navigation");
261-
navigationRow.append(
262-
createNavigationControl("previous", navigation.previous),
263-
createNavigationControl("next", navigation.next)
264-
);
265-
body.appendChild(navigationRow);
266204
} catch (error) {
267-
console.warn("Tool navigation could not be loaded.", error);
205+
console.warn("Tool display metadata could not be loaded.", error);
268206
}
269207
}
270208

271-
renderToolNavigation();
209+
renderToolDisplayMetadata();
272210

273211
async function enterToolMode() {
274212
document.body.classList.add("tool-focus-mode");
@@ -296,6 +234,7 @@
296234
} catch (error) {
297235
console.warn("Exit fullscreen failed.", error);
298236
}
237+
updateToolDisplayModeModeIcon();
299238
}
300239

301240
summary.addEventListener("click", function (event) {
@@ -309,15 +248,14 @@
309248
});
310249

311250
document.addEventListener("fullscreenchange", function () {
312-
if (!document.fullscreenElement && document.body.classList.contains("tool-focus-mode")) {
251+
if (!document.fullscreenElement) {
313252
document.body.classList.remove("tool-focus-mode");
314253
displayMode.open = true;
315-
refreshThemeIcons();
316254
}
255+
refreshThemeIcons();
317256
});
318257

319258
refreshVerticalAccordionChevrons();
320-
updateToolDisplayModeChevron();
321259

322260
document.querySelectorAll(".tool-workspace").forEach(function (workspace) {
323261
const columns = workspace.querySelectorAll(":scope > .tool-column");

0 commit comments

Comments
 (0)