diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx index d9c59d0889..1c43fc1f4a 100644 --- 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 (
- { - (switchToBurgerMenu) && items && - } - - {(!switchToBurgerMenu) && items && + {items && diff --git a/geonode_mapstore_client/client/js/hooks/useResizeElement.js b/geonode_mapstore_client/client/js/hooks/useResizeElement.js index ba70e7725f..06b3c4846b 100644 --- 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 index 8bbfb8b770..7c4ea9f401 100644 --- 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 ( @@ -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 index 88b17cb9c6..8adc594f19 100644 --- 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()} > - + ); }); @@ -45,14 +51,17 @@ export const CatalogActionButton = connect( variant, size }) => { + return ( + + ); }); @@ -70,11 +79,38 @@ export const MeasureActionButton = connect( size={size} onClick={() => onClick()} > - + ); }); +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 ( + : } + variant={variant} + size={size} + onClick={() => onClick(!enabled)} + > + + + ); +}); + export const LayerDownloadActionButton = connect( () => ({}), { onClick: setControlProperty.bind(null, 'layerdownload', 'enabled', true, true) } @@ -89,7 +125,7 @@ export const LayerDownloadActionButton = connect( size={size} onClick={() => onClick()} > - + ); }); @@ -108,7 +144,7 @@ export const AnnotationsActionButton = connect( size={size} onClick={() => onClick()} > - + ); }); diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js index 383bc22f19..2c2b2ed09f 100644 --- 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 index 062af8c574..9f4a7858e8 100644 --- 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 index 33100d5ff7..fdc0dd551f 100644 --- 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 index a4853e42b6..9af0bcd83d 100644 --- 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 index 31b5a76e30..0a18c92a5d 100644 --- 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 index 94224b4b98..960a52882f 100644 --- 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", diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json index d6fa856866..a6be92c031 100644 --- a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json +++ b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json @@ -170,6 +170,8 @@ "deleteResourceYes": "Sì, sono sicuro", "underApproval": "In approvazione", "unpublish": "Non pubblicato", + "fullscreen": "Schermo intero", + "nativescreen": "Esci da modalità schermo intero", "prompPendingChanges": "Sono presenti modifiche non salvate, sei sicuro di voler uscire?", "errorCompactPermissionsTitle": "Errore nell'aggiornamento delle autorizzazioni", "errorCompactPermissionsMessage": "Non è stato possibile aggiornare i permessi",