Skip to content

PR_26176_005 Tool Display Mode single-line layout #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ToolboxAid wants to merge 1 commit into from
Closed

PR_26176_005 Tool Display Mode single-line layout #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions assets/theme-v2/css/accordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ details.vertical-accordion summary::-webkit-details-marker {
}

.horizontal-accordion-toggle__icon,
.vertical-accordion__chevron,
.tool-display-mode__chevron {
.vertical-accordion__chevron {
--accordion-button-border: var(--line);
--accordion-button-background: var(--panel-soft);
--accordion-button-color: var(--gold);
Expand Down Expand Up @@ -109,8 +108,7 @@ details.vertical-accordion summary::-webkit-details-marker {
margin-left: auto
}

.vertical-accordion__chevron .theme-icon,
.tool-display-mode__chevron .theme-icon {
.vertical-accordion__chevron .theme-icon {
height: var(--space-14);
width: var(--space-14)
}
Expand Down
5 changes: 4 additions & 1 deletion assets/theme-v2/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,6 @@ div {
min-width: var(--space-0)
}

body.tool-focus-mode .site-header,
body.tool-focus-mode .page-title,
body.tool-focus-mode .footer {
display: none !important
Expand Down Expand Up @@ -313,6 +312,10 @@ body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .site-header {
z-index: var(--z-index-lg)
}

body.tool-focus-mode .site-header > .container.nav {
display: none !important
}

body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .footer {
inset-block-end: var(--space-0);
inset-inline: var(--space-0);
Expand Down
120 changes: 34 additions & 86 deletions assets/theme-v2/css/panels.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,117 +274,61 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
border-radius: var(--radius-lg);
background: var(--panel);
box-shadow: var(--shadow-lg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-12)
overflow: hidden
}

.tool-display-mode summary {
color: var(--gold);
font-weight: var(--font-weight-heavy);
cursor: pointer;
list-style: none;
padding: var(--space-10) var(--space-44) var(--space-10) var(--space-10);
padding: var(--space-10);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-10);
flex: 0 0 auto
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--space-8) var(--space-10);
min-width: var(--space-0);
width: 100%
}

.tool-display-mode summary::-webkit-details-marker {
display: none
}

.tool-display-mode__mode-icon {
color: var(--cyan)
}

.tool-display-mode__chevron {
position: absolute;
right: var(--space-12);
top: 50%;
transform: translateY(-50%);
z-index: var(--z-index-sm)
color: var(--gold);
flex: 0 0 auto;
height: calc(var(--icon-size-sm) * 2.6);
margin-left: auto;
width: calc(var(--icon-size-sm) * 2.6)
}

.tool-display-mode__badge {
width: 64px;
height: 64px;
flex: 0 0 auto;
width: 128px;
height: 128px;
object-fit: contain;
object-position: center;
border: 0;
border-radius: var(--space-0);
background: transparent
}

.tool-display-mode__body {
display: grid;
grid-template-columns: auto minmax(var(--space-0), 1fr);
grid-template-rows: auto auto;
align-items: center;
column-gap: var(--space-15);
row-gap: var(--space-8);
min-width: var(--space-0);
padding: var(--space-10) var(--space-14) var(--space-10) var(--space-0)
}

.tool-display-mode__identity-row {
display: contents
}

.tool-display-mode__navigation-row {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
gap: var(--space-14);
flex-wrap: wrap
}

.tool-display-mode__navigation-link {
align-items: center;
color: var(--text);
display: inline-flex;
gap: var(--space-6);
line-height: var(--line-height-tight)
}

.tool-display-mode__navigation-link:hover,
.tool-display-mode__navigation-link:focus-visible {
color: var(--gold)
}

.tool-display-mode__navigation-link--disabled {
color: var(--muted)
}

.tool-display-mode__navigation-icon {
color: currentColor
}

.tool-display-mode__character {
grid-column: 1;
grid-row: 1 / span 2;
width: 225px;
height: 127px;
width: min(224px, 100%);
height: auto;
object-fit: contain;
display: block;
flex: 0 0 auto
flex: 0 0 min(224px, 100%);
min-width: min(144px, 100%)
}

.tool-display-mode__fullscreen-name {
display: none;
white-space: nowrap
}

.tool-display-mode__description {
grid-column: 2;
grid-row: 1;
color: var(--gold);
font-weight: var(--font-weight-heavy);
display: inline-flex;
flex: 1 1 4rem;
min-width: var(--space-0);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
Expand All @@ -393,17 +337,21 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
body.tool-focus-mode .tool-display-mode {
border-color: var(--line);
background: var(--panel);
box-shadow: var(--shadow-lg);
justify-content: center
box-shadow: var(--shadow-lg)
}

body.tool-focus-mode .tool-display-mode__fullscreen-name {
display: inline
body.tool-focus-mode .tool-display-mode__badge {
width: 64px;
height: 64px
}

body.tool-focus-mode .tool-display-mode__badge {
width: 32px;
height: 32px
body.tool-focus-mode .tool-display-mode__character {
display: none
}

body.tool-focus-mode .tool-display-mode__fullscreen-name {
justify-content: center;
text-align: center
}

.side-menu a {
Expand Down
8 changes: 6 additions & 2 deletions assets/theme-v2/css/status.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,11 @@ body.tool-focus-mode .toolbox-status-bar {

body.tool-focus-mode {
--toolbox-status-bar-height: var(--space-52);
--toolbox-status-top-reserve: var(--space-0)
--toolbox-status-top-reserve: var(--space-78)
}

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

body.tool-focus-mode .tool-workspace {
Expand All @@ -165,6 +165,10 @@ body.tool-focus-mode .tool-center-panel {
color: var(--text)
}

body.tool-focus-mode [data-platform-banner-placement="footer"] {
display: none !important
}

.platform-banner__inner {
width: var(--container-width);
margin: var(--space-0) auto;
Expand Down
80 changes: 9 additions & 71 deletions assets/theme-v2/js/tool-display-mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,8 @@
document.querySelectorAll("details.vertical-accordion").forEach(wireVerticalAccordionChevron);
}

function updateToolDisplayModeChevron() {
const iconName = displayMode.open ? "chevron-up" : "chevron-down";
const shell = createChevronShell(iconName, "tool-display-mode__chevron", "tool-display-mode__chevron-icon");
replaceIconNode(summary, ":scope > .tool-display-mode__chevron", shell);
}

function updateToolDisplayModeModeIcon() {
const iconName = document.body.classList.contains("tool-focus-mode") || document.fullscreenElement
const iconName = document.body.classList.contains("tool-focus-mode")
? "exit-fullscreen"
: "fullscreen";
const icon = createThemeIconNode(iconName, "layout-icon tool-display-mode__mode-icon");
Expand All @@ -107,7 +101,6 @@
function refreshThemeIcons() {
refreshVerticalAccordionChevrons();
updateToolDisplayModeModeIcon();
updateToolDisplayModeChevron();
refreshHorizontalToggleIcons();
}

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

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

const fullscreenName = document.createElement("span");
fullscreenName.className = "tool-display-mode__fullscreen-name";
fullscreenName.textContent = toolName;
summary.appendChild(fullscreenName);
displayMode.appendChild(summary);
displayMode.addEventListener("toggle", updateToolDisplayModeChevron);

const body = document.createElement("div");
body.className = "tool-display-mode__body";

const identityRow = document.createElement("div");
identityRow.className = "tool-display-mode__identity-row content-cluster";
identityRow.dataset.toolDisplayModeRow = "identity";

const character = document.createElement("img");
character.className = "tool-display-mode__character";
character.src = publicImageSource(slot.dataset.toolCharacterSrc, "characters");
character.alt = toolName + " character";
identityRow.appendChild(character);

const description = document.createElement("span");
description.className = "tool-display-mode__description";
description.textContent = toolName;
identityRow.appendChild(description);
body.appendChild(identityRow);
displayMode.appendChild(body);
summary.append(badge, fullscreenName, character, createThemeIconNode("fullscreen", "layout-icon tool-display-mode__mode-icon"));
displayMode.append(summary);
slot.replaceWith(displayMode);

function createNavigationControl(direction, target) {
const controlLabel = direction === "previous" ? "Previous" : "Next";
const dataAttribute = direction === "previous" ? "toolNavPrevious" : "toolNavNext";
const iconName = direction === "previous" ? "chevron-left" : "chevron-right";
const icon = createThemeIconNode(iconName, "layout-icon tool-display-mode__navigation-icon");
const label = document.createTextNode(controlLabel + ": " + (target?.label || "Unavailable"));

if (!target || target.disabled) {
const disabledText = document.createElement("span");
disabledText.className = "pill tool-display-mode__navigation-link tool-display-mode__navigation-link--disabled";
disabledText.dataset[dataAttribute] = "disabled";
disabledText.append(icon, label);
return disabledText;
}

const link = document.createElement("a");
link.className = "tool-display-mode__navigation-link";
link.href = target.href;
link.dataset[dataAttribute] = target.kind;
if (target.group) {
link.dataset.toolNavGroup = target.group;
}
link.append(icon, label);
return link;
}

function applyRegistryImages(registry) {
const registryTool = registry.getToolBySlug(toolSlug);
if (!registryTool) {
Expand Down Expand Up @@ -240,35 +189,24 @@
badge.alt = registryName + " badge";
fullscreenName.textContent = registryName;
character.alt = registryName + " character";
description.textContent = registryName;
badge.src = registry.getToolImageSource(registryTool, "badge");
character.src = registry.getToolImageSource(registryTool, "tool");
}

async function renderToolNavigation() {
async function renderToolDisplayMetadata() {
try {
const registry = await import("/toolbox/tool-registry-api-client.js");
const registryDiagnostic = registry.getToolRegistryApiDiagnostic();
if (registryDiagnostic) {
throw new Error(registryDiagnostic);
}
const navigation = registry.getToolNavigationTargets(toolSlug);
applyRegistryImages(registry);
const navigationRow = document.createElement("nav");
navigationRow.className = "tool-display-mode__navigation-row content-cluster";
navigationRow.dataset.toolDisplayModeRow = "navigation";
navigationRow.setAttribute("aria-label", "Tool build-order navigation");
navigationRow.append(
createNavigationControl("previous", navigation.previous),
createNavigationControl("next", navigation.next)
);
body.appendChild(navigationRow);
} catch (error) {
console.warn("Tool navigation could not be loaded.", error);
console.warn("Tool display metadata could not be loaded.", error);
}
}

renderToolNavigation();
renderToolDisplayMetadata();

async function enterToolMode() {
document.body.classList.add("tool-focus-mode");
Expand Down Expand Up @@ -296,6 +234,7 @@
} catch (error) {
console.warn("Exit fullscreen failed.", error);
}
updateToolDisplayModeModeIcon();
}

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

document.addEventListener("fullscreenchange", function () {
if (!document.fullscreenElement && document.body.classList.contains("tool-focus-mode")) {
if (!document.fullscreenElement) {
document.body.classList.remove("tool-focus-mode");
displayMode.open = true;
refreshThemeIcons();
}
refreshThemeIcons();
});

refreshVerticalAccordionChevrons();
updateToolDisplayModeChevron();

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