Integrate project overview filters and icon actions
Document filter combinations, reset and browser persistence. Keep the search hint applicable before board information fields are introduced. Validation: 20 focused tests, 431 total tests, API/web builds, scripts and Next typechecks, and diff checks passed. GUI retest skipped as authorized based on the colleague's prior testing.
This commit is contained in:
commit
2e223be8b4
11 changed files with 1457 additions and 156 deletions
|
|
@ -381,6 +381,263 @@ a {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Projektübersicht: Icon-Aktionen und einklappbare Filterleisten ─────
|
||||
Aktionen nutzen IconButton/IconLink wie die Stromkreisliste; der Rahmen
|
||||
kommt hier aus dem Kontext `.overview-actions`. Filterleisten folgen der
|
||||
PM-App (Suche + Mehrfachauswahl mit „Alle“ + „Zurücksetzen“), angepasst an
|
||||
die Tokens dieser App. */
|
||||
|
||||
.btn-with-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.overview-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.overview-actions .icon-button {
|
||||
min-width: 1.9rem;
|
||||
min-height: 1.85rem;
|
||||
padding: 0.2rem 0.45rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.overview-actions .icon-button:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.overview-actions .icon-button-primary {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.overview-actions .icon-button-primary:not(:disabled):hover {
|
||||
border-color: var(--color-primary-dark);
|
||||
background: var(--color-primary-dark);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .overview-actions .icon-button-primary {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .overview-actions .icon-button-primary:not(:disabled):hover {
|
||||
border-color: var(--color-accent-pale);
|
||||
background: var(--color-accent-pale);
|
||||
color: var(--color-primary-deep);
|
||||
}
|
||||
|
||||
.overview-actions .icon-button-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
padding: 0.55rem 1rem 0.7rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.filter-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-panel-header .filter-panel-toggle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
color: var(--color-ink-soft);
|
||||
}
|
||||
|
||||
.filter-panel-header .filter-panel-toggle:hover {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.filter-panel-label,
|
||||
.filter-bar-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink-soft);
|
||||
}
|
||||
|
||||
.filter-panel-badge {
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: #fbe9d9;
|
||||
color: var(--color-attention-dark);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .filter-panel-badge {
|
||||
background: #3a2e1c;
|
||||
color: #f0b880;
|
||||
}
|
||||
|
||||
.filter-panel-count {
|
||||
margin-left: auto;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-ink-soft);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: var(--space-sm) var(--space-md);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-bar-field,
|
||||
.filter-dropdown {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-bar-search,
|
||||
.filter-dropdown-toggle {
|
||||
min-height: 2.1rem;
|
||||
padding: 0.35rem 0.65rem;
|
||||
border: 1.5px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.filter-bar-search {
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.filter-bar-search:focus,
|
||||
.filter-dropdown-toggle:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.filter-dropdown-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
min-width: 11em;
|
||||
max-width: 18em;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-dropdown-toggle:hover,
|
||||
.filter-dropdown-toggle.is-active {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.filter-dropdown-toggle.is-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .filter-dropdown-toggle.is-active {
|
||||
color: var(--color-accent-pale);
|
||||
}
|
||||
|
||||
.filter-dropdown-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-dropdown-toggle svg {
|
||||
flex: none;
|
||||
color: var(--color-ink-soft);
|
||||
}
|
||||
|
||||
.filter-dropdown-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 220px;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
border: 1.5px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-bg);
|
||||
box-shadow: 0 6px 20px var(--shadow-menu);
|
||||
}
|
||||
|
||||
.filter-dropdown-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
color: var(--color-ink);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-dropdown-option:hover {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.filter-dropdown-option input {
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.filter-dropdown-option-all {
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.filter-dropdown-empty {
|
||||
padding: 6px 8px;
|
||||
color: var(--color-ink-soft);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.filter-bar .filter-bar-reset {
|
||||
min-height: 2.1rem;
|
||||
padding: 0.3rem 0.65rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── KPI-Kacheln ─────────────────────────────────────────────────────── */
|
||||
|
||||
.kpi-grid {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue