5145e609cc
Add operator controls to the Command Center overview and reuse a shared theme dropdown. - Add Command Center controls for org chart status, pause toggles, heartbeat, concurrency settings, and theme selection. - Extract theme option metadata and a reusable ThemeDropdown for app-level and Command Center theme controls. - Update localization, documentation, and dashboard tests for the new controls and mobile layout behavior. Files changed: docs/dashboard-guide.md | 1 + docs/settings-reference.md | 6 +- packages/dashboard/app/App.tsx | 8 +- .../dashboard/app/components/ThemeDropdown.css | 96 +++++ .../dashboard/app/components/ThemeDropdown.tsx | 175 +++++++++ .../dashboard/app/components/ThemeSelector.tsx | 65 +--- .../components/__tests__/ThemeDropdown.test.tsx | 76 ++++ .../components/__tests__/ThemeSelector.test.tsx | 18 + .../components/command-center/CommandCenter.tsx | 52 ++- .../command-center/CommandCenterControls.css | 193 ++++++++++ .../command-center/CommandCenterControls.tsx | 424 +++++++++++++++++++++ .../__tests__/CommandCenter.mobile-scroll.test.tsx | 17 + .../__tests__/CommandCenter.test.tsx | 26 +- .../__tests__/CommandCenterControls.test.tsx | 241 ++++++++++++ packages/dashboard/app/components/themeOptions.ts | 70 ++++ packages/i18n/locales/en/app.json | 47 +++ 16 files changed, 1442 insertions(+), 73 deletions(-) Fusion-Task-Id: FN-6727 Fusion-Task-Lineage: bd7752cf-9f6e-4359-a5bc-d2a4b68d086b
97 lines
2.0 KiB
CSS
97 lines
2.0 KiB
CSS
.theme-dropdown {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.theme-dropdown-trigger {
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.theme-dropdown-trigger .theme-option-swatch,
|
|
.theme-dropdown-option .theme-option-swatch {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.theme-dropdown-trigger-label,
|
|
.theme-dropdown-option-label {
|
|
min-inline-size: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.theme-dropdown-modes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.theme-dropdown-mode-btn {
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.theme-dropdown-mode-btn.active {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.theme-dropdown-popover {
|
|
position: absolute;
|
|
z-index: 10;
|
|
inset-block-start: calc(100% + var(--space-xs));
|
|
inset-inline: 0;
|
|
padding: var(--space-sm);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-1);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.theme-dropdown-list {
|
|
display: grid;
|
|
gap: var(--space-xs);
|
|
max-block-size: min(60vh, calc(var(--space-2xl) * 12));
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.theme-dropdown-option {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
inline-size: 100%;
|
|
padding: var(--space-sm);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
text-align: start;
|
|
}
|
|
|
|
.theme-dropdown-option:hover,
|
|
.theme-dropdown-option:focus-visible,
|
|
.theme-dropdown-option.active {
|
|
border-color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.theme-dropdown-popover {
|
|
position: static;
|
|
margin-block-start: var(--space-xs);
|
|
}
|
|
|
|
.theme-dropdown-list {
|
|
max-block-size: min(50vh, calc(var(--space-2xl) * 10));
|
|
}
|
|
}
|