mirror/rio
1
0
Fork 0
mirror of https://github.com/rio-labs/rio.git synced 2026-01-05 12:49:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

change color of selected SwitcherBar option

Browse Source
This commit is contained in:
Aran-Fey
2024-06-19 18:42:40 +02:00
parent ab02b9406e
commit 6337e772ec
2 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/code/components/switcherBar.ts
View File

@@ -19,6 +19,7 @@ export class SwitcherBarComponent extends ComponentBase {
private optionsContainer: HTMLElement;
private markerElement: HTMLElement;
private selectedOptionElement: HTMLElement | null = null;
createElement(): HTMLElement {
// Create the elements
@@ -54,6 +55,12 @@ export class SwitcherBarComponent extends ComponentBase {
deltaState.names ?? this.state.names,
deltaState.icon_svg_sources ?? this.state.icon_svg_sources
);
// Make sure the newly created option element is properly selected
this.selectedOptionElement = null;
if (deltaState.selectedName === undefined) {
deltaState.selectedName = this.state.selectedName;
}
}
// Color
@@ -66,10 +73,8 @@ export class SwitcherBarComponent extends ComponentBase {
// Orientation
if (deltaState.orientation !== undefined) {
let flexDirection =
this.optionsContainer.style.flexDirection =
deltaState.orientation == 'vertical' ? 'column' : 'row';
this.optionsContainer.style.flexDirection = flexDirection;
}
// Spacing
@@ -80,12 +85,12 @@ export class SwitcherBarComponent extends ComponentBase {
// If the selection has changed make sure to move the marker
if (deltaState.selectedName !== undefined) {
if (deltaState.selectedName === null) {
this.moveMarkerTo(null);
this.select(null);
} else {
let i = (deltaState.names ?? this.state.names).indexOf(
deltaState.selectedName
);
this.moveMarkerTo(i);
this.select(i);
}
}
}
@@ -128,13 +133,13 @@ export class SwitcherBarComponent extends ComponentBase {
if (this.state.selectedName === name) {
if (this.state.allow_none) {
this.state.selectedName = null;
this.moveMarkerTo(null);
this.select(null);
} else {
return;
}
} else {
this.state.selectedName = name;
this.moveMarkerTo(index);
this.select(index);
}
// Notify the backend
@@ -149,14 +154,25 @@ export class SwitcherBarComponent extends ComponentBase {
return optionElement;
}
private moveMarkerTo(index: number | null): void {
private select(index: number | null): void {
if (this.selectedOptionElement !== null) {
this.selectedOptionElement.classList.remove('selected');
}
if (index === null) {
this.selectedOptionElement = null;
this.markerElement.style.width = '0';
this.markerElement.style.height = '0';
return;
}
let optionElement = this.optionsContainer.children[index];
let optionElement = this.optionsContainer.children[
index
] as HTMLElement;
optionElement.classList.add('selected');
this.selectedOptionElement = optionElement;
let optionRect = optionElement.getBoundingClientRect();
let containerRect = this.optionsContainer.getBoundingClientRect();

9
frontend/css/style.scss
View File

@@ -2097,13 +2097,20 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
color: var(--rio-local-text-color);
transition: background-color 0.1s ease-out;
transition:
background-color 0.1s ease-out,
color 0.1s ease-out;
}
.rio-switcher-bar-option:hover {
background-color: var(--rio-local-bg-active);
}
.rio-switcher-bar-option.selected {
// This matches the primary-bg used by the marker
color: var(--rio-global-primary-fg);
}
.rio-switcher-bar-option > svg {
width: 1.8rem;
height: 1.8rem;