From 8ed3c25f598d74fb71b61ed49ef8ad32e3f1ef5d Mon Sep 17 00:00:00 2001
From: Titouan BOUETE-GIRAUD <titouan.bouete-giraud@artal.fr>
Date: Fri, 10 Nov 2023 16:51:49 +0100
Subject: [PATCH] Cleaned up css class declaration
---
ivette/src/renderer/Sidebar.tsx | 77 +++++++++++++--------------------
ivette/src/renderer/style.css | 5 ++-
2 files changed, 33 insertions(+), 49 deletions(-)
diff --git a/ivette/src/renderer/Sidebar.tsx b/ivette/src/renderer/Sidebar.tsx
index 7391cda15d7..f27b3383a53 100644
--- a/ivette/src/renderer/Sidebar.tsx
+++ b/ivette/src/renderer/Sidebar.tsx
@@ -42,49 +42,37 @@ interface SelectorProps extends SidebarProps {
}
function Selector(props: SelectorProps): JSX.Element {
- const { id, iconPath, setSelected, label, title } = props;
-
- const classNameSelector = classes(
+ const { id, iconPath, selected, setSelected, label, title } = props;
+ const className = classes(
'sidebar-selector',
'dome-color-frame',
- );
-
- const classNameSelectorIcon = classes(
- 'sidebar-selector-icon'
- );
-
- const classNameSelectorLabel = classes(
- 'sidebar-selector-label'
- );
+ selected === id ? 'sidebar-selector-selected' : ''
+ );
return (
- <>
- <div className={classNameSelector}>
- {iconPath ?
- <img
- className={classNameSelectorIcon}
- id={id}
- src={iconPath}
- alt={label}
- title={title}
- onClick={
- () => setSelected(id)
- }
- />
- :
- <label
- className={classNameSelectorLabel}
- id={id}
- onClick={
- () => setSelected(id)
- }
- >
- {label.slice(0, 4).toLocaleUpperCase()}
- </label>
+ <div className={className}>
+ {iconPath ?
+ <img
+ className="sidebar-selector-icon"
+ src={iconPath}
+ alt={label}
+ title={title}
+ onClick={
+ () => setSelected(id)
}
- <br/>
- </div>
- </>
+ />
+ :
+ <label
+ className="sidebar-selector-label"
+ onClick={
+ () => setSelected(id)
+ }
+ >
+ {label.slice(0, 4).toLocaleUpperCase()}
+ </label>
+ }
+ <br/>
+ </div>
);
}
@@ -113,13 +101,6 @@ function Wrapper(props: WrapperProps): JSX.Element {
/* -------------------------------------------------------------------------- */
export function Panel(): JSX.Element {
- const classNameRuler = classes(
- 'sidebar-ruler',
- );
- const classNameItems = classes(
- 'sidebar-items',
- 'dome-color-frame',
- );
const [selected, setSelected] =
Dome.useStringSettings('ivette.sidebar.selected');
const sidebars = Ext.useElements(SIDEBAR);
@@ -139,10 +120,10 @@ export function Panel(): JSX.Element {
));
return (
- <div className={classNameRuler}>
- <ul className={classNameItems}>
+ <div className="sidebar-ruler">
+ <div className="sidebar-items dome-color-frame">
{items}
- </ul>
+ </div>
{wrappers}
</div>
);
diff --git a/ivette/src/renderer/style.css b/ivette/src/renderer/style.css
index 01e87506826..1d338931826 100644
--- a/ivette/src/renderer/style.css
+++ b/ivette/src/renderer/style.css
@@ -16,7 +16,6 @@
.sidebar-selector {
min-width: 35px;
- max-width: fit-content;
}
.sidebar-selector-icon {
@@ -41,6 +40,10 @@
background-color: var(--background-profound-hover);
}
+.sidebar-selector-selected {
+ background-color: var(--background-profound);
+}
+
.component-info {
color: var(--text) ;
min-width: 50px;
--
GitLab