Skip to content

feat(editor): unify SerializeReference window design and keyboard nav #150

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

Merged
VPDPersonal merged 15 commits into from
Jul 23, 2026
Merged

feat(editor): unify SerializeReference window design and keyboard nav #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
980326e
feat(welcome): redesign samples tab to match references card idiom
VPDPersonal Jul 21, 2026
edd0f78
feat(welcome): polish hero, sample state marker and window chrome
VPDPersonal Jul 21, 2026
6d52ccb
feat(welcome): two-state sample dot and unified card transitions
VPDPersonal Jul 22, 2026
219e6c1
style(serialize-references): tie picker chrome to card accent, rebuil…
VPDPersonal Jul 22, 2026
f77b916
feat(serialize-references): add keyboard navigation to project audit
VPDPersonal Jul 22, 2026
6595d1b
style(welcome): align side padding with references tabs
VPDPersonal Jul 22, 2026
be1807e
Merge branch 'main' of github.com:VPDPersonal/Aspid.FastTools into fe…
VPDPersonal Jul 22, 2026
34f4ed8
feat(serialize-references): add copyable text and context menu to audit
VPDPersonal Jul 22, 2026
7c9752b
style(serialize-references): start-elide entry paths instead of wrapping
VPDPersonal Jul 22, 2026
8ce9a58
feat(serialize-references): bring asset graph up to project audit design
VPDPersonal Jul 23, 2026
0d4dfe9
feat(welcome): add keyboard navigation over sample cards
VPDPersonal Jul 23, 2026
1811bb8
feat(serialize-references): redesign settings tab to window design sy…
VPDPersonal Jul 23, 2026
bd64c29
feat(settings): restructure Unity settings pages under Aspid.FastTools
VPDPersonal Jul 23, 2026
e4edc1e
docs(qa): cover window redesign features in QA checklists
VPDPersonal Jul 23, 2026
94b66fa
refactor(window): share keyboard nav-ring + hover-sweep across window…
VPDPersonal Jul 23, 2026
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
14 changes: 14 additions & 0 deletions ...ech.aspid.fasttools/Unity/Editor/Resources/UI/Components/Aspid-FastTools-WindowFooter.uss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,20 @@
color: var(--aspid-colors-text-light);
}

/* The keyboard-ring key, absolutely centred over the whole row (independent of the side links' widths) in the
quietest text tone — present for discoverability, but quieter than the version so it never competes. Click-
transparent from code so the links keep their hits. */
.aspid-fasttools-window-footer__keys {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 11px;
color: var(--aspid-colors-text-darkness);
-unity-text-align: middle-center;
}

/* GitHub link: the signature green, brightening on hover. */
.aspid-fasttools-window-footer__link {
color: var(--aspid-colors-status-success-text-dark);
Expand Down
249 changes: 207 additions & 42 deletions ...asttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss
View file
Open in desktop

Large diffs are not rendered by default.

162 changes: 76 additions & 86 deletions ...r/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,98 @@
/* --- Excluded scan folders list ---
Replaces the multiline "one path per line" TextField with a compact add/remove list. The whole control is a
translucent dark panel (the window's dotted canvas reads through it): folder rows stack over a single add row whose
"+" is pinned to the right edge; while empty the add row carries a dim "No excluded folders" hint instead. Self-
styled from the Aspid palette so it reads the same on the in-window Settings tab and the bare Project Settings page. */

/* The panel: a translucent dark surface framed like the other settings inputs, sized to its content (the folder rows
plus the one add row) rather than a tall fixed box. No inner padding, so the zebra entries fill the frame edge to
edge; overflow:hidden clips their square corners to the panel's rounded frame. */
Replaces the multiline "one path per line" TextField with a compact add/remove list. A flat member of its settings
section card — no frame or fill of its own (the old panel read as a box-in-box inside the glass card): a header row
(caption + dim status hint + a "+" pinned right) over one indented flat row per excluded folder. The header is the
add target and washes green on hover; folder rows lift neutrally and wash red over their ✕ (delete intent). Self-
styled from the Aspid palette so it reads the same on the in-window Settings tab and the Preferences page; on the
branded surfaces the settings sheet adds the storage-scope stripe down the whole control's left edge. */
.aspid-fasttools-excluded-folders {
padding: 0;
overflow: hidden;
border-width: 1px;
margin-bottom: 2px;
}

/* The header row — the flat action-row idiom (the settings rows' geometry): caption left, dim hint and the "+" glyph
pinned right. The whole row is the add click target; its add state (--add, code-toggled so the keyboard ring can
mirror it) lifts the row with the same neutral fill as every other settings row — the green add intent lives on
the "+" glyph alone. */
.aspid-fasttools-excluded-folders__header {
/* Starts 9px in — past the control's scope stripe (3px at the root's edge) plus 6px of clear air — so the
header's lit fill never touches the line; matches the settings rows' backplate inset. */
margin-left: 9px;
flex-direction: row;
align-items: center;
min-height: 26px;
padding: 2px 4px 2px 8px;
border-radius: 8px;
border-color: var(--aspid-colors-shade-dark);
background-color: rgba(20, 20, 20, 0.55);
transition-property: background-color;
transition-duration: 0.25s;
transition-timing-function: ease-out;
}

.aspid-fasttools-excluded-folders__header--add {
background-color: var(--aspid-colors-bg-dark);
}

/* The panel's own header, pulled inside the frame so the caption rides with the list instead of floating above it. A
bold light caption over a hairline divider so it reads as the panel title rather than another list row; its left
inset lines up with the folder paths below. A fixed band height plus middle-left alignment centres the caption
vertically, so the gap above the text matches the gap below it (relying on padding alone leaves the text top-aligned
in its line box and the divider drifts low). */
.aspid-fasttools-excluded-folders__title {
height: 24px;
padding: 0 6px;
/* The caption mirrors the settings rows' captions (same tone, filling the row so the hint and "+" pin right). */
.aspid-fasttools-excluded-folders__header-caption {
flex-grow: 1;
color: var(--aspid-colors-text-light);
-unity-font-style: bold;
-unity-text-align: middle-left;
border-bottom-width: 1px;
border-bottom-color: var(--aspid-colors-shade-darkness);
}

/* Every list entry — each folder row and the persistent add row — is the same shell: a flat full-width element with a
min-height so short and tall entries line up and a left inset matching the header caption. Entries sit flush (no
margin / radius) so their alternating light / dark wash (zebra, applied per-index in code) fills the panel edge to
edge as one continuous stripe block over the dotted canvas. */
.aspid-fasttools-excluded-folders__entry {
flex-direction: row;
align-items: center;
min-height: 24px;
padding: 2px 6px;
/* Dim status hint beside the "+" while no folder is excluded; empty otherwise. */
.aspid-fasttools-excluded-folders__hint {
margin-right: 6px;
color: var(--aspid-colors-text-darkness);
-unity-text-align: middle-right;
}

.aspid-fasttools-excluded-folders__entry--even {
background-color: rgba(255, 255, 255, 0.05);
/* The "+" add glyph, pinned to the right of the header row: a small flat square that leads the row's green wash. */
.aspid-fasttools-excluded-folders__add {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0 2px 0 4px;
padding: 0;
border-width: 0;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0);
color: var(--aspid-colors-text-light);
font-size: 16px;
-unity-text-align: middle-center;
}

.aspid-fasttools-excluded-folders__entry--odd {
background-color: rgba(0, 0, 0, 0.18);
/* While the header is in its add state (hovered or keyboard-focused), the "+" brightens to the signature green so
the glyph leads the green wash. */
.aspid-fasttools-excluded-folders__header--add .aspid-fasttools-excluded-folders__add {
color: var(--aspid-colors-status-success-text-light);
}

/* Full-row hover tints, toggled from code (USS can't repaint a row from a child's hover state). Exactly one is ever
set at a time, so single-class selectors suffice — no specificity juggling against a :hover. Neutral lift signals a
folder row is editable; the whole row turns red when its ✕ is hovered (delete intent) and green over the add row
(add intent). */
.aspid-fasttools-excluded-folders__entry--hover {
background-color: var(--aspid-colors-bg-lightness);
/* Each folder row: a flat indented member under the header (the indent tucks the paths under the caption), the same
radius and 0.25s hover beat as the settings rows. The full-row tints are toggled from code (USS can't repaint a row
from a child's hover state); exactly one is ever set at a time. Neutral lift signals the row is editable; the row
washes red while its ✕ is hovered (delete intent) — the quarter-alpha wash of the settings danger hovers. */
.aspid-fasttools-excluded-folders__entry {
/* The same 9px stripe inset as the header, so a lit folder row stays clear of the line too. */
margin-left: 9px;
flex-direction: row;
align-items: center;
min-height: 22px;
padding: 2px 4px 2px 20px;
border-radius: 8px;
transition-property: background-color;
transition-duration: 0.25s;
transition-timing-function: ease-out;
}

.aspid-fasttools-excluded-folders__entry--danger {
background-color: var(--aspid-colors-status-error-dark);
.aspid-fasttools-excluded-folders__entry--hover {
background-color: var(--aspid-colors-bg-dark);
}

.aspid-fasttools-excluded-folders__entry--add {
background-color: var(--aspid-colors-status-success-dark);
.aspid-fasttools-excluded-folders__entry--danger {
background-color: rgba(125, 35, 35, 0.25);
}

/* min-width:0 lets a long path shrink and ellipsize instead of shoving the remove button off the row; stretching it to
the full row height (with the text kept vertically centred) makes the whole left of the row a click target for
/* min-width:0 lets a long path shrink and ellipsize instead of shoving the remove button off the row; stretching it
to the full row height (with the text kept vertically centred) makes the whole left of the row a click target for
editing, with no dead band above or below the caption. */
.aspid-fasttools-excluded-folders__path {
flex-grow: 1;
Expand All @@ -81,8 +106,8 @@
-unity-text-align: middle-left;
}

/* The ✕ remove: a small flat square, dim at rest; it brightens to the error tone while its row is in the delete state
(see the --danger descendant rule below). */
/* The ✕ remove: a small flat square, dim at rest; it brightens to the error tone while its row is in the delete
state (see the --danger descendant rule below). */
.aspid-fasttools-excluded-folders__remove {
flex-shrink: 0;
width: 18px;
Expand All @@ -103,38 +128,3 @@
background-color: var(--aspid-colors-status-error-light);
color: var(--aspid-colors-status-error-text-light);
}

/* Dim hint shown in the add row while no folder is excluded; it grows to fill the row left of the "+". */
.aspid-fasttools-excluded-folders__hint {
flex-grow: 1;
color: var(--aspid-colors-text-darkness);
-unity-text-align: middle-center;
}

/* The "+" add button, pinned to the right of the add row: a small flat square (just the plus glyph) that picks up the
signature green on hover. Same box size and right margin as the ✕ remove so the "+" lines up directly under the
column of remove crosses above it. */
.aspid-fasttools-excluded-folders__add {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0 2px 0 4px;
padding: 0;
border-width: 0;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0);
color: var(--aspid-colors-text-light);
font-size: 16px;
-unity-text-align: middle-center;
}

/* Hovering the "+" directly boxes it in a brighter green than the row wash — the add-side mirror of the ✕'s red box. */
.aspid-fasttools-excluded-folders__add:hover {
background-color: var(--aspid-colors-status-success-light);
}

/* While the add row is in its add state (hovered anywhere), the "+" brightens to the signature green so the glyph leads
the row's green wash. */
.aspid-fasttools-excluded-folders__entry--add .aspid-fasttools-excluded-folders__add {
color: var(--aspid-colors-status-success-text-light);
}
60 changes: 57 additions & 3 deletions ...ity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,15 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--active:hover

/* Underline accent: a 2px child bar pinned to the tab's bottom edge. Toggling a child's background-color via the
parent's --active class repaints reliably, whereas flipping a border-bottom-color did not redraw until the next
relayout (the underline only appeared after a window resize). A grey baseline marks every (inactive) tab; the
active tab swaps it for the signature green. */
relayout (the underline only appeared after a window resize). Inactive tabs keep only a near-invisible
baseline (the card-border tone) so the active tab's signature green owns the hierarchy. */
.aspid-fasttools-serialize-reference-window__tab-underline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: var(--aspid-colors-shade-light);
background-color: var(--aspid-colors-shade-darkness);
}

Button.aspid-fasttools-serialize-reference-window__toolbar-button--active .aspid-fasttools-serialize-reference-window__tab-underline {
Expand Down Expand Up @@ -147,3 +147,57 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--square:hover
Button.aspid-fasttools-serialize-reference-window__toolbar-button--square.aspid-fasttools-serialize-reference-window__toolbar-button--active .aspid-fasttools-serialize-reference-window__tab-icon {
-unity-background-image-tint-color: var(--aspid-colors-status-success-text-light);
}

/* --- Scrollbar ---
Every vertical scroller in the window re-dressed from Unity's bright default into the window's quiet family: no
step buttons, no track — just a slim translucent thumb that brightens while the scroller is hovered. The settings
sheet mirrors these rules for the Preferences page, which lives outside this window. Scoped to the scroller so no
real slider (a base-slider too) is touched. */
.aspid-fasttools-serialize-reference-window .unity-scroller--vertical {
width: 12px;
margin: 0;
border-width: 0;
background-color: rgba(0, 0, 0, 0);
}

.aspid-fasttools-serialize-reference-window .unity-scroller--vertical > .unity-scroller__low-button,
.aspid-fasttools-serialize-reference-window .unity-scroller--vertical > .unity-scroller__high-button {
display: none;
}

/* With the step buttons gone, the slider re-pins to the scroller's full height (the default offsets reserve room
for them). */
.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-scroller__slider {
margin: 0;
padding: 0;
width: 12px;
min-width: 12px;
top: 0;
bottom: 0;
}

.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__tracker {
border-width: 0;
background-color: rgba(0, 0, 0, 0);
}

/* The thumb: slim, rounded, translucent white so it reads over both the bare canvas and the glass cards; hover
brightens it on the shared 0.25s beat. The default focus halo is dropped with the rest of the chrome. */
.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__dragger {
left: 3px;
width: 6px;
border-width: 0;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.12);
transition-property: background-color;
transition-duration: 0.25s;
transition-timing-function: ease-out;
}

.aspid-fasttools-serialize-reference-window .unity-scroller--vertical:hover .unity-base-slider__dragger {
background-color: rgba(255, 255, 255, 0.28);
}

.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__dragger-border {
display: none;
}
Loading
Loading