Skip to content

Commit f117f22

Browse files
ToolboxAidToolboxAid
committed
Wire account controls grouping theme selection and accordion polish - PR_26152_002-controls-theme-wiring
1 parent 6dd5015 commit f117f22

4 files changed

Lines changed: 154 additions & 22 deletions

File tree

‎GameFoundryStudio/account/controls.html‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,21 @@ <h1 class="controls-title">Controls.</h1>
3535
<div class="kicker">HTML controls</div>
3636
<h2>Everyday controls with branded side colors.</h2>
3737
</div>
38-
<p>Each panel uses a left-side accent color so controls can be grouped by purpose across Game
39-
Foundry Studio.</p>
38+
<div class="field">
39+
<label for="control-theme">Preview grouping</label>
40+
<select id="control-theme" data-controls-theme-select>
41+
<option value="tool-group-build-create">Build &amp; Create</option>
42+
<option value="tool-group-content-assets">Content &amp; Assets</option>
43+
<option value="tool-group-media-audio">Media &amp; Audio</option>
44+
<option value="tool-group-ai-learning">AI &amp; Learning</option>
45+
<option value="tool-group-platform-cloud">Platform &amp; Cloud</option>
46+
<option value="tool-group-development-system">Development &amp; System</option>
47+
<option value="tool-group-community-marketplace">Community &amp; Marketplace</option>
48+
<option value="tool-group-play">Play</option>
49+
</select>
50+
</div>
4051
</div>
41-
<div class="control-lab">
52+
<div class="control-lab tool-group-build-create" data-controls-preview>
4253
<article class="control-card side-orange">
4354
<h3>Text Inputs</h3>
4455
<p>Names, slugs, paths, labels, and short values.</p>
@@ -78,10 +89,16 @@ <h3>Switches</h3>
7889
<article class="control-card side-blue">
7990
<h3>Selects</h3>
8091
<p>Single-choice dropdowns for theme, engine mode, and tool role.</p>
81-
<div class="control-demo"><label for="select">Select</label><select id="select">
82-
<option>Forge Dark</option>
83-
<option>Molten Orange</option>
84-
<option>Cloud Blue</option>
92+
<div class="control-demo"><label for="select">Select</label><select id="select"
93+
data-controls-theme-select>
94+
<option value="tool-group-build-create">Build &amp; Create</option>
95+
<option value="tool-group-content-assets">Content &amp; Assets</option>
96+
<option value="tool-group-media-audio">Media &amp; Audio</option>
97+
<option value="tool-group-ai-learning">AI &amp; Learning</option>
98+
<option value="tool-group-platform-cloud">Platform &amp; Cloud</option>
99+
<option value="tool-group-development-system">Development &amp; System</option>
100+
<option value="tool-group-community-marketplace">Community &amp; Marketplace</option>
101+
<option value="tool-group-play">Play</option>
85102
</select></div>
86103
</article>
87104
</div>
@@ -90,6 +107,7 @@ <h3>Selects</h3>
90107
</main>
91108
<div data-partial="footer"></div>
92109
<script src="../assets/js/gamefoundry-partials.js" defer></script>
110+
<script src="../assets/js/account-controls.js" defer></script>
93111
</body>
94112

95113
</html>

‎GameFoundryStudio/assets/css/gamefoundrystudio.css‎

Lines changed: 106 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,40 @@
394394
transform: translateX(22px)
395395
}
396396

397+
.control-lab[class*="tool-group-"] .control-card {
398+
--accent: var(--tool-group-color);
399+
border-color: var(--tool-group-accent)
400+
}
401+
402+
.control-lab[class*="tool-group-"] input[type="checkbox"],
403+
.control-lab[class*="tool-group-"] input[type="radio"],
404+
.control-lab[class*="tool-group-"] input[type="range"] {
405+
accent-color: var(--tool-group-color)
406+
}
407+
408+
.control-lab[class*="tool-group-"] input[type="range"]::-webkit-slider-thumb {
409+
background: var(--tool-group-color);
410+
border-color: var(--tool-group-accent)
411+
}
412+
413+
.control-lab[class*="tool-group-"] input[type="range"]::-moz-range-thumb {
414+
background: var(--tool-group-color);
415+
border-color: var(--tool-group-accent)
416+
}
417+
418+
.control-lab[class*="tool-group-"] input[type="range"]::-webkit-slider-runnable-track {
419+
border-color: var(--tool-group-accent)
420+
}
421+
422+
.control-lab[class*="tool-group-"] input[type="range"]::-moz-range-track {
423+
border-color: var(--tool-group-accent)
424+
}
425+
426+
.control-lab[class*="tool-group-"] .switch input:checked+.slider {
427+
background: color-mix(in srgb, var(--tool-group-color) 70%, var(--panel));
428+
border-color: var(--tool-group-accent)
429+
}
430+
397431
.control-fieldset {
398432
border: 1px solid var(--line);
399433
border-radius: 14px;
@@ -435,20 +469,32 @@ details.vertical-accordion summary::-webkit-details-marker {
435469
}
436470

437471
details.vertical-accordion summary:after {
438-
content: "⌄";
439-
width: 24px;
440-
height: 24px;
472+
content: "";
473+
width: 20px;
474+
height: 20px;
441475
border: 1px solid var(--line);
442476
border-radius: 999px;
443477
background: var(--panel-soft);
444478
color: var(--gold);
445479
display: inline-grid;
446480
place-items: center;
447-
flex: 0 0 auto
481+
flex: 0 0 auto;
482+
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
483+
background-position: calc(50% - 3.5px) 50%, calc(50% + 3.5px) 50%;
484+
background-size: 7px 7px;
485+
background-repeat: no-repeat
448486
}
449487

450488
details.vertical-accordion[open] summary:after {
451-
content: "⌃"
489+
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
490+
}
491+
492+
details.vertical-accordion summary:active:after {
493+
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
494+
}
495+
496+
details.vertical-accordion[open] summary:active:after {
497+
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
452498
}
453499

454500
.accordion-body {
@@ -459,11 +505,45 @@ details.vertical-accordion[open] summary:after {
459505

460506
.horizontal-accordion-toggle {
461507
margin-left: auto;
462-
min-width: 34px;
463-
width: 34px;
464-
height: 34px;
508+
min-width: 20px;
509+
width: 20px;
510+
height: 20px;
465511
padding: 0;
466-
border-radius: 999px
512+
border-radius: 999px;
513+
background: var(--panel-soft);
514+
color: var(--gold);
515+
line-height: 1;
516+
font-size: 0;
517+
overflow: hidden;
518+
position: relative
519+
}
520+
521+
.horizontal-accordion-toggle:before {
522+
content: "";
523+
position: absolute;
524+
top: 50%;
525+
left: 50%;
526+
width: 14px;
527+
height: 14px;
528+
background: currentColor;
529+
clip-path: polygon(70% 50%, 30% 20%, 30% 80%);
530+
transform-origin: center
531+
}
532+
533+
.horizontal-accordion-toggle[aria-expanded="true"]:before {
534+
transform: translate(-50%, -50%)
535+
}
536+
537+
.horizontal-accordion-toggle[aria-expanded="false"]:before {
538+
transform: translate(-50%, -50%) rotate(180deg)
539+
}
540+
541+
.horizontal-accordion-toggle--left[aria-expanded="true"]:before {
542+
transform: translate(-50%, -50%) rotate(180deg)
543+
}
544+
545+
.horizontal-accordion-toggle--left[aria-expanded="false"]:before {
546+
transform: translate(-50%, -50%)
467547
}
468548

469549
.tool-workspace {
@@ -627,20 +707,32 @@ body[class*="tool-group-"] details.vertical-accordion summary:after {
627707
}
628708

629709
.tool-display-mode summary:after {
630-
content: "⌄";
631-
width: 24px;
632-
height: 24px;
710+
content: "";
711+
width: 20px;
712+
height: 20px;
633713
border: 1px solid var(--meaning-border, var(--line));
634714
border-radius: 999px;
635715
background: var(--panel-soft);
636716
color: var(--meaning-color, var(--gold));
637717
display: inline-grid;
638718
place-items: center;
639-
flex: 0 0 auto
719+
flex: 0 0 auto;
720+
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
721+
background-position: calc(50% - 3.5px) 50%, calc(50% + 3.5px) 50%;
722+
background-size: 7px 7px;
723+
background-repeat: no-repeat
640724
}
641725

642726
.tool-display-mode[open] summary:after {
643-
content: "⌃"
727+
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
728+
}
729+
730+
.tool-display-mode summary:active:after {
731+
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
732+
}
733+
734+
.tool-display-mode[open] summary:active:after {
735+
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
644736
}
645737

646738
.tool-display-mode__badge {

‎GameFoundryStudio/assets/js/account-controls.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
(function () {
2+
const selects = Array.from(document.querySelectorAll("[data-controls-theme-select]"));
3+
const preview = document.querySelector("[data-controls-preview]");
4+
if (!selects.length || !preview) return;
5+
6+
const groups = Array.from(selects[0].options).map((option) => option.value);
7+
8+
function applyTheme(selectedValue) {
9+
groups.forEach((group) => preview.classList.remove(group));
10+
preview.classList.add(selectedValue);
11+
selects.forEach((select) => {
12+
select.value = selectedValue;
13+
});
14+
}
15+
16+
selects.forEach((select) => {
17+
select.addEventListener("change", function () {
18+
applyTheme(select.value);
19+
});
20+
});
21+
applyTheme(selects[0].value);
22+
}());

‎GameFoundryStudio/assets/js/tool-display-mode.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
const label = title ? title.textContent.trim() : "Tool column";
108108
const button = document.createElement("button");
109109
button.type = "button";
110-
button.className = "horizontal-accordion-toggle";
110+
button.className = "horizontal-accordion-toggle horizontal-accordion-toggle--" + entry.side;
111111
button.setAttribute("aria-label", "Collapse " + label);
112112
button.setAttribute("aria-expanded", "true");
113113
button.textContent = entry.openIndicator;

0 commit comments

Comments
 (0)