Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance service detail UI with improved select and color controls

Browse source 
Refactors select dropdown functionality to use custom implementation
Adds color dot support for color selection
Improves keyboard navigation and interaction for select dropdowns

Modernizes UI components with more flexible and interactive controls
This commit is contained in:
Janus C. H. Knudsen 2026-01-16 23:25:05 +01:00
parent 120367acbb
commit e9f3639c7c
5 changed files with 154 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

48
PlanTempus.Application/wwwroot/css/controls.css
View file

@ -183,11 +183,11 @@ swp-notification-intro {
}
/* ===========================================
SELECT DROPDOWN (Popover API)
SELECT DROPDOWN
=========================================== */
swp-select {
position: relative;
display: inline-block;
display: block;
}
swp-select button {
@ -202,8 +202,7 @@ swp-select button {
border: 1px solid transparent;
cursor: pointer;
transition: all 150ms ease;
min-width: 160px;
anchor-name: --select-trigger;
width: 100%;
&:hover {
background: var(--color-background);
@ -227,35 +226,37 @@ swp-select button i {
transition: transform 150ms ease;
}
swp-select button[aria-expanded="true"] i {
swp-select.open button i {
transform: rotate(180deg);
}
swp-select [popover] {
swp-select-dropdown {
display: none;
position: absolute;
position-anchor: --select-trigger;
top: anchor(bottom);
left: anchor(left);
margin: var(--spacing-1) 0 0 0;
top: 100%;
left: 0;
z-index: 100;
margin-top: var(--spacing-1);
padding: var(--spacing-2);
min-width: 100%;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
min-width: anchor-size(width);
max-height: 280px;
overflow-y: auto;
}
swp-select [popover]:popover-open {
display: flex;
flex-direction: column;
gap: 2px;
}
swp-select.open swp-select-dropdown {
display: flex;
}
swp-select-option {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--radius-sm);
cursor: pointer;
@ -272,4 +273,21 @@ swp-select-option {
font-weight: var(--font-weight-medium);
color: var(--color-teal);
}
&.highlighted {
background: var(--color-background-alt);
outline: 2px solid var(--color-teal);
outline-offset: -2px;
}
}
/* ===========================================
COLOR DOT (for color pickers)
=========================================== */
swp-color-dot {
width: 18px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
background: var(--b-primary);
}