ioBroker · foxriver76 · Feb 6, 2024 · Feb 6, 2024
diff --git a/README.md b/README.md
@@ -265,6 +265,7 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
 ## Changelog
 ### **WORK IN PROGRESS**
 * (foxriver76) global css will no longer be deleted on adapter upload/update
+* (foxriver76) allow to modify style of navigation
 
 ### 2.9.29 (2024-02-05)
 * (foxriver76) fixed multiple problems with nested groups

diff --git a/src/src/Attributes/View.jsx b/src/src/Attributes/View.jsx
@@ -605,6 +605,18 @@ const View = props => {
                 {
                     type: 'color', name: 'Background color', field: 'navigationBackground', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
                 },
+                {
+                    type: 'color', name: 'Background color if selected', field: 'navigationSelectedBackground', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
+                },
+                {
+                    type: 'color', name: 'Text color if selected', field: 'navigationSelectedColor', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
+                },
+                {
+                    type: 'color', name: 'Text color', field: 'navigationColor', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
+                },
+                {
+                    type: 'color', name: 'Chevron icon color', field: 'navigationChevronColor', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
+                },
                 {
                     type: 'checkbox', name: 'Hide menu', field: 'navigationHideMenu', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
                 },

diff --git a/src/src/Vis/visNavigation.jsx b/src/src/Vis/visNavigation.jsx
@@ -288,6 +288,7 @@ class VisNavigation extends React.Component {
                             key={index}
                             disablePadding
                             className={Utils.clsx(this.props.classes.menuItem, this.props.activeView === item.view && this.props.classes.selectedMenu)}
+                            style={{ backgroundColor: this.props.activeView === item.view ? settings.navigationSelectedBackground : undefined }}
                             onClick={async () => {
                                 if (settings.navigationHideOnSelection) {
                                     await this.hideNavigationMenu();
@@ -299,22 +300,24 @@ class VisNavigation extends React.Component {
                                 <ListItemIcon>
                                     {item.icon ? <Icon
                                         src={item.icon}
+                                        style={{ color: this.props.activeView === item.view ? settings.navigationSelectedColor : settings.navigationColor }}
                                         className={Utils.clsx(
                                             this.props.classes.listItemIcon,
                                             this.props.activeView === item.view && this.props.classes.selectedMenu,
                                         )}
                                     /> :
                                         <>
                                             <DashboardIcon
+                                                style={{ color: this.props.activeView === item.view ? settings.navigationSelectedColor : settings.navigationColor, backgroundColor: 'rgba(1,1,1,0)' }}
                                                 className={Utils.clsx(
                                                     this.props.activeView === item.view && this.props.classes.selectedMenu,
                                                     this.props.menuWidth !== 'full' && this.props.classes.transparent,
                                                 )}
                                             />
                                             {item.text ? <span
+                                                style={{ color: this.props.activeView === item.view ? settings.navigationSelectedColor : settings.navigationColor }}
                                                 className={Utils.clsx(
                                                     this.props.classes.listItemIconText,
-                                                    this.props.activeView === item.view && this.props.classes.selectedMenu,
                                                     this.props.menuWidth === 'full' && this.props.classes.transparent,
                                                 )}
                                             >
@@ -324,10 +327,11 @@ class VisNavigation extends React.Component {
                                 </ListItemIcon>
                                 <ListItemText
                                     primary={item.text}
+                                    style={{ color: this.props.activeView === item.view ? settings.navigationSelectedColor : settings.navigationColor }}
                                     classes={{
                                         primary: Utils.clsx(
                                             this.props.classes.listItemText,
-                                            this.props.activeView === item.view && this.props.classes.selectedMenu,
+                                            this.props.activeView === item.view && !settings.navigationSelectedColor && this.props.classes.selectedMenu,
                                             this.props.menuWidth === 'narrow' && this.props.classes.listItemTextNarrow,
                                         ),
                                     }}
@@ -453,13 +457,13 @@ class VisNavigation extends React.Component {
                         }
                     }}
                     style={{
-                        backgroundColor: this.props.menuWidth === 'hidden' && settings.navigationButtonBackground ? (this.props.context.themeType === 'dark' ? 'white' : 'black') : 'inherit',
-                        color: this.props.menuWidth === 'hidden' && settings.navigationButtonBackground ? (this.props.context.themeType === 'dark' ? 'black' : 'white')  : 'inherit',
+                        backgroundColor: this.props.menuWidth === 'hidden' && settings.navigationButtonBackground ? settings.navigationSelectedBackground || (this.props.context.themeType === 'dark' ? 'white' : 'black') : 'inherit',
+                        color: this.props.menuWidth === 'hidden' && settings.navigationButtonBackground ? settings.navigationSelectedColor || (this.props.context.themeType === 'dark' ? 'black' : 'white')  : 'inherit',
                     }}
                 >
                     <ChevronLeftIcon
                         className={this.props.menuWidth === 'hidden' || (this.props.menuWidth === 'narrow' && settings.navigationNoHide) ? this.props.classes.openMenuButtonIconHidden : ''}
-                        style={settings.navigationBar && this.props.menuWidth === 'hidden' ? { color: this.props.context.themeType === 'dark' ? '#000' : '#FFF' } : null}
+                        style={settings.navigationBar && this.props.menuWidth === 'hidden' ? { color: settings.navigationChevronColor || (this.props.context.themeType === 'dark' ? '#000' : '#FFF') } : { color: settings.navigationChevronColor }}
                     />
                 </IconButton>
             </div> : null}

diff --git a/src/src/i18n/de.json b/src/src/i18n/de.json
@@ -64,6 +64,7 @@
   "Available for all": "Projekt für alle Benutzer zugänglich",
   "Background class": "Hintergrundklasse",
   "Background color": "Hintergrundfarbe",
+  "Background color if selected": "Hintergrundfarbe, falls ausgewählt",
   "Bar color": "Hintergrundfarbe",
   "Bar icon": "Symbol",
   "Bar image": "Bild",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Rekursive Seiten können nicht verwendet werden",
   "Carbon fibre": "Kohlenstoff-Faser",
   "Carbon fibre1": "Kohlefaser1",
+  "Chevron icon color": "Farbe der Show-Schaltfläche",
   "Clear": "Löschen",
   "Clear filter": "Filter löschen",
   "Click to close": "Zum Schließen klicken",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Wechseln Sie in den Gruppenbearbeitungsmodus, indem Sie auf das Widget doppelklicken",
   "Tabs": "Tabs",
   "Temperature": "Temperatur",
+  "Text color": "Textfarbe",
+  "Text color if selected": "Textfarbe, falls ausgewählt",
   "Text edit": "Text bearbeiten",
   "Th": "Do",
   "Theme": "Thema",

diff --git a/src/src/i18n/en.json b/src/src/i18n/en.json
@@ -64,6 +64,7 @@
   "Available for all": "Project accessible by all users",
   "Background class": "Background class",
   "Background color": "Background color",
+  "Background color if selected": "Background color if selected",
   "Bar color": "Background color",
   "Bar icon": "Icon",
   "Bar image": "Image",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Cannot use recursive views",
   "Carbon fibre": "Carbon fibre",
   "Carbon fibre1": "Carbon fibre1",
+  "Chevron icon color": "Color of the show button",
   "Clear": "Clear",
   "Clear filter": "Clear filter",
   "Click to close": "Click to close",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Switch to group edit mode by double click on widget",
   "Tabs": "Tabs",
   "Temperature": "Temperature",
+  "Text color": "Text color",
+  "Text color if selected": "Text color if selected",
   "Text edit": "Text edit",
   "Th": "Th",
   "Theme": "Theme",

diff --git a/src/src/i18n/es.json b/src/src/i18n/es.json
@@ -64,6 +64,7 @@
   "Available for all": "Proyecto accesible para todos los usuarios",
   "Background class": "Clase de fondo",
   "Background color": "Color de fondo",
+  "Background color if selected": "Color de fondo si se selecciona",
   "Bar color": "Color de fondo",
   "Bar icon": "Icono",
   "Bar image": "Imagen",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "No se pueden usar vistas recursivas",
   "Carbon fibre": "Fibra de carbón",
   "Carbon fibre1": "fibra de carbono1",
+  "Chevron icon color": "Color del botón mostrar",
   "Clear": "Claro",
   "Clear filter": "Filtro claro",
   "Click to close": "Haga clic para cerrar",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Cambie al modo de edición de grupo haciendo doble clic en el widget",
   "Tabs": "Pestañas",
   "Temperature": "Temperatura",
+  "Text color": "Color de texto",
+  "Text color if selected": "Color del texto si se selecciona",
   "Text edit": "Edición de texto",
   "Th": "Th",
   "Theme": "Tema",

diff --git a/src/src/i18n/fr.json b/src/src/i18n/fr.json
@@ -64,6 +64,7 @@
   "Available for all": "Projet accessible par tous les utilisateurs",
   "Background class": "Classe d'arrière-plan",
   "Background color": "Couleur de l'arrière plan",
+  "Background color if selected": "Couleur d'arrière-plan si sélectionnée",
   "Bar color": "Couleur de l'arrière plan",
   "Bar icon": "Icône",
   "Bar image": "Image",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Impossible d'utiliser les vues récursives",
   "Carbon fibre": "Fibre de carbone",
   "Carbon fibre1": "Fibre de carbone1",
+  "Chevron icon color": "Couleur du bouton Afficher",
   "Clear": "Dégager",
   "Clear filter": "Effacer le filtre",
   "Click to close": "Cliquez pour fermer",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Passez en mode d'édition de groupe en double-cliquant sur le widget",
   "Tabs": "Onglets",
   "Temperature": "Température",
+  "Text color": "Couleur du texte",
+  "Text color if selected": "Couleur du texte si sélectionné",
   "Text edit": "Modification de texte",
   "Th": "Th",
   "Theme": "Thème",

diff --git a/src/src/i18n/it.json b/src/src/i18n/it.json
@@ -64,6 +64,7 @@
   "Available for all": "Progetto accessibile a tutti gli utenti",
   "Background class": "Classe di fondo",
   "Background color": "Colore di sfondo",
+  "Background color if selected": "Colore di sfondo se selezionato",
   "Bar color": "Colore di sfondo",
   "Bar icon": "Icona",
   "Bar image": "Immagine",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Impossibile utilizzare visualizzazioni ricorsive",
   "Carbon fibre": "Fibra di carbonio",
   "Carbon fibre1": "Fibra di carbonio1",
+  "Chevron icon color": "Colore del pulsante Mostra",
   "Clear": "Chiaro",
   "Clear filter": "Filtro pulito",
   "Click to close": "Clicca per chiudere",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Passa alla modalità di modifica del gruppo facendo doppio clic sul widget",
   "Tabs": "Schede",
   "Temperature": "Temperatura",
+  "Text color": "Colore del testo",
+  "Text color if selected": "Colore del testo se selezionato",
   "Text edit": "Modifica del testo",
   "Th": "Th",
   "Theme": "Tema",

diff --git a/src/src/i18n/nl.json b/src/src/i18n/nl.json
@@ -64,6 +64,7 @@
   "Available for all": "Project toegankelijk voor alle gebruikers",
   "Background class": "Achtergrondklas",
   "Background color": "Achtergrond kleur",
+  "Background color if selected": "Achtergrondkleur indien geselecteerd",
   "Bar color": "Achtergrond kleur",
   "Bar icon": "Icoon",
   "Bar image": "Afbeelding",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Kan recursieve weergaven niet gebruiken",
   "Carbon fibre": "Koolstofvezel",
   "Carbon fibre1": "Koolstofvezel1",
+  "Chevron icon color": "Kleur van de showknop",
   "Clear": "Duidelijk",
   "Clear filter": "Filter wissen",
   "Click to close": "Klik om te sluiten",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Schakel over naar de groepsbewerkingsmodus door te dubbelklikken op de widget",
   "Tabs": "Tabbladen",
   "Temperature": "Temperatuur",
+  "Text color": "Tekst kleur",
+  "Text color if selected": "Tekstkleur indien geselecteerd",
   "Text edit": "Tekst bewerken",
   "Th": "Th",
   "Theme": "Thema",

diff --git a/src/src/i18n/pl.json b/src/src/i18n/pl.json
@@ -64,6 +64,7 @@
   "Available for all": "Projekt dostępny dla wszystkich użytkowników",
   "Background class": "Klasa podstawowa",
   "Background color": "Kolor tła",
+  "Background color if selected": "Kolor tła, jeśli został wybrany",
   "Bar color": "Kolor tła",
   "Bar icon": "Ikona",
   "Bar image": "Obraz",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Nie można używać widoków rekurencyjnych",
   "Carbon fibre": "Włókno węglowe",
   "Carbon fibre1": "Włókno węglowe1",
+  "Chevron icon color": "Kolor przycisku pokazu",
   "Clear": "Jasne",
   "Clear filter": "Czysty filtr",
   "Click to close": "Kliknij, aby zamknąć",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Przejdź do trybu edycji grupy, klikając dwukrotnie widżet",
   "Tabs": "Zakładki",
   "Temperature": "Temperatura",
+  "Text color": "Kolor tekstu",
+  "Text color if selected": "Kolor tekstu, jeśli został wybrany",
   "Text edit": "Edycja tekstu",
   "Th": "Th",
   "Theme": "Motyw",

diff --git a/src/src/i18n/pt.json b/src/src/i18n/pt.json
@@ -64,6 +64,7 @@
   "Available for all": "Projeto acessível a todos os usuários",
   "Background class": "Classe de fundo",
   "Background color": "Cor de fundo",
+  "Background color if selected": "Cor de fundo, se selecionada",
   "Bar color": "Cor de fundo",
   "Bar icon": "Ícone",
   "Bar image": "Imagem",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Não é possível usar visualizações recursivas",
   "Carbon fibre": "Fibra de carbono",
   "Carbon fibre1": "Fibra de carbono1",
+  "Chevron icon color": "Cor do botão mostrar",
   "Clear": "Claro",
   "Clear filter": "Filtro limpo",
   "Click to close": "Clique para fechar",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Mude para o modo de edição de grupo clicando duas vezes no widget",
   "Tabs": "Guias",
   "Temperature": "Temperatura",
+  "Text color": "Cor do texto",
+  "Text color if selected": "Cor do texto, se selecionado",
   "Text edit": "edição de texto",
   "Th": "Th",
   "Theme": "Tema",

diff --git a/src/src/i18n/ru.json b/src/src/i18n/ru.json
@@ -64,6 +64,7 @@
   "Available for all": "Проект доступен всем пользователям",
   "Background class": "Фоновый класс",
   "Background color": "Фоновый цвет",
+  "Background color if selected": "Цвет фона, если выбран",
   "Bar color": "Фоновый цвет",
   "Bar icon": "Икона",
   "Bar image": "Изображение",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Невозможно использовать рекурсивные страницы",
   "Carbon fibre": "Углеродное волокно",
   "Carbon fibre1": "Углеродное волокно1",
+  "Chevron icon color": "Цвет кнопки «Показать»",
   "Clear": "чистый",
   "Clear filter": "Очистить фильтр",
   "Click to close": "Нажмите, чтобы закрыть",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Переключитесь в режим группового редактирования, дважды щелкнув виджет.",
   "Tabs": "Вкладки",
   "Temperature": "Температура",
+  "Text color": "Цвет текста",
+  "Text color if selected": "Цвет текста, если выбран",
   "Text edit": "Редактировать текст",
   "Th": "Чт",
   "Theme": "Тема",

diff --git a/src/src/i18n/uk.json b/src/src/i18n/uk.json
@@ -64,6 +64,7 @@
   "Available for all": "Проект доступний для всіх користувачів",
   "Background class": "Фоновий клас",
   "Background color": "Колір фону",
+  "Background color if selected": "Колір фону, якщо вибрано",
   "Bar color": "Колір фону",
   "Bar icon": "значок",
   "Bar image": "Зображення",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "Не можна використовувати рекурсивні перегляди",
   "Carbon fibre": "Вуглецеве волокно",
   "Carbon fibre1": "Вуглецеве волокно 1",
+  "Chevron icon color": "Колір кнопки показу",
   "Clear": "ясно",
   "Clear filter": "Очистити фільтр",
   "Click to close": "Натисніть, щоб закрити",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "Перейдіть у режим редагування групи, двічі клацнувши на віджеті",
   "Tabs": "Вкладки",
   "Temperature": "Температура",
+  "Text color": "Колір тексту",
+  "Text color if selected": "Колір тексту, якщо вибрано",
   "Text edit": "Редагування тексту",
   "Th": "чт",
   "Theme": "Тема",

diff --git a/src/src/i18n/zh-cn.json b/src/src/i18n/zh-cn.json
@@ -64,6 +64,7 @@
   "Available for all": "所有用户均可访问的项目",
   "Background class": "背景类",
   "Background color": "背景颜色",
+  "Background color if selected": "背景颜色（如果选择）",
   "Bar color": "背景颜色",
   "Bar icon": "图标",
   "Bar image": "图像",
@@ -89,6 +90,7 @@
   "Cannot use recursive views": "不能使用递归视图",
   "Carbon fibre": "碳纤维",
   "Carbon fibre1": "碳纤维1",
+  "Chevron icon color": "显示按钮的颜色",
   "Clear": "清除",
   "Clear filter": "清除过滤器",
   "Click to close": "点击关闭",
@@ -362,6 +364,8 @@
   "Switch to group edit mode by double click": "双击小部件切换到组编辑模式",
   "Tabs": "选项卡",
   "Temperature": "温度",
+  "Text color": "文字颜色",
+  "Text color if selected": "文本颜色（如果选择）",
   "Text edit": "文本编辑",
   "Th": "Th",
   "Theme": "主题",