Align geonode-client with mapstore theme (GeoNode#257)

marthamareal · Jun 23, 2021 · 06eaa64 · 06eaa64
1 parent 9d94217
commit 06eaa64
Show file tree

Hide file tree

Showing 51 changed files with 1,209 additions and 1,039 deletions.
diff --git a/geonode_mapstore_client/client/MapStore2 b/geonode_mapstore_client/client/MapStore2
diff --git a/geonode_mapstore_client/client/js/actions/gnviewer.js b/geonode_mapstore_client/client/js/actions/gnviewer.js
@@ -14,10 +14,11 @@ export const REQUEST_DOCUMENT_CONFIG = 'GEONODE_VIEWER:REQUEST_DOCUMENT_CONFIG';
 export const REQUEST_NEW_GEOSTORY_CONFIG = "GEONODE:VIEWER:REQUEST_NEW_GEOSTORY_CONFIG";
 
 
-export function requestLayerConfig(pk) {
+export function requestLayerConfig(pk, page) {
     return {
         type: REQUEST_LAYER_CONFIG,
-        pk
+        pk,
+        page
     };
 }
 

diff --git a/geonode_mapstore_client/client/js/apps/gn-viewer.js b/geonode_mapstore_client/client/js/apps/gn-viewer.js
@@ -66,13 +66,15 @@ import {
 } from '@js/epics';
 import gnviewerEpics from '@js/epics/gnviewer';
 import maplayout from '@mapstore/framework/reducers/maplayout';
-import 'react-widgets/dist/css/react-widgets.css';
-import 'react-select/dist/react-select.css';
 
 import pluginsDefinition from '@js/plugins/index';
 import ReactSwipe from 'react-swipeable-views';
 import SwipeHeader from '@mapstore/framework/components/data/identify/SwipeHeader';
 
+import { registerMediaAPI } from '@mapstore/framework/api/media';
+import * as geoNodeMediaApi from '@js/observables/media/geonode';
+registerMediaAPI('geonode', geoNodeMediaApi);
+
 const requires = {
     ReactSwipe,
     SwipeHeader

diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx
@@ -42,6 +42,7 @@ const LeftContentMenu = ({ items, formatHref, query }) => {
                     childrenClass={`gn-user-dropdown`}
                     formatHref={formatHref}
                     query={query}
+                    variant="primary"
                 />
 
             }
@@ -83,7 +84,7 @@ const RightContentMenu = ({ items, formatHref, query, parentRef, cfg }) => {
                     childrenClass={`gn-user-dropdown`}
                     formatHref={formatHref}
                     query={query}
-
+                    variant="primary"
                 />
 
             }

diff --git a/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx b/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx
@@ -76,7 +76,8 @@ const DropdownList = ({
     badgeValue,
     containerNode,
     size,
-    alignRight
+    alignRight,
+    variant
 }) => {
 
     const dropdownItems = items
@@ -106,7 +107,7 @@ const DropdownList = ({
     const DropdownToogle = (
         <Dropdown.Toggle
             id={ `gn-toggle-dropdown-${id}`}
-            bsStyle={`default`}
+            bsStyle={variant}
             tabIndex={tabIndex}
             style={toogleStyle}
             bsSize={size}

diff --git a/geonode_mapstore_client/client/js/components/Menu/Menu.js b/geonode_mapstore_client/client/js/components/Menu/Menu.js
@@ -32,7 +32,8 @@ const Menu = forwardRef(({
     query,
     formatHref,
     size,
-    alignRight
+    alignRight,
+    variant
 }, ref) => {
 
     return (
@@ -42,6 +43,7 @@ const Menu = forwardRef(({
                     return (
                         <li key={idx}>
                             <MenuItem
+                                variant={variant}
                                 item={{ ...item, id: item.id || idx }}
                                 size={size}
                                 alignRight={alignRight}

diff --git a/geonode_mapstore_client/client/js/components/Menu/MenuItem.js b/geonode_mapstore_client/client/js/components/Menu/MenuItem.js
@@ -40,7 +40,7 @@ import {
  *
  */
 
-const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, draggable, classItem, size, alignRight }) => {
+const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, draggable, classItem, size, alignRight, variant }) => {
 
     const { formatHref, query } = menuItemsProps;
     const { id, type, label, labelId = '', items = [], href, style, badge = '', image, subType, Component } = item;
@@ -60,6 +60,7 @@ const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, draggable, cl
             containerNode={containerNode}
             size={size}
             alignRight={alignRight}
+            variant={variant}
         />);
     }
 
@@ -75,7 +76,7 @@ const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, draggable, cl
                     draggable={draggable}
                     href={href}
                     style={style}
-
+                    variant={variant}
                 >
                     {labelId && <Message msgId={labelId} /> || label}
                     {isValidBadgeValue(badgeValue) && <Badge>{badgeValue}</Badge>}
@@ -104,6 +105,7 @@ const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, draggable, cl
                     query: { f: item.id },
                     replaceQuery: active ? false : true
                 })}
+                variant={variant}
             >
                 {labelId && <Message msgId={labelId} /> || label}
                 {isValidBadgeValue(badgeValue) && <Badge>{badgeValue}</Badge>}

diff --git a/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx b/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx
@@ -11,15 +11,65 @@
 import React, { useMemo } from 'react';
 import tinycolor from 'tinycolor2';
 
-function rootVariables(variables) {
-    return ':root {\n' +
+function rootVariables(variables, selector = ':root') {
+    return selector + ' {\n' +
     Object.keys(variables)
         .filter(key => variables[key])
         .map((key) => `\t${key}: ${variables[key]};`).join('\n') +
     '\n}';
 }
 
+function buttonTheme(style, name) {
+    const prefix = name ? '-' + name : '';
+    const bg = style.bg;
+    const color = style.color || tinycolor.mostReadable(bg, ['#ffffff', '#000000'], {
+        includeFallbackColors: true
+    }).toHexString();
+
+    const borderColor = style.borderColor || tinycolor(bg).darken(8).toString();
+    const focusColor = style.focusColor || color;
+    const focusBg = style.focusBg || tinycolor(bg).darken(10).toString();
+    const focusBorderColor = style.focusBorderColor || tinycolor(bg).darken(25).toString();
+    const hoverColor = style.hoverColor || color;
+    const hoverBg = style.hoverBg || tinycolor(bg).darken(10).toString();
+    const hoverBorderColor = style.hoverBorderColor || tinycolor(bg).darken(12).toString();
+    const activeColor = style.activeColor || color;
+    const activeBg = style.activeBg || tinycolor(bg).darken(10).toString();
+    const activeBorderColor = style.activeBorderColor || tinycolor(bg).darken(12).toString();
+    const activeHoverColor = style.activeHoverColor || color;
+    const activeHoverBg = style.activeHoverBg || tinycolor(bg).darken(17).toString();
+    const activeHoverBorderColor = style.activeHoverBorderColor || tinycolor(bg).darken(25).toString();
+    const disableColor = style.disableColor || color;
+    const disabledBg = style.disabledBg || tinycolor(tinycolor(bg).desaturate(30).toString()).lighten(20).toString();
+    const disabledBorderColor = style.disabledBorderColor || tinycolor(tinycolor(bg).desaturate(30).toString()).lighten(20).toString();
+    const badgeColor = style.badgeColor || bg;
+    const badgeBg = style.badgeBg || color;
+    return {
+        [`--gn-button${prefix}-color`]: color,
+        [`--gn-button${prefix}-bg`]: bg,
+        [`--gn-button${prefix}-border-color`]: borderColor,
+        [`--gn-button${prefix}-focus-color`]: focusColor,
+        [`--gn-button${prefix}-focus-bg`]: focusBg,
+        [`--gn-button${prefix}-focus-border-color`]: focusBorderColor,
+        [`--gn-button${prefix}-hover-color`]: hoverColor,
+        [`--gn-button${prefix}-hover-bg`]: hoverBg,
+        [`--gn-button${prefix}-hover-border-color`]: hoverBorderColor,
+        [`--gn-button${prefix}-active-color`]: activeColor,
+        [`--gn-button${prefix}-active-bg`]: activeBg,
+        [`--gn-button${prefix}-active-border-color`]: activeBorderColor,
+        [`--gn-button${prefix}-active-hover-color`]: activeHoverColor,
+        [`--gn-button${prefix}-active-hover-bg`]: activeHoverBg,
+        [`--gn-button${prefix}-active-hover-border-color`]: activeHoverBorderColor,
+        [`--gn-button${prefix}-disabled-color`]: disableColor,
+        [`--gn-button${prefix}-disabled-bg`]: disabledBg,
+        [`--gn-button${prefix}-disabled-border-color`]: disabledBorderColor,
+        [`--gn-button${prefix}-badge-color`]: badgeColor,
+        [`--gn-button${prefix}-badge-bg`]: badgeBg
+    };
+}
+
 function RootStyle({
+    targetId,
     theme
 }) {
 
@@ -39,24 +89,32 @@ function RootStyle({
                 focus,
                 tag,
                 badge,
-                footer
+                footer,
+                buttonDefault,
+                buttonPrimary
             } = theme;
             const color = themeColor && tinycolor.mostReadable(themeColor, ['#ffffff', '#000000'], {
                 includeFallbackColors: true
             }).toHexString();
             return {
                 ...(themeColor && {
-                    '--gn-primary-color': color,
-                    '--gn-primary-bg': themeColor
+                    '--gn-primary-contrast': color,
+                    '--gn-primary': themeColor,
+                    '--gn-loader-primary-color': themeColor,
+                    '--gn-loader-primary-fade-color': tinycolor(themeColor).setAlpha(0.2).toString(),
+                    '--gn-loader-primary-contrast-color': color,
+                    '--gn-loader-primary-contrast-fade-color': tinycolor(color).setAlpha(0.2).toString()
                 }),
                 ...(body && {
-                    '--gn-body-color': body.color || '#000000',
-                    '--gn-body-bg': body.bg || '#ffffff',
-                    '--gn-body-border-color': body.borderColor || '#dddddd'
+                    ' --gn-main-color': body.color || '#000000',
+                    '--gn-main-bg': body.bg || '#ffffff',
+                    '--gn-main-border-color': body.borderColor || '#dddddd',
+                    '--gn-loader-color': '',
+                    '--gn-loader-fade-color': ''
                 }),
                 ...(bodyShade && {
-                    '--gn-body-shade-color': bodyShade.color || '#000000',
-                    '--gn-body-shade-bg': bodyShade.bg || '#f2f0f0'
+                    '--gn-main-variant-color': bodyShade.color || '#000000',
+                    '--gn-main-variant-bg': bodyShade.bg || '#f2f0f0'
                 }),
                 ...(placeholder && {
                     '--gn-placeholder-color': placeholder.color || '#aaaaaa',
@@ -67,11 +125,12 @@ function RootStyle({
                     '--gn-disabled-bg': disabled.bg || '#fcfcfc'
                 }),
                 ...(danger && {
-                    '--gn-danger-color': danger.color || '#D0021B'
+                    '--gn-danger-contrast': danger.contrast || '#ffffff',
+                    '--gn-danger': danger.value || '#D0021B'
                 }),
                 ...(primary && {
-                    '--gn-primary-color': primary.color || '#ffffff',
-                    '--gn-primary-bg': primary.bg || '#397AAB'
+                    '--gn-primary-contrast': primary.contrast || '#ffffff',
+                    '--gn-primary': primary.value || '#397AAB'
                 }),
                 ...(link && {
                     '--gn-link-color': link.color || '#397AAB',
@@ -106,14 +165,19 @@ function RootStyle({
                         '--gn-footer-link-color': footer.link.color || '#397AAB',
                         '--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')
             };
         }
         return {};
     }, [theme]);
     return (
         <style dangerouslySetInnerHTML={{
-            __html: rootVariables(variables)
+            __html: rootVariables(variables, `#${targetId}`)
         }} />
     );
 }

diff --git a/geonode_mapstore_client/client/js/components/Router/Router.jsx b/geonode_mapstore_client/client/js/components/Router/Router.jsx
@@ -49,6 +49,7 @@ function ThemeLoader({
 }
 
 const Router = forwardRef(({
+    id,
     plugins,
     locale,
     routes,
@@ -63,14 +64,16 @@ const Router = forwardRef(({
     return (
         <>
             <RootStyle
+                targetId={id}
                 theme={geoNodeConfiguration.theme}
             />
             <ThemeLoader
                 themeCfg={themeCfg}
                 loaderComponent={loaderComponent}
             >
                 <div
-                    className={`${className} gn-theme-${variant}`}
+                    id={id}
+                    className={`${className} gn-theme-${variant} gn-theme`}
                     ref={ref}
                 >
                     <Localized
@@ -118,6 +121,7 @@ const Router = forwardRef(({
 });
 
 Router.propTypes = {
+    id: PropTypes.string,
     plugins: PropTypes.object,
     locale: PropTypes.object,
     className: PropTypes.string,
@@ -129,6 +133,7 @@ Router.propTypes = {
 };
 
 Router.defaultProps = {
+    id: 'ms-app',
     plugins: {},
     locale: {
         messages: {},

diff --git a/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx b/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
@@ -51,7 +51,7 @@ const LanguageSelector = forwardRef(({
                 : <Dropdown pullRight>
                     <Dropdown.Toggle
                         id="language-selector"
-                        bsStyle="default"
+                        bsStyle="primary"
                         bsSize="sm"
                         noCaret
                     >