feat(ui): add SelectMenu component and replace native selects
Introduce a reusable SelectMenu component and replace native select controls across the UI. This centralizes select behavior and styling, enabling grouped options, placeholders, and a consistent popup interaction. Add comprehensive CSS and light-theme tweaks, and update rebase action styling to integrate the new control. - Add a unified SelectMenu component and wire change handlers. - Implement .select-menu styles, popup behavior, and theme overrides. - Replace ad-hoc native selects in dialogs and rebase UI for consistency.
This commit is contained in:
+126
-5
@@ -225,6 +225,107 @@
|
||||
|
||||
.btn-sm { min-height: 26px; padding: 0 8px; font-size: 12px; }
|
||||
|
||||
.select-menu { position: relative; width: 100%; min-width: 0; }
|
||||
.select-menu-trigger {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
min-height: 34px;
|
||||
padding: 0 9px 0 11px;
|
||||
border: 1px solid var(--color-border-input);
|
||||
border-radius: 6px;
|
||||
color: var(--color-ink);
|
||||
background: var(--color-surface-raised);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
.select-menu-value { display: flex; align-items: center; min-width: 0; gap: 7px; overflow: hidden; }
|
||||
.select-menu-value > span { overflow: hidden; color: var(--color-ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.select-menu-value > small {
|
||||
flex: 0 0 auto;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
|
||||
border-radius: 4px;
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 9%, transparent);
|
||||
font-size: 9px;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.select-menu-value.placeholder > span { color: var(--color-ink-muted); font-weight: 600; }
|
||||
.select-menu-trigger svg { color: var(--color-ink-faint); transition: transform 120ms ease; }
|
||||
.select-menu.open .select-menu-trigger {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(90, 140, 248, 0.18);
|
||||
}
|
||||
.select-menu.open .select-menu-trigger svg { transform: rotate(180deg); }
|
||||
.select-menu-popup {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-surface-solid);
|
||||
box-shadow: 0 18px 50px rgba(0,0,0,0.5);
|
||||
}
|
||||
.select-menu-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 5px 3px 2px;
|
||||
padding: 7px 5px 5px;
|
||||
border-top: 1px solid var(--color-border-subtle);
|
||||
color: var(--color-accent);
|
||||
font-size: 10.5px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.065em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.select-menu-group:first-child { margin-top: 0; border-top: 0; }
|
||||
.select-menu-group small {
|
||||
min-width: 18px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 999px;
|
||||
color: var(--color-ink);
|
||||
background: var(--color-surface-hover);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.select-menu-option {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 14px;
|
||||
align-items: center;
|
||||
justify-content: initial;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 6px 8px;
|
||||
border-color: transparent;
|
||||
border-radius: 6px;
|
||||
color: var(--color-ink);
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
text-align: left;
|
||||
}
|
||||
.select-menu-option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.select-menu-option svg { color: var(--color-primary); }
|
||||
.select-menu-option:hover:not(:disabled), .select-menu-option.active:not(:disabled) {
|
||||
border-color: var(--color-border-subtle);
|
||||
color: var(--color-ink);
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.select-menu-option.selected { color: var(--color-ink); }
|
||||
.select-menu-option:disabled { cursor: not-allowed; opacity: 0.42; }
|
||||
|
||||
.compare-target-select .select-menu-trigger { height: 40px; min-height: 40px; }
|
||||
|
||||
.btn-primary {
|
||||
border-color: rgba(111, 140, 255, 0.72);
|
||||
color: #ffffff;
|
||||
@@ -3463,11 +3564,12 @@
|
||||
border-radius: 5px;
|
||||
background: var(--code-surface-subtle);
|
||||
}
|
||||
.rebase-action { height: 30px; font-family: var(--font-mono); font-weight: 800; }
|
||||
.rebase-action.pick { color: var(--code-add-strong); }
|
||||
.rebase-action.reword { color: var(--code-hunk-text); }
|
||||
.rebase-action.squash, .rebase-action.fixup { color: #96620f; }
|
||||
.rebase-action.drop { color: var(--code-delete-strong); }
|
||||
.rebase-action { font-family: var(--font-mono); font-weight: 800; }
|
||||
.rebase-action .select-menu-trigger { height: 30px; min-height: 30px; font-family: inherit; font-weight: inherit; }
|
||||
.rebase-action.pick .select-menu-trigger { color: var(--code-add-strong); }
|
||||
.rebase-action.reword .select-menu-trigger { color: var(--code-hunk-text); }
|
||||
.rebase-action.squash .select-menu-trigger, .rebase-action.fixup .select-menu-trigger { color: #96620f; }
|
||||
.rebase-action.drop .select-menu-trigger { color: var(--code-delete-strong); }
|
||||
.rebase-plan-row > code { color: var(--color-accent); font-family: var(--font-mono); font-size: 11px; font-weight: 800; }
|
||||
.rebase-commit-copy { display: grid; gap: 3px; min-width: 0; }
|
||||
.rebase-commit-copy strong { overflow: hidden; color: var(--color-ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
@@ -6512,6 +6614,25 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
|
||||
box-shadow: 0 18px 50px rgba(28,44,74,0.18);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .select-menu-popup {
|
||||
box-shadow: 0 18px 50px rgba(28,44,74,0.18);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .select-menu-value > span,
|
||||
:root[data-theme="light"] .select-menu-option,
|
||||
:root[data-theme="light"] .select-menu-option.selected {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .select-menu-value.placeholder > span {
|
||||
color: var(--color-ink-muted);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .select-menu-option:hover:not(:disabled),
|
||||
:root[data-theme="light"] .select-menu-option.active:not(:disabled) {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .dialog-file-row:hover,
|
||||
:root[data-theme="light"] .branch-row:hover,
|
||||
:root[data-theme="light"] .explorer-row:hover,
|
||||
|
||||
Reference in New Issue
Block a user