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

10
PlanTempus.Application/wwwroot/css/cash.css
View file

@ -655,19 +655,9 @@ swp-auto-id {
=========================================== */
swp-note-field {
textarea {
width: 100%;
min-height: 80px;
padding: var(--spacing-6);
font-size: var(--font-size-base);
font-family: var(--font-family);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
resize: vertical;
&:focus {
outline: none;
border-color: var(--color-teal);
}
}
}

50
PlanTempus.Application/wwwroot/css/components.css
View file

@ -678,6 +678,34 @@ swp-user-email {
/* ===========================================
FORM INPUTS (shared base styling)
=========================================== */
/* Global textarea styling */
textarea {
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
font-size: var(--font-size-base);
font-family: var(--font-family);
color: var(--color-text);
background: var(--color-background-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
resize: vertical;
&::placeholder {
color: var(--color-text-muted);
}
&:hover {
background: var(--color-background);
}
&:focus {
outline: none;
background: var(--color-surface);
border-color: var(--color-teal);
}
}
swp-form-group {
display: flex;
flex-direction: column;
@ -861,28 +889,6 @@ swp-form-input {
}
}
/* Textarea */
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: 6px;
font-size: 14px;
font-family: var(--font-family);
color: var(--color-text);
background: var(--color-surface);
resize: vertical;
&::placeholder {
color: var(--color-text-muted);
}
&:focus {
outline: none;
border-color: var(--color-teal);
}
}
/* Date range inputs */
swp-date-range {
display: flex;

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);
}