|
44 | 44 | const body = document.createElement("div"); |
45 | 45 | body.className = "tool-display-mode__body"; |
46 | 46 |
|
| 47 | + const identityRow = document.createElement("div"); |
| 48 | + identityRow.className = "tool-display-mode__identity-row content-cluster"; |
| 49 | + identityRow.dataset.toolDisplayModeRow = "identity"; |
| 50 | + |
47 | 51 | const character = document.createElement("img"); |
48 | 52 | character.className = "tool-display-mode__character"; |
49 | 53 | character.src = publicImageSource(slot.dataset.toolCharacterSrc, "characters"); |
50 | 54 | character.alt = toolName + " character"; |
51 | | - body.appendChild(character); |
| 55 | + identityRow.appendChild(character); |
52 | 56 |
|
53 | 57 | const description = document.createElement("span"); |
54 | 58 | description.className = "tool-display-mode__description"; |
55 | 59 | description.textContent = toolName; |
56 | | - body.appendChild(description); |
| 60 | + identityRow.appendChild(description); |
| 61 | + body.appendChild(identityRow); |
57 | 62 | displayMode.appendChild(body); |
58 | 63 | slot.replaceWith(displayMode); |
59 | 64 |
|
|
69 | 74 | } |
70 | 75 |
|
71 | 76 | function createNavigationControl(direction, target) { |
72 | | - const controlLabel = direction === "previous" ? "Previous Tool" : "Next Tool"; |
| 77 | + const controlLabel = direction === "previous" ? "Previous" : "Next"; |
73 | 78 | const dataAttribute = direction === "previous" ? "toolNavPrevious" : "toolNavNext"; |
74 | 79 |
|
75 | 80 | if (!target || target.disabled) { |
76 | | - const button = document.createElement("button"); |
77 | | - button.type = "button"; |
78 | | - button.className = "btn"; |
79 | | - button.disabled = true; |
80 | | - button.dataset[dataAttribute] = "disabled"; |
81 | | - button.textContent = controlLabel + ": " + (target?.label || "Unavailable"); |
82 | | - return button; |
| 81 | + const disabledText = document.createElement("span"); |
| 82 | + disabledText.className = "pill"; |
| 83 | + disabledText.dataset[dataAttribute] = "disabled"; |
| 84 | + disabledText.textContent = controlLabel + ": " + (target?.label || "Unavailable"); |
| 85 | + return disabledText; |
83 | 86 | } |
84 | 87 |
|
85 | 88 | const link = document.createElement("a"); |
86 | | - link.className = "btn"; |
| 89 | + link.className = "btn btn-secondary"; |
87 | 90 | link.href = roleAwareHref(target.href); |
88 | 91 | link.dataset[dataAttribute] = target.kind; |
89 | 92 | if (target.group) { |
|
98 | 101 | const registry = await import("/toolbox/toolRegistry.js"); |
99 | 102 | const navigation = registry.getToolNavigationTargets(toolSlug); |
100 | 103 | const navigationRow = document.createElement("nav"); |
101 | | - navigationRow.className = "content-cluster"; |
| 104 | + navigationRow.className = "tool-display-mode__navigation-row content-cluster"; |
| 105 | + navigationRow.dataset.toolDisplayModeRow = "navigation"; |
102 | 106 | navigationRow.setAttribute("aria-label", "Tool build-order navigation"); |
103 | 107 | navigationRow.append( |
104 | 108 | createNavigationControl("previous", navigation.previous), |
|
0 commit comments