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

50
PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml
View file

@ -14,44 +14,45 @@
<swp-edit-row>
<swp-edit-label>@Model.LabelCategory</swp-edit-label>
<swp-select data-value="@Model.CategoryValue">
<button type="button" popovertarget="category-select" aria-expanded="false">
<button type="button" aria-expanded="false">
<swp-select-value>@Model.Category</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<div popover id="category-select">
<swp-select-dropdown>
<swp-select-option data-value="kombi" class="@(Model.CategoryValue == "kombi" ? "selected" : "")">Kombi-behandlinger</swp-select-option>
<swp-select-option data-value="klip" class="@(Model.CategoryValue == "klip" ? "selected" : "")">Klip</swp-select-option>
<swp-select-option data-value="farve" class="@(Model.CategoryValue == "farve" ? "selected" : "")">Farve</swp-select-option>
<swp-select-option data-value="behandlinger" class="@(Model.CategoryValue == "behandlinger" ? "selected" : "")">Behandlinger</swp-select-option>
<swp-select-option data-value="styling" class="@(Model.CategoryValue == "styling" ? "selected" : "")">Styling</swp-select-option>
</div>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelCalendarColor</swp-edit-label>
<swp-select data-value="@Model.CalendarColor">
<button type="button" popovertarget="color-select" aria-expanded="false">
<button type="button" aria-expanded="false">
<swp-color-dot class="is-@Model.CalendarColor"></swp-color-dot>
<swp-select-value>@Model.CalendarColorLabel</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<div popover id="color-select">
<swp-select-option data-value="red" class="@(Model.CalendarColor == "red" ? "selected" : "")">Rød</swp-select-option>
<swp-select-option data-value="pink" class="@(Model.CalendarColor == "pink" ? "selected" : "")">Pink</swp-select-option>
<swp-select-option data-value="purple" class="@(Model.CalendarColor == "purple" ? "selected" : "")">Lilla</swp-select-option>
<swp-select-option data-value="deep-purple" class="@(Model.CalendarColor == "deep-purple" ? "selected" : "")">Mørk lilla</swp-select-option>
<swp-select-option data-value="indigo" class="@(Model.CalendarColor == "indigo" ? "selected" : "")">Indigo</swp-select-option>
<swp-select-option data-value="blue" class="@(Model.CalendarColor == "blue" ? "selected" : "")">Blå</swp-select-option>
<swp-select-option data-value="light-blue" class="@(Model.CalendarColor == "light-blue" ? "selected" : "")">Lyseblå</swp-select-option>
<swp-select-option data-value="cyan" class="@(Model.CalendarColor == "cyan" ? "selected" : "")">Cyan</swp-select-option>
<swp-select-option data-value="teal" class="@(Model.CalendarColor == "teal" ? "selected" : "")">Teal</swp-select-option>
<swp-select-option data-value="green" class="@(Model.CalendarColor == "green" ? "selected" : "")">Grøn</swp-select-option>
<swp-select-option data-value="light-green" class="@(Model.CalendarColor == "light-green" ? "selected" : "")">Lysegrøn</swp-select-option>
<swp-select-option data-value="lime" class="@(Model.CalendarColor == "lime" ? "selected" : "")">Lime</swp-select-option>
<swp-select-option data-value="yellow" class="@(Model.CalendarColor == "yellow" ? "selected" : "")">Gul</swp-select-option>
<swp-select-option data-value="amber" class="@(Model.CalendarColor == "amber" ? "selected" : "")">Amber</swp-select-option>
<swp-select-option data-value="orange" class="@(Model.CalendarColor == "orange" ? "selected" : "")">Orange</swp-select-option>
<swp-select-option data-value="deep-orange" class="@(Model.CalendarColor == "deep-orange" ? "selected" : "")">Mørk orange</swp-select-option>
</div>
<swp-select-dropdown>
<swp-select-option data-value="red" class="@(Model.CalendarColor == "red" ? "selected" : "")"><swp-color-dot class="is-red"></swp-color-dot><span>Rød</span></swp-select-option>
<swp-select-option data-value="pink" class="@(Model.CalendarColor == "pink" ? "selected" : "")"><swp-color-dot class="is-pink"></swp-color-dot><span>Pink</span></swp-select-option>
<swp-select-option data-value="purple" class="@(Model.CalendarColor == "purple" ? "selected" : "")"><swp-color-dot class="is-purple"></swp-color-dot><span>Lilla</span></swp-select-option>
<swp-select-option data-value="deep-purple" class="@(Model.CalendarColor == "deep-purple" ? "selected" : "")"><swp-color-dot class="is-deep-purple"></swp-color-dot><span>Mørk lilla</span></swp-select-option>
<swp-select-option data-value="indigo" class="@(Model.CalendarColor == "indigo" ? "selected" : "")"><swp-color-dot class="is-indigo"></swp-color-dot><span>Indigo</span></swp-select-option>
<swp-select-option data-value="blue" class="@(Model.CalendarColor == "blue" ? "selected" : "")"><swp-color-dot class="is-blue"></swp-color-dot><span>Blå</span></swp-select-option>
<swp-select-option data-value="light-blue" class="@(Model.CalendarColor == "light-blue" ? "selected" : "")"><swp-color-dot class="is-light-blue"></swp-color-dot><span>Lyseblå</span></swp-select-option>
<swp-select-option data-value="cyan" class="@(Model.CalendarColor == "cyan" ? "selected" : "")"><swp-color-dot class="is-cyan"></swp-color-dot><span>Cyan</span></swp-select-option>
<swp-select-option data-value="teal" class="@(Model.CalendarColor == "teal" ? "selected" : "")"><swp-color-dot class="is-teal"></swp-color-dot><span>Teal</span></swp-select-option>
<swp-select-option data-value="green" class="@(Model.CalendarColor == "green" ? "selected" : "")"><swp-color-dot class="is-green"></swp-color-dot><span>Grøn</span></swp-select-option>
<swp-select-option data-value="light-green" class="@(Model.CalendarColor == "light-green" ? "selected" : "")"><swp-color-dot class="is-light-green"></swp-color-dot><span>Lysegrøn</span></swp-select-option>
<swp-select-option data-value="lime" class="@(Model.CalendarColor == "lime" ? "selected" : "")"><swp-color-dot class="is-lime"></swp-color-dot><span>Lime</span></swp-select-option>
<swp-select-option data-value="yellow" class="@(Model.CalendarColor == "yellow" ? "selected" : "")"><swp-color-dot class="is-yellow"></swp-color-dot><span>Gul</span></swp-select-option>
<swp-select-option data-value="amber" class="@(Model.CalendarColor == "amber" ? "selected" : "")"><swp-color-dot class="is-amber"></swp-color-dot><span>Amber</span></swp-select-option>
<swp-select-option data-value="orange" class="@(Model.CalendarColor == "orange" ? "selected" : "")"><swp-color-dot class="is-orange"></swp-color-dot><span>Orange</span></swp-select-option>
<swp-select-option data-value="deep-orange" class="@(Model.CalendarColor == "deep-orange" ? "selected" : "")"><swp-color-dot class="is-deep-orange"></swp-color-dot><span>Mørk orange</span></swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
@ -123,7 +124,10 @@
<textarea id="description" rows="4">@Model.Description</textarea>
<swp-section-label class="spaced">@Model.LabelImage</swp-section-label>
<swp-btn class="secondary">@Model.LabelUploadImage</swp-btn>
<swp-add-button>
<i class="ph ph-upload-simple"></i>
@Model.LabelUploadImage
</swp-add-button>
</swp-card>
</div>
</swp-detail-grid>