added possibility to hide navigation after selection

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) do not show empty icon category if jquery style selected for jquery button widgets
+* (foxriver76) added possibility to hide navigation after selection
 
 ### 2.9.25 (2024-01-29)
 * (foxriver76) fixed resizing issue for relative widgets

src/src/Attributes/View.jsx

@@ -608,6 +608,9 @@ const View = props => {
                 {
                     type: 'checkbox', name: 'Hide menu', field: 'navigationHideMenu', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
                 },
+                {
+                    type: 'checkbox', name: 'Hide after selection', field: 'navigationHideOnSelection', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal"', applyToAll: true,
+                },
                 {
                     type: 'text', name: 'Menu header text', field: 'navigationHeaderText', notStyle: true, hidden: '!data.navigation || data.navigationOrientation === "horizontal" || !data.navigationBar', applyToAll: true,
                 },
@@ -792,18 +795,20 @@ const View = props => {
                         selectedViewValue = selectedViewValue || '';
                     }
                     viewList.forEach(_view => {
-                        let viewValue = store.getState().visProject[_view].settings[field.field];
+                        const view = store.getState().visProject[_view];
+
+                        let viewValue = view.settings[field.field];
                         if (field.type === 'boolean') {
                             viewValue = !!viewValue;
                         } else {
                             viewValue = viewValue || '';
                         }
 
-                        if (store.getState().visProject[_view].settings.navigation &&
+                        if (view.settings.navigation &&
                             viewValue !== selectedViewValue &&
-                            !viewsToChange.includes(store.getState().visProject[_view].name || _view)
+                            !viewsToChange.includes(view.name || _view)
                         ) {
-                            viewsToChange.push(store.getState().visProject[_view].name || _view);
+                            viewsToChange.push(view.name || _view);
                         }
                     });
                 }
@@ -817,14 +822,15 @@ const View = props => {
                 selectedViewValue = selectedViewValue || '';
             }
             viewList.forEach(_view => {
-                let viewValue = store.getState().visProject[_view].settings[showAllViewDialog.field];
+                const projView = store.getState().visProject[_view];
+                let viewValue = projView.settings[showAllViewDialog.field];
                 if (showAllViewDialog.field.type === 'boolean') {
                     viewValue = !!viewValue;
                 } else {
                     viewValue = viewValue || '';
                 }
-                if (store.getState().visProject[_view].settings.navigation && viewValue !== selectedViewValue) {
-                    viewsToChange.push(store.getState().visProject[_view].name || _view);
+                if (projView.settings.navigation && viewValue !== selectedViewValue) {
+                    viewsToChange.push(projView.name || _view);
                 }
             });
         }

src/src/Store.tsx

@@ -14,7 +14,9 @@ export const recalculateFields = createAction<boolean>('attributes/recalculate')
 
 const initialState = {
     visProject: {} as Project,
+    /** If fields need to be recalculated on next render */
     recalculateFields: false,
+    /** Logged in user */
     activeUser: '',
 };
 

src/src/Vis/visNavigation.jsx

@@ -288,7 +288,12 @@ class VisNavigation extends React.Component {
                             key={index}
                             disablePadding
                             className={Utils.clsx(this.props.classes.menuItem, this.props.activeView === item.view && this.props.classes.selectedMenu)}
-                            onClick={() => this.props.context.changeView(item.view)}
+                            onClick={async () => {
+                                if (settings.navigationHideOnSelection) {
+                                    await this.hideNavigationMenu();
+                                }
+                                await this.props.context.changeView(item.view);
+                            }}
                         >
                             <ListItemButton>
                                 <ListItemIcon>
@@ -378,10 +383,19 @@ class VisNavigation extends React.Component {
         </div>;
     }
 
+    /**
+     * Hide the navigation menu
+     */
+    async hideNavigationMenu() {
+        window.localStorage.setItem('vis.navOpened', 'hidden');
+        await this.props.setMenuWidth('hidden');
+    }
+
     render() {
         if (!this.props.context.views || !this.props.context.views[this.props.view]) {
             return null;
         }
+
         const settings = this.props.context.views[this.props.view].settings;
 
         if (settings.navigation &&
@@ -428,8 +442,7 @@ class VisNavigation extends React.Component {
                             this.props.setMenuWidth('narrow');
                         } else if (this.props.menuWidth === 'narrow') {
                             if (!settings.navigationNoHide) {
-                                window.localStorage.setItem('vis.navOpened', 'hidden');
-                                this.props.setMenuWidth('hidden');
+                                this.hideNavigationMenu();
                             } else {
                                 window.localStorage.setItem('vis.navOpened', 'full');
                                 this.props.setMenuWidth('full');

src/src/Vis/visView.jsx

@@ -1227,8 +1227,14 @@ class VisView extends React.Component {
             setMenuWidth={menuWidth => {
                 window.localStorage.setItem('vis.menuWidth', menuWidth);
                 this.setState({ menuWidth });
+
+                return new Promise(resolve => {
                 // re-calculate the width of the view
-                setTimeout(() => this.updateViewWidth(), 300);
+                    setTimeout(() => {
+                        this.updateViewWidth();
+                        resolve();
+                    }, 400);
+                });
             }}
         >
             {content}

src/src/i18n/de.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - Hochformat",
   "Height": "Höhe",
   "Hide": "Ausblenden",
+  "Hide after selection": "Nach Auswahl ausblenden",
   "Hide attributes": "Attribute ausblenden",
   "Hide menu": "Menü ausblenden",
   "Hide palette": "Palette ausblenden",

src/src/i18n/en.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - Portrait",
   "Height": "Height",
   "Hide": "Hide",
+  "Hide after selection": "Hide after selection",
   "Hide attributes": "Hide attributes",
   "Hide menu": "Hide menu",
   "Hide palette": "Hide palette",

src/src/i18n/es.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - Retrato",
   "Height": "Altura",
   "Hide": "Ocultar",
+  "Hide after selection": "Ocultar después de la selección",
   "Hide attributes": "Ocultar atributos",
   "Hide menu": "Ocultar el menú",
   "Hide palette": "Ocultar paleta",

src/src/i18n/fr.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD-Portrait",
   "Height": "Hauteur",
   "Hide": "Cacher",
+  "Hide after selection": "Masquer après la sélection",
   "Hide attributes": "Masquer les attributs",
   "Hide menu": "Masquer le menu",
   "Hide palette": "Masquer la palette",

src/src/i18n/it.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - Ritratto",
   "Height": "Altezza",
   "Hide": "Nascondere",
+  "Hide after selection": "Nascondi dopo la selezione",
   "Hide attributes": "Nascondi attributi",
   "Hide menu": "Nascondi menù",
   "Hide palette": "Nascondi tavolozza",

src/src/i18n/nl.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - Portret",
   "Height": "Hoogte",
   "Hide": "Verbergen",
+  "Hide after selection": "Verbergen na selectie",
   "Hide attributes": "Kenmerken verbergen",
   "Hide menu": "Menu verbergen",
   "Hide palette": "Palet verbergen",

src/src/i18n/pl.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - Portret",
   "Height": "Wysokość",
   "Hide": "Ukrywać",
+  "Hide after selection": "Ukryj po zaznaczeniu",
   "Hide attributes": "Ukryj atrybuty",
   "Hide menu": "Ukryj menu",
   "Hide palette": "Ukryj paletę",

src/src/i18n/pt.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - Retrato",
   "Height": "Altura",
   "Hide": "Esconder",
+  "Hide after selection": "Ocultar após seleção",
   "Hide attributes": "Ocultar atributos",
   "Hide menu": "Ocultar menu",
   "Hide palette": "Ocultar paleta",

src/src/i18n/ru.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD – Портрет",
   "Height": "Высота",
   "Hide": "Скрывать",
+  "Hide after selection": "Скрыть после выбора",
   "Hide attributes": "Скрыть свойства",
   "Hide menu": "Скрыть меню",
   "Hide palette": "Скрыть палитру",

src/src/i18n/uk.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "HD - портрет",
   "Height": "Висота",
   "Hide": "Сховати",
+  "Hide after selection": "Сховати після виділення",
   "Hide attributes": "Приховати атрибути",
   "Hide menu": "Приховати меню",
   "Hide palette": "Сховати палітру",

src/src/i18n/zh-cn.json

@@ -213,6 +213,7 @@
   "HD - Portrait": "高清 - 肖像",
   "Height": "高度",
   "Hide": "隐藏",
+  "Hide after selection": "选择后隐藏",
   "Hide attributes": "隐藏属性",
   "Hide menu": "隐藏菜单",
   "Hide palette": "隐藏调色板",