Squashed commit of the following:

commit 4c33342 Author: stefano bovio <stefano.bovio@geo-solutions.it> Date: Thu Jun 24 16:48:29 2021 +0200 Fix orientation of preview map buttons (GeoNode#267) commit e47d605 Author: Luca Orlandini <luca.orlandini@gmail.com> Date: Thu Jun 24 16:47:33 2021 +0200 Client - Detail panel / viewer improvement (GeoNode#264) commit 1bb0fce Author: stefano bovio <stefano.bovio@geo-solutions.it> Date: Thu Jun 24 16:23:21 2021 +0200 Fix positioning of editor's client components (GeoNode#265) commit be23726 Author: stefano bovio <stefano.bovio@geo-solutions.it> Date: Thu Jun 24 16:06:28 2021 +0200 Fix padding of floating windows (GeoNode#263) commit 0682ae1 Author: stefano bovio <stefano.bovio@geo-solutions.it> Date: Thu Jun 24 14:57:31 2021 +0200 Fix style for menu buttons (GeoNode#262) commit 05a99d1 Author: Luca Orlandini <luca.orlandini@gmail.com> Date: Thu Jun 24 14:13:19 2021 +0200 Client - Seo: first the resource title, then site name (GeoNode#259)
luorlandini · Jun 24, 2021 · 9c1c618 · 9c1c618
1 parent 9bdaa6e
commit 9c1c618
Show file tree

Hide file tree

Showing 20 changed files with 225 additions and 64 deletions.
diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
@@ -26,7 +26,8 @@ const loaderComponent = () => <div className="pdf-loader"><Loader size={70}/></d
 const mediaDefaultProps = {
     video: {
         mode: "view",
-        inView: true
+        inView: true,
+        fit: 'contain'
     },
     image: {
         fit: "contain",

diff --git a/geonode_mapstore_client/client/js/components/MetaTags/Meta.jsx b/geonode_mapstore_client/client/js/components/MetaTags/Meta.jsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
-export const MetaTags = ({siteName, content, logo, contentURL =  window.location.href}) => {
+export const MetaTags = ({siteName, title, content, logo, contentURL =  window.location.href}) => {
     return (<Helmet>
-        <title>{siteName}</title>
+        <title>{title}</title>
         <meta name="description" content={content} />
-        <meta property="og:title" content={siteName + " " +  content} />
+        <meta property="og:title" content={title} />
         <meta property="og:site_name" content={siteName} />
         <meta property="og:url" content={contentURL} />
         <meta property="og:description" content={content} />
         <meta property="og:image" content={logo} />
 
         <meta name="twitter:site" content={siteName} />
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={siteName} />
+        <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={content} />
         <meta name="twitter:image:src" content={logo}/>
     </Helmet>);

diff --git a/geonode_mapstore_client/client/js/components/MetaTags/__tests__/Meta-test.jsx b/geonode_mapstore_client/client/js/components/MetaTags/__tests__/Meta-test.jsx
@@ -18,6 +18,7 @@ describe('MetaTags', () => {
     it('should render by default', () => {
         render(<Meta
             logo={'http://example.com'}
+            title={"Test Title"}
             siteName={"Test Site"}
             content={"Test Content"}
         />, document.getElementById("container"));
@@ -29,6 +30,10 @@ describe('MetaTags', () => {
                 expect(tag.content).toEqual("Test Site");
             }
 
+            if (tag.property === "title") {
+                expect(tag.content).toEqual("Test Title");
+            }
+
             if (tag.name === "decription" || tag.name === "twitter:description") {
                 expect(tag.content).toEqual("Test Content");
             }

diff --git a/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx b/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx
@@ -26,7 +26,7 @@ function buttonTheme(style, name) {
         includeFallbackColors: true
     }).toHexString();
 
-    const borderColor = style.borderColor || tinycolor(bg).darken(8).toString();
+    const borderColor = style.borderColor || bg;
     const focusColor = style.focusColor || color;
     const focusBg = style.focusBg || tinycolor(bg).darken(10).toString();
     const focusBorderColor = style.focusBorderColor || tinycolor(bg).darken(25).toString();
@@ -81,6 +81,9 @@ function RootStyle({
                 bodyShade,
                 placeholder,
                 disabled,
+                info,
+                success,
+                warning,
                 danger,
                 primary,
                 link,
@@ -91,17 +94,30 @@ function RootStyle({
                 badge,
                 footer,
                 buttonDefault,
-                buttonPrimary
+                buttonPrimary,
+                buttonInfo,
+                buttonSuccess,
+                buttonWarning,
+                buttonDanger
             } = theme;
-            const color = themeColor && tinycolor.mostReadable(themeColor, ['#ffffff', '#000000'], {
+
+            const bg = primary?.value || themeColor;
+            const color = primary?.contrast || bg && tinycolor.mostReadable(bg, ['#ffffff', '#000000'], {
                 includeFallbackColors: true
             }).toHexString();
+
+            const btnPrimary = (bg || buttonPrimary) && {
+                ...(bg && { bg }),
+                ...(color && { color }),
+                ...buttonPrimary
+            };
+
             return {
-                ...(themeColor && {
+                ...(bg && {
                     '--gn-primary-contrast': color,
-                    '--gn-primary': themeColor,
-                    '--gn-loader-primary-color': themeColor,
-                    '--gn-loader-primary-fade-color': tinycolor(themeColor).setAlpha(0.2).toString(),
+                    '--gn-primary': bg,
+                    '--gn-loader-primary-color': bg,
+                    '--gn-loader-primary-fade-color': tinycolor(bg).setAlpha(0.2).toString(),
                     '--gn-loader-primary-contrast-color': color,
                     '--gn-loader-primary-contrast-fade-color': tinycolor(color).setAlpha(0.2).toString()
                 }),
@@ -124,14 +140,26 @@ function RootStyle({
                     '--gn-disabled-color': disabled.color || '#acacac',
                     '--gn-disabled-bg': disabled.bg || '#fcfcfc'
                 }),
-                ...(danger && {
-                    '--gn-danger-contrast': danger.contrast || '#ffffff',
-                    '--gn-danger': danger.value || '#D0021B'
-                }),
                 ...(primary && {
                     '--gn-primary-contrast': primary.contrast || '#ffffff',
                     '--gn-primary': primary.value || '#397AAB'
                 }),
+                ...(info && {
+                    '--gn-info-contrast': info.contrast || '#ffffff',
+                    '--gn-info': info.value || '#639fcc'
+                }),
+                ...(success && {
+                    '--gn-success-contrast': success.contrast || '#ffffff',
+                    '--gn-success': success.value || '#58cf80'
+                }),
+                ...(warning && {
+                    '--gn-warning-contrast': warning.contrast || '#ffffff',
+                    '--gn-warning': warning.value || '#ebbc35'
+                }),
+                ...(danger && {
+                    '--gn-danger-contrast': danger.contrast || '#ffffff',
+                    '--gn-danger': danger.value || '#bb4940'
+                }),
                 ...(link && {
                     '--gn-link-color': link.color || '#397AAB',
                     '--gn-link-hover-color': link.hoverColor || '#1b4d74'
@@ -166,11 +194,12 @@ function RootStyle({
                         '--gn-footer-link-hover-color': footer.link.hoverColor || '#1b4d74'
                     })
                 }),
-                ...buttonDefault?.bg && buttonTheme(buttonDefault),
-                ...(buttonPrimary?.bg || themeColor || primary?.bg) && buttonTheme({
-                    bg: themeColor || primary?.bg,
-                    ...buttonPrimary
-                }, 'primary')
+                ...(buttonDefault?.bg && buttonTheme(buttonDefault)),
+                ...(buttonInfo?.bg && buttonTheme(buttonInfo, 'info')),
+                ...(buttonSuccess?.bg && buttonTheme(buttonSuccess, 'success')),
+                ...(buttonWarning?.bg && buttonTheme(buttonWarning, 'warning')),
+                ...(buttonDanger?.bg && buttonTheme(buttonDanger, 'danger')),
+                ...(btnPrimary?.bg && buttonTheme(btnPrimary, 'primary'))
             };
         }
         return {};

diff --git a/geonode_mapstore_client/client/js/components/Spinner/Spinner.jsx b/geonode_mapstore_client/client/js/components/Spinner/Spinner.jsx
@@ -22,7 +22,7 @@ function Spinner({
             <div
                 { ...props }
                 id={id}
-                className={`spinner${customClassName}`}
+                className={`gn-spinner${customClassName}`}
                 style={style}
             >
                 <div />

diff --git a/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx
@@ -178,7 +178,7 @@ function DetailsPanel({
                         }}>
                         <FaIcon name={icon}/>
                     </div>
-                    {embedUrl
+                    {embedUrl && !editThumbnail
                         ? <iframe
                             key={embedUrl}
                             src={embedUrl}
@@ -256,7 +256,6 @@ function DetailsPanel({
                                 {detailUrl && <Button
                                     variant="default"
                                     href={detailUrl}
-                                    target="_blank"
                                     rel="noopener noreferrer">
                                     <Message msgId={`gnhome.view${name || ''}`}/>
                                 </Button>}

diff --git a/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx b/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
@@ -37,11 +37,12 @@ const LanguageSelector = forwardRef(({
         >
             {inline
                 ? options.map((option) => {
+                    const active = option.value === value;
                     return (
                         <Button
-                            active={option.value === value}
+                            active={active}
                             key={option.key}
-                            variant="default"
+                            variant={active ? 'default' : 'primary'}
                             onClick={() => onSelect(option.value)}
                         >
                             {option.key}

diff --git a/geonode_mapstore_client/client/js/epics/gnviewer.js b/geonode_mapstore_client/client/js/epics/gnviewer.js
@@ -118,7 +118,7 @@ export const gnViewerRequestLayerConfig = (action$) =>
                     ...(page === 'layer_edit_style_viewer'
                         ? [
                             selectNode(newLayer.id, 'layer', false),
-                            showSettings(newLayer.id, 'layer', {
+                            showSettings(newLayer.id, 'layers', {
                                 opacity: newLayer.opacity || 1
                             }),
                             setControlProperty('layersettings', 'activeTab', 'style'),

diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -20,7 +20,7 @@ import controls from '@mapstore/framework/reducers/controls';
 import {toggleControl} from '@mapstore/framework/actions/controls';
 import gnresource from '@js/reducers/gnresource';
 import Message from '@mapstore/framework/components/I18N/Message';
-import { userSelector } from '@mapstore/framework/selectors/security';
+import { canEditResource } from '@js/selectors/gnresource';
 import Button from '@js/components/Button';
 
 const ConnectedDetailsPanel = connect(
@@ -37,24 +37,22 @@ const ConnectedDetailsPanel = connect(
     }
 )(DetailsPanel);
 
-const ButtonViewer = ({user,  onClick}) => {
+const ButtonViewer = ({onClick}) => {
 
     const handleClickButton = () => {
         onClick();
     };
 
-    return (user && <Button
+    return (<Button
         variant="primary"
         onClick={handleClickButton}
     > <Message msgId="gnviewer.details"/>
     </Button>);
 };
 
 const ConnectedButton = connect(
-    createSelector([userSelector],
-        (user) => ({
-            user
-        })),
+    createSelector([],
+        () => ({})),
     {
         onClick: toggleControl.bind(null, 'DetailViewer', null)
     }
@@ -65,7 +63,9 @@ function DetailViewer({
     enabled,
     onEditResource,
     onEditAbstractResource,
-    onEditThumbnail}) {
+    onEditThumbnail,
+    canEdit
+}) {
 
     const handleTitleValue = (val) => {
         onEditResource(val);
@@ -87,11 +87,11 @@ function DetailViewer({
                 height: '100%'
 
             }}>
-            { enabled && <ConnectedDetailsPanel
+            { !enabled && <ConnectedDetailsPanel
                 editTitle={handleTitleValue}
                 editAbstract={handleAbstractValue}
                 editThumbnail={handleEditThumbnail}
-                activeEditMode={enabled}
+                activeEditMode={!enabled && canEdit}
                 sectionStyle={{
                     width: '600px',
                     position: 'fixed'
@@ -103,9 +103,11 @@ function DetailViewer({
 
 const DetailViewerPlugin = connect(
     createSelector([
-        state => state?.controls?.DetailViewer?.enabled || false
-    ], (enabled) => ({
-        enabled
+        state => state?.controls?.DetailViewer?.enabled || false,
+        canEditResource
+    ], (enabled, canEdit) => ({
+        enabled,
+        canEdit
     })),
     {
         onEditResource: editTitleResource,

diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js
@@ -109,7 +109,14 @@ export const plugins = {
                 ActionNavbar: {
                     name: 'Catalog',
                     target: 'leftMenuItem',
-                    Component: CatalogActionButton
+                    Component: CatalogActionButton,
+                    priority: 1
+                },
+                ViewerLayout: {
+                    priority: 1
+                },
+                TOC: {
+                    priority: 1
                 }
             }
         }

diff --git a/geonode_mapstore_client/client/js/routes/DocumentViewer.jsx b/geonode_mapstore_client/client/js/routes/DocumentViewer.jsx
@@ -60,10 +60,11 @@ function DocumentViewerRoute({
     return (
         <>
             {resource &&   <MetaTags
-                logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
-                contentURL={resource.detail_url}
-                content={resource.abstract}
+                logo={resource?.thumbnail_url}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
             />}
             <ConnectedPluginsContainer
                 key="page-document-viewer"

diff --git a/geonode_mapstore_client/client/js/routes/GeoStoryViewer.jsx b/geonode_mapstore_client/client/js/routes/GeoStoryViewer.jsx
@@ -69,7 +69,8 @@ function GeoStoryViewerRoute({
         <>
             {resource &&  <MetaTags
                 logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
                 contentURL={resource.detail_url}
                 content={resource.abstract}
             />}

diff --git a/geonode_mapstore_client/client/js/routes/Home.jsx b/geonode_mapstore_client/client/js/routes/Home.jsx
@@ -381,7 +381,8 @@ function Home({
         <div className={`gn-home`}>
             <MetaTags
                 logo={resource ? resource.thumbnail_url : window.location.origin + config?.navbar?.logo[0]?.src}
-                siteName={siteName + " " + (resource ? resource.title : "")}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
                 contentURL={resource?.detail_url}
                 content={resource?.abstract}
             />

diff --git a/geonode_mapstore_client/client/js/routes/LayerViewer.jsx b/geonode_mapstore_client/client/js/routes/LayerViewer.jsx
@@ -61,10 +61,11 @@ function LayerViewerRoute({
     return (
         <>
             {resource &&  <MetaTags
-                logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
-                contentURL={resource.detail_url}
-                content={resource.abstract}
+                logo={resource?.thumbnail_url}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
             />}
             <ConnectedPluginsContainer
                 key="page-layer-viewer"

diff --git a/geonode_mapstore_client/client/js/routes/MapViewer.jsx b/geonode_mapstore_client/client/js/routes/MapViewer.jsx
@@ -64,9 +64,10 @@ function MapViewerRoute({
         <>
             {resource &&  <MetaTags
                 logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
-                contentURL={resource.detail_url}
-                content={resource.abstract}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
             />}
             <ConnectedPluginsContainer
                 key="page-map-viewer"