navigation style fixes (fix icon background and allow to customize he…

…ader text color) (#360)

* apply default overflow correctly

- closes #31
- closes #22

* navigation style fixes (fix icon background and allow to customize header text color)

- closes #352

---------

Signed-off-by: Max Hauser <moritz.heusinger@gmail.com>

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) apply default overflow correctly
+* (foxriver76) navigation style fixes (fix icon background and allow to customize header text color)
 
 ### 2.9.30 (2024-02-06)
 * (foxriver76) global css will no longer be deleted on adapter upload/update

src/src/Attributes/View.jsx

@@ -611,6 +611,9 @@ const View = props => {
                 {
                     type: 'color', name: 'Text color if selected', field: 'navigationSelectedColor', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
                 },
+                {
+                    type: 'color', name: 'Menu header text color', field: 'navigationHeaderTextColor', notStyle: true, hidden: '!data.navigation',
+                },
                 {
                     type: 'color', name: 'Text color', field: 'navigationColor', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
                 },

src/src/Vis/visNavigation.jsx

@@ -271,6 +271,7 @@ class VisNavigation extends React.Component {
             )}
         >
             <div
+                style={{ color: settings.navigationHeaderTextColor || undefined }}
                 className={Utils.clsx(
                     this.props.classes.menuToolbar,
                     this.props.menuWidth === 'full' && this.props.classes.menuToolbarFull,
@@ -300,7 +301,7 @@ class VisNavigation extends React.Component {
                                 <ListItemIcon>
                                     {item.icon ? <Icon
                                         src={item.icon}
-                                        style={{ color: this.props.activeView === item.view ? settings.navigationSelectedColor : settings.navigationColor }}
+                                        style={{ color: this.props.activeView === item.view ? settings.navigationSelectedColor : settings.navigationColor, backgroundColor: 'rgba(1,1,1,0)' }}
                                         className={Utils.clsx(
                                             this.props.classes.listItemIcon,
                                             this.props.activeView === item.view && this.props.classes.selectedMenu,

src/src/i18n/de.json

@@ -250,6 +250,7 @@
   "Manage projects": "Projekte",
   "Manage views": "Seiten",
   "Menu header text": "Kopfzeilentext des Menüs",
+  "Menu header text color": "Textfarbe des Kopfzeilentexts",
   "Message": "Nachricht",
   "Mo": "Mo",
   "Modify": "Ändern",

src/src/i18n/en.json

@@ -250,6 +250,7 @@
   "Manage projects": "Projects",
   "Manage views": "Views",
   "Menu header text": "Menu header text",
+  "Menu header text color": "Menu header text color",
   "Message": "Message",
   "Mo": "Mo",
   "Modify": "Modify",

src/src/i18n/es.json

@@ -250,6 +250,7 @@
   "Manage projects": "Administrar proyectos",
   "Manage views": "Administrar vistas",
   "Menu header text": "Texto del encabezado del menú",
+  "Menu header text color": "Color del texto del encabezado del menú",
   "Message": "Mensaje",
   "Mo": "Mes",
   "Modify": "Modificar",

src/src/i18n/fr.json

@@ -250,6 +250,7 @@
   "Manage projects": "Gérer des projets",
   "Manage views": "Gérer les vues",
   "Menu header text": "Texte d'en-tête de menu",
+  "Menu header text color": "Couleur du texte de l’en-tête du menu",
   "Message": "Message",
   "Mo": "Mo",
   "Modify": "Modifier",

src/src/i18n/it.json

@@ -250,6 +250,7 @@
   "Manage projects": "Gestisci progetti",
   "Manage views": "Gestisci le visualizzazioni",
   "Menu header text": "Testo dell'intestazione del menu",
+  "Menu header text color": "Colore del testo dell'intestazione del menu",
   "Message": "Messaggio",
   "Mo": "Mo",
   "Modify": "Modificare",

src/src/i18n/nl.json

@@ -250,6 +250,7 @@
   "Manage projects": "Projecten beheren",
   "Manage views": "Weergaven beheren",
   "Menu header text": "Menukoptekst",
+  "Menu header text color": "Tekstkleur menukop",
   "Message": "Bericht",
   "Mo": "Mo",
   "Modify": "Bewerken",

src/src/i18n/pl.json

@@ -250,6 +250,7 @@
   "Manage projects": "Zarządzaj projektami",
   "Manage views": "Zarządzaj widokami",
   "Menu header text": "Tekst nagłówka menu",
+  "Menu header text color": "Kolor tekstu nagłówka menu",
   "Message": "Wiadomość",
   "Mo": "Mo",
   "Modify": "Modyfikować",

src/src/i18n/pt.json

@@ -250,6 +250,7 @@
   "Manage projects": "Gerenciar projetos",
   "Manage views": "Gerenciar visualizações",
   "Menu header text": "Texto do cabeçalho do menu",
+  "Menu header text color": "Cor do texto do cabeçalho do menu",
   "Message": "Mensagem",
   "Mo": "Mo",
   "Modify": "Modificar",

src/src/i18n/ru.json

@@ -250,6 +250,7 @@
   "Manage projects": "Проекты",
   "Manage views": "Страницы",
   "Menu header text": "Текст заголовка меню",
+  "Menu header text color": "Цвет текста заголовка меню",
   "Message": "Сообщение",
   "Mo": "Пн",
   "Modify": "Буду изменить",

src/src/i18n/uk.json

@@ -250,6 +250,7 @@
   "Manage projects": "Керуйте проектами",
   "Manage views": "Керувати переглядами",
   "Menu header text": "Текст заголовка меню",
+  "Menu header text color": "Колір тексту заголовка меню",
   "Message": "повідомлення",
   "Mo": "пн",
   "Modify": "Змінити",

src/src/i18n/zh-cn.json

@@ -250,6 +250,7 @@
   "Manage projects": "管理项目",
   "Manage views": "管理视图",
   "Menu header text": "菜单标题文本",
+  "Menu header text color": "菜单标题文字颜色",
   "Message": "信息",
   "Mo": "莫",
   "Modify": "调整",