Add overlay panel for detail viewer (#392)

GeoNode · Jul 29, 2021 · 7880f7e · 7880f7e
1 parent fd8596c
commit 7880f7e
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 19 deletions.
diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx
@@ -105,7 +105,8 @@ const ActionNavbar = forwardRef(({
     formatHref,
     cfg,
     variant,
-    size
+    size,
+    children
 }, ref) => {
 
     return (
@@ -130,7 +131,7 @@ const ActionNavbar = forwardRef(({
                             size={size}
                         />
                     }
-
+                    {children}
                     {
 
                         rightItems.length > 0 &&

diff --git a/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx b/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
@@ -12,9 +12,11 @@ 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 { getResourcePerms, canAddResource } from '@js/selectors/resource';
+import { getResourcePerms, canAddResource, getResourceData } from '@js/selectors/resource';
 import { hasPermissionsTo, reduceArrayRecursive } from '@js/utils/MenuUtils';
+import { getResourceTypesInfo } from '@js/utils/ResourceUtils';
 
 function checkResourcePerms(menuItem, resourcePerms) {
     if (menuItem.type && menuItem.perms) {
@@ -26,9 +28,12 @@ function checkResourcePerms(menuItem, resourcePerms) {
 function ActionNavbarPlugin({
     items,
     leftMenuItems,
-    resourcePerms
+    resourcePerms,
+    resource
 }, context) {
 
+    const types = getResourceTypesInfo();
+    const { icon } = types[resource?.resource_type] || {};
     const { loadedPlugins } = context;
     const configuredItems = usePluginItems({ items, loadedPlugins });
 
@@ -51,7 +56,9 @@ function ActionNavbarPlugin({
             leftItems={leftItems}
             variant="default"
             size="sm"
-        />
+        >
+            <h1 className="gn-action-navbar-title">{icon && <FaIcon name={icon}/>}{'  '}{resource?.title}</h1>
+        </ActionNavbar>
     );
 }
 
@@ -68,11 +75,13 @@ ActionNavbarPlugin.defaultProps = {
 const ConnectedActionNavbarPlugin = connect(
     createSelector([
         getResourcePerms,
-        canAddResource
-    ], (resourcePerms, userCanAddResource) => ({
+        canAddResource,
+        getResourceData
+    ], (resourcePerms, userCanAddResource, resource) => ({
         resourcePerms: (resourcePerms.length > 0 ) ?
             resourcePerms : ((userCanAddResource)
-                ? [ "change_resourcebase"] : [] )
+                ? [ "change_resourcebase"] : [] ),
+        resource
     }))
 )(ActionNavbarPlugin);
 

diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -114,11 +114,11 @@ function DetailViewer({
                     height: '100%'
 
                 }}>
-                { !enabled && <ConnectedDetailsPanel
+                { enabled && <ConnectedDetailsPanel
                     editTitle={handleTitleValue}
                     editAbstract={handleAbstractValue}
                     editThumbnail={handleEditThumbnail}
-                    activeEditMode={!enabled && canEdit}
+                    activeEditMode={enabled && canEdit}
                     enableFavorite={!!user}
                     sectionStyle={{
                         width,
@@ -164,7 +164,7 @@ export default createPlugin('DetailViewer', {
     containers: {
         ViewerLayout: {
             name: 'DetailViewer',
-            target: 'rightColumn',
+            target: 'rightOverlay',
             priority: 1
         },
         ActionNavbar: {

diff --git a/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx b/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx
@@ -93,6 +93,19 @@ function ViewerLayout({
                         .map(({ Component, name }) => <Component key={name} />)}
                 </div>
             </div>
+            <div
+                className="gn-viewer-right-overlay shadow-far"
+                style={{
+                    position: 'absolute',
+                    right: 0,
+                    height: '100%',
+                    zIndex: 2000,
+                    transform: 'all 0.3s'
+                }}>
+                {configuredItems
+                    .filter(({ target }) => target === 'rightOverlay')
+                    .map(({ Component, name }) => <Component key={name} />)}
+            </div>
             <footer>
                 {configuredItems
                     .filter(({ target }) => target === 'footer')

diff --git a/geonode_mapstore_client/client/js/selectors/resource.js b/geonode_mapstore_client/client/js/selectors/resource.js
@@ -47,3 +47,7 @@ export const canAddResource = (state) => {
 export const isNewResource = (state) => {
     return !!state?.gnresource?.isNew;
 };
+
+export const getResourceData = (state) => {
+    return state?.gnresource?.data;
+};
diff --git a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
@@ -2603,8 +2603,7 @@
                 "name": "MapFooter",
                 "override": {
                     "ViewerLayout": {
-                        "priority": 1,
-                        "target": "footer"
+                        "priority": 1
                     }
                 }
             },
@@ -2834,8 +2833,7 @@
                 "name": "MapFooter",
                 "override": {
                     "ViewerLayout": {
-                        "priority": 1,
-                        "target": "footer"
+                        "priority": 1
                     }
                 }
             },
@@ -2935,8 +2933,7 @@
                 "name": "MapFooter",
                 "override": {
                     "ViewerLayout": {
-                        "priority": 1,
-                        "target": "footer"
+                        "priority": 1
                     }
                 }
             },
@@ -3164,8 +3161,7 @@
                 "name": "MapFooter",
                 "override": {
                     "ViewerLayout": {
-                        "priority": 1,
-                        "target": "footer"
+                        "priority": 1
                     }
                 }
             },

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_menu.less b/geonode_mapstore_client/client/themes/geonode/less/_menu.less
@@ -184,6 +184,13 @@
     z-index: 10;
 }
 
+.gn-action-navbar-title {
+    margin: 0;
+    font-weight: 400;
+    font-size: 1rem;
+    padding: 0 0.5rem;
+}
+
 .gn-language-selector {
     margin-left: 0.4rem;
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less b/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less
@@ -97,3 +97,26 @@
 .input-sm {
     height: 1.75rem;
 }
+
+// fix share modal style
+.gn-share-modal {
+    overflow: visible;
+    .modal-dialog,
+    .ms-resizable-modal > .modal-content > .modal-body > div {
+        overflow: visible;
+    }
+    .col-md-4 {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .row {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .modal-body {
+        margin: 8px;
+    }
+    .modal-footer {
+        display: none;
+    }
+}