Add "full screen" button to editors (#433)

GeoNode · Aug 19, 2021 · 4689e3f · 4689e3f
1 parent 9152f87
commit 4689e3f
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 32 deletions.
diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx
@@ -52,31 +52,16 @@ const LeftContentMenu = ({ items, formatHref, query, variant, size }) => {
 };
 
 
-const RightContentMenu = ({ items, formatHref, query, parentRef, cfg, variant, size }) => {
+const RightContentMenu = ({ items, formatHref, query, variant, size }) => {
 
-    const navbarContentRight = useRef();
     const navbarRight = useRef();
-    const { width: widthNavbarRight } = useResizeElement(navbarRight);
-    const { width: widthParent } = useResizeElement(parentRef);
-    const { width: widthNavbarContentRight } = useResizeElement(navbarContentRight);
-    const isSpaceRight = (cfg?.style) ? widthNavbarRight >= widthNavbarContentRight :  widthNavbarRight >= widthParent;
-    const [switchToBurgerMenu, setSwitchToBurgerMenu] = useState(false);
-    useEffect(() => {
-        setSwitchToBurgerMenu(isSpaceRight);
-    }, [isSpaceRight]);
 
     return (
         <div
-            ref={navbarContentRight}
             className={`gn-menu-content-right`}
-            style={cfg?.style}
         >
 
-            {
-                (switchToBurgerMenu) && items && <BurgerMenu items={items} variant={variant}/>
-            }
-
-            {(!switchToBurgerMenu) && items &&
+            {items &&
                 <Menu
                     ref={navbarRight}
                     items={items}
@@ -103,7 +88,6 @@ const ActionNavbar = forwardRef(({
     rightItems,
     query,
     formatHref,
-    cfg,
     variant,
     size,
     children
@@ -139,8 +123,6 @@ const ActionNavbar = forwardRef(({
                             items={rightItems}
                             formatHref={formatHref}
                             query={query}
-                            parentRef={ref}
-                            cfg={cfg?.rightContents}
                             variant={variant}
                             size={size}
                         />

diff --git a/geonode_mapstore_client/client/js/hooks/useResizeElement.js b/geonode_mapstore_client/client/js/hooks/useResizeElement.js
@@ -13,7 +13,7 @@ const useResizeElement = (elemRef) => {
     const [height, setHeight] = useState(0);
 
     const handleResize = () => {
-        if (elemRef.current) {
+        if (elemRef?.current) {
             setWidth(elemRef.current.offsetWidth);
             setHeight(elemRef.current.offsetHeight);
         }

diff --git a/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx b/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
@@ -12,6 +12,7 @@ import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import ActionNavbar from '@js/components/ActionNavbar';
+
 import FaIcon from '@js/components/FaIcon';
 import usePluginItems from '@js/hooks/usePluginItems';
 import {
@@ -36,6 +37,7 @@ function checkResourcePerms(menuItem, resourcePerms) {
 function ActionNavbarPlugin({
     items,
     leftMenuItems,
+    rightMenuItems,
     resourcePerms,
     resource,
     isDirtyState
@@ -57,15 +59,30 @@ function ActionNavbarPlugin({
         return (item);
     });
 
+    const rightMenuItemsPlugins = reduceArrayRecursive(rightMenuItems, (item) => {
+        configuredItems.find(plugin => {
+            if ( item.type === 'plugin' && plugin.name === item.name ) {
+                item.Component = plugin?.Component;
+            }
+        });
+        return (item);
+    });
+
     const leftItems = reduceArrayRecursive(
         leftMenuItemsPlugins,
         menuItem => checkResourcePerms(menuItem, resourcePerms)
     );
 
+    const rightItems = reduceArrayRecursive(
+        rightMenuItemsPlugins,
+        menuItem => checkResourcePerms(menuItem, resourcePerms)
+    );
+
     return (
 
         <ActionNavbar
             leftItems={leftItems}
+            rightItems={rightItems}
             variant="default"
             size="sm"
         >
@@ -76,12 +93,14 @@ function ActionNavbarPlugin({
 
 ActionNavbarPlugin.propTypes = {
     items: PropTypes.array,
-    leftMenuItems: PropTypes.array
+    leftMenuItems: PropTypes.array,
+    rightMenuItems: PropTypes.array
 };
 
 ActionNavbarPlugin.defaultProps = {
     items: [],
-    leftMenuItems: []
+    leftMenuItems: [],
+    rightMenuItems: []
 };
 
 const ConnectedActionNavbarPlugin = connect(

diff --git a/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx b/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx
@@ -7,13 +7,19 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 import {
     toggleControl,
     setControlProperty
 } from '@mapstore/framework/actions/controls';
+import {
+    toggleFullscreen
+} from '@mapstore/framework/actions/fullscreen';
+
 import Message from '@mapstore/framework/components/I18N/Message';
 import Button from '@js/components/Button';
-
+import FaIcon from '@js/components/FaIcon';
+import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
 /**
  * buttons override to use in ActionNavbar for plugin imported from mapstore
  */
@@ -32,7 +38,7 @@ export const PrintActionButton = connect(
             size={size}
             onClick={() => onClick()}
         >
-            <Message msgId="printbutton"/>
+            <Message msgId="printbutton" />
         </Button>
     );
 });
@@ -45,14 +51,17 @@ export const CatalogActionButton = connect(
     variant,
     size
 }) => {
+
     return (
+
         <Button
             variant={variant}
             size={size}
             onClick={() => onClick()}
         >
-            <Message msgId="catalog.title"/>
+            <Message msgId="catalog.title" />
         </Button>
+
     );
 });
 
@@ -70,11 +79,38 @@ export const MeasureActionButton = connect(
             size={size}
             onClick={() => onClick()}
         >
-            <Message msgId="measureComponent.Measure"/>
+            <Message msgId="measureComponent.Measure" />
         </Button>
     );
 });
 
+export const FullScreenActionButton = connect(createSelector([
+    state => state?.controls?.fullscreen?.enabled || false
+], (enabled) => ({
+    enabled
+})), {
+    onClick: (enabled) => toggleFullscreen(enabled, "#ms-container")
+}
+)(({
+    onClick,
+    variant,
+    size,
+    enabled
+}) => {
+    const FullScreenButton = tooltip(Button);
+    return (
+        <FullScreenButton
+            tooltipPosition={enabled ? "left" : "top"}
+            tooltip={ enabled ?  <Message msgId="gnviewer.nativescreen"/> : <Message msgId="gnviewer.fullscreen"/>  }
+            variant={variant}
+            size={size}
+            onClick={() => onClick(!enabled)}
+        >
+            <FaIcon name={enabled ? "expand" : "expand"} />
+        </FullScreenButton>
+    );
+});
+
 export const LayerDownloadActionButton = connect(
     () => ({}),
     { onClick: setControlProperty.bind(null, 'layerdownload', 'enabled', true, true) }
@@ -89,7 +125,7 @@ export const LayerDownloadActionButton = connect(
             size={size}
             onClick={() => onClick()}
         >
-            <Message msgId="layerdownload.title"/>
+            <Message msgId="layerdownload.title" />
         </Button>
     );
 });
@@ -108,7 +144,7 @@ export const AnnotationsActionButton = connect(
             size={size}
             onClick={() => onClick()}
         >
-            <Message msgId="annotationsbutton"/>
+            <Message msgId="annotationsbutton" />
         </Button>
     );
 });
diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js
@@ -15,7 +15,8 @@ import {
     CatalogActionButton,
     MeasureActionButton,
     LayerDownloadActionButton,
-    AnnotationsActionButton
+    AnnotationsActionButton,
+    FullScreenActionButton
 } from '@js/plugins/actionnavbar/buttons';
 import { getMetadataUrl } from '@js/utils/ResourceUtils';
 
@@ -189,7 +190,16 @@ export const plugins = {
     ),
     FullScreenPlugin: toLazyPlugin(
         'FullScreen',
-        import(/* webpackChunkName: 'plugins/fullscreen-plugin' */ '@mapstore/framework/plugins/FullScreen')
+        import(/* webpackChunkName: 'plugins/fullscreen-plugin' */ '@mapstore/framework/plugins/FullScreen'),
+        {
+            containers: {
+                ActionNavbar: {
+                    name: 'FullScreen',
+                    Component: FullScreenActionButton,
+                    priority: 5
+                }
+            }
+        }
     ),
     AddGroupPlugin: toLazyPlugin(
         'AddGroup',

diff --git a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
@@ -857,6 +857,12 @@
                                 }
                             ]
                         }
+                    ],
+                    "rightMenuItems": [
+                        {
+                            "type": "plugin",
+                            "name": "FullScreen"
+                        }
                     ]
                 }
             },
@@ -981,6 +987,9 @@
             {
                 "name": "Measure"
             },
+            {
+                "name": "FullScreen"
+            },
             {
                 "name": "Print",
                 "cfg": {
@@ -1103,7 +1112,7 @@
                 "name": "FullScreen",
                 "override": {
                     "Toolbar": {
-                        "alwaysVisible": false
+                        "alwaysVisible": true
                     }
                 }
             },
@@ -1420,7 +1429,14 @@
                                 }
                             ]
                         }
+                    ],
+                    "rightMenuItems": [
+                        {
+                            "type": "plugin",
+                            "name": "FullScreen"
+                        }
                     ]
+
                 }
             },
             {
@@ -1540,6 +1556,9 @@
             {
                 "name": "Measure"
             },
+            {
+                "name": "FullScreen"
+            },
             {
                 "name": "Print",
                 "cfg": {
@@ -1861,12 +1880,22 @@
                                 }
                             ]
                         }
+                    ],
+                    "rightMenuItems": [
+                        {
+                            "type": "plugin",
+                            "name": "FullScreen"
+                        }
                     ]
                 }
             },
             {
                 "name": "DetailViewer"
             },
+            {
+                "type": "plugin",
+                "name": "FullScreen"
+            },
             {
                 "name": "DeleteResource"
             },
@@ -2037,9 +2066,19 @@
                                 }
                             ]
                         }
+                    ],
+                    "rightMenuItems": [
+                        {
+                            "type": "plugin",
+                            "name": "FullScreen"
+                        }
                     ]
                 }
             },
+            {
+                "type": "plugin",
+                "name": "FullScreen"
+            },
             {
                 "name": "DetailViewer"
             },

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
@@ -168,6 +168,8 @@
             "deleteResourceYes": "Ja, ich bin sicher",
             "underApproval": "In Genehmigung",
             "unpublish": "Nicht veröffentlicht",
+            "fullscreen": "Vollbild",
+            "nativescreen": "Vollbildmodus beenden",
             "prompPendingChanges": "Es sind nicht gespeicherte Änderungen vorhanden. Möchten Sie wirklich gehen?",
             "errorCompactPermissionsTitle": "Fehler beim Berechtigungsupdate",
             "errorCompactPermissionsMessage": "Es war nicht möglich die Berechtigungen zu aktualisieren",

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
@@ -169,6 +169,8 @@
             "deleteResourceYes": "Yes, I am sure",
             "underApproval": "Under approval",
             "unpublish": "Unpublish",
+            "fullscreen": "Full screen",
+            "nativescreen": "Exit full screen mode",
             "prompPendingChanges": "There are unsaved changes, are you sure you want to leave?",
             "errorCompactPermissionsTitle": "Error on permission update",
             "errorCompactPermissionsMessage": "It was not possible to update the permissions",

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
@@ -168,6 +168,8 @@
             "deleteResourceYes": "Sí, estoy seguro",
             "underApproval": "Bajo aprobación",
             "unpublish": "No publicado",
+            "fullscreen": "Pantalla completa",
+            "nativescreen": "Salir del modo de pantalla completa",
             "prompPendingChanges": "Hay cambios sin guardar, ¿está seguro de que desea salir?",
             "errorCompactPermissionsTitle": "Error en la actualización de permisos",
             "errorCompactPermissionsMessage": "No fue posible actualizar los permisos",

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
@@ -168,6 +168,8 @@
             "deleteResourceYes": "Oui, je suis sûr",
             "underApproval": "En cours d'approbation",
             "unpublish": "Dépublier",
+            "fullscreen": "Plein écran",
+            "nativescreen": "Quitter le mode plein écran",
             "prompPendingChanges": "Il y a des modifications non enregistrées, voulez-vous vraiment quitter?",
             "errorCompactPermissionsTitle": "Erreur lors de la mise à jour des autorisations",
             "errorCompactPermissionsMessage": "Il n'a pas été possible de mettre à jour les autorisations",