From f618693a51d432aefee87b12e591598575751762 Mon Sep 17 00:00:00 2001 From: foxriver76 Date: Tue, 6 Feb 2024 12:05:31 +0100 Subject: [PATCH] allow to modify style of navigation - closes #352 - closes #125 --- README.md | 1 + src/src/Attributes/View.jsx | 12 ++++++++++++ src/src/Vis/visNavigation.jsx | 14 +++++++++----- src/src/i18n/de.json | 4 ++++ src/src/i18n/en.json | 4 ++++ src/src/i18n/es.json | 4 ++++ src/src/i18n/fr.json | 4 ++++ src/src/i18n/it.json | 4 ++++ src/src/i18n/nl.json | 4 ++++ src/src/i18n/pl.json | 4 ++++ src/src/i18n/pt.json | 4 ++++ src/src/i18n/ru.json | 4 ++++ src/src/i18n/uk.json | 4 ++++ src/src/i18n/zh-cn.json | 4 ++++ 14 files changed, 66 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a6df75273..4a17d3c00 100644 --- 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 index ac6d662ff..4999d5fe0 100644 --- 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 index e1c6ef697..e0015a877 100644 --- 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,6 +300,7 @@ class VisNavigation extends React.Component { {item.icon ? : <> {item.text ? @@ -324,10 +327,11 @@ class VisNavigation extends React.Component { : null} diff --git a/src/src/i18n/de.json b/src/src/i18n/de.json index cbc0b473a..1ab47076e 100644 --- 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 index a22fb0bad..d4ac4e79c 100644 --- 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 index 175c167b1..6d329a029 100644 --- 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 index 274f7087f..d6e8f7078 100644 --- 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 index f9bf03927..e78e4a676 100644 --- 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 index cee37a675..cffa2abad 100644 --- 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 index 1baf7852f..b163baf50 100644 --- 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 index 44e760979..f46d544a4 100644 --- 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 index d36d08e78..5e5f86272 100644 --- 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 index ae7f17e3f..7c1bd3f14 100644 --- 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 index bf400ee75..6158e03ab 100644 --- 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": "主题",