Harmonize close buttons for the various panels (#720)

GeoNode · Jan 19, 2022 · 72ec6be · 72ec6be
1 parent 03b4771
commit 72ec6be
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 12 deletions.
diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -8,6 +8,7 @@
  */
 
 import React, { useRef, useState, useEffect } from 'react';
+import { Glyphicon } from 'react-bootstrap';
 import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
 import Tabs from '@js/components/Tabs';
@@ -457,8 +458,8 @@ function DetailsPanel({
                         variant="default"
                         href={linkHref()}
                         onClick={closePanel}
-                        size="sm">
-                        <FaIcon name="times" />
+                        className="square-button">
+                        <Glyphicon glyph="1-close" />
                     </Button>
                 </div>
                 }

diff --git a/geonode_mapstore_client/client/js/plugins/Share.jsx b/geonode_mapstore_client/client/js/plugins/Share.jsx
@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { findIndex } from 'lodash';
+import { Glyphicon } from 'react-bootstrap';
 import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
 import { setControlProperty } from '@mapstore/framework/actions/controls';
 import Message from '@mapstore/framework/components/I18N/Message';
@@ -28,7 +29,6 @@ import {
     getViewedResourceType
 } from '@js/selectors/resource';
 import { updateResourceCompactPermissions } from '@js/actions/gnresource';
-import FaIcon from '@js/components/FaIcon/FaIcon';
 import Permissions from '@js/components/Permissions';
 import { getUsers, getGroups, getResourceTypes } from '@js/api/geonode/v2';
 import { resourceToPermissionEntry, availableResourceTypes, getResourcePermissions } from '@js/utils/ResourceUtils';
@@ -121,8 +121,8 @@ function Share({
             >
                 <div className="gn-share-panel-head">
                     <h2><Message msgId="gnviewer.shareThisResource" /></h2>
-                    <Button size="sm" onClick={() => onClose()}>
-                        <FaIcon name="times"/>
+                    <Button className="square-button" onClick={() => onClose()}>
+                        <Glyphicon glyph="1-close"/>
                     </Button>
                 </div>
                 <div className="gn-share-panel-body">

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -12,7 +12,8 @@
 
 #gn-components-theme(@theme-vars) {
     .gn-details-panel,
-    .gn-details-panel > * {
+    .gn-details-panel > *,
+    .gn-details-panel-header {
         .color-var(@theme-vars[main-color]);
         .background-color-var(@theme-vars[main-bg]);
     }
@@ -123,6 +124,9 @@
 .gn-details-panel-header {
     display: flex;
     flex-direction: row-reverse;
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .gn-details-panel-preview {

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_share.less b/geonode_mapstore_client/client/themes/geonode/less/_share.less
@@ -58,10 +58,9 @@
             flex: 1;
             word-break: break-all;
             margin: 0;
-            font-size: 1.5rem;
+            font-size: 1.4rem;
         }
-        padding: 0.5rem;
-        margin: 0.5rem;
+        margin: 0 0.5rem;
     }
     .gn-share-panel-body {
         flex: 1;

diff --git a/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less b/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less
@@ -15,6 +15,33 @@
 @icon-size-md: 15px;
 @square-btn-medium-size: 30px;
 
+// **************
+// Theme
+// **************
+
+#gn-components-theme(@theme-vars) {
+    .ms-side-panel .ms-header.ms-primary .row:first-child {
+        .color-var(@theme-vars[main-color]);
+        .background-color-var(@theme-vars[main-bg]);
+        .square-button {
+            .color-var(@theme-vars[main-color], true);
+            .background-color-var(@theme-vars[main-bg], true);
+        }
+    }
+}
+
+// **************
+// Layout
+// **************
+
+.close {
+    font-size: 16px;
+    opacity: 1;
+}
+.modal-header .close {
+    margin-top: 0;
+}
+
 #drawer-menu-button {
     z-index: 5;
 }
@@ -77,8 +104,12 @@
 // in this specific context those value have different uom
 // we should override this to ensure to use rem and have the correct value for padding
 .ms-resizable-modal > .modal-content > .modal-header {
-    height: (@font-size-h4 * 3);
-    padding: @font-size-h4;
+    height: auto;
+    padding: 0.6rem;
+}
+.modal-header {
+    height: auto;
+    padding: 0.6rem;
 }
 // the input small size is not computed correctly due to rem value
 // this override will fix the attribute table filter inputs
@@ -159,4 +190,81 @@ div#mapstore-globalspinner {
 
 #mapstore-map-footer-container {
     z-index: 1100;
-}
+}
+
+// review drawer menu and toc style
+
+#mapstore-drawermenu {
+    .nav-content {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        .navHeader {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-between;
+            min-height: auto !important;
+            height: auto !important;
+        }
+        .nav-body {
+            flex: 1;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+        }
+        .panel,
+        .panel-body,
+        .panel-body > div {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+        }
+
+    }
+    .mapstore-toc-head {
+        height: auto !important;
+    }
+    .mapstore-toc-head-title-container {
+        display: none;
+    }
+    .mapstore-toc {
+        flex: 1;
+        width: 100%;
+        position: relative;
+        .mapstore-layers-container {
+            overflow: auto;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.mapstore-query-builder .m-header {
+    box-shadow: none;
+}
+
+.widgets-builder-header > .row > .text-center {
+    display: flex;
+    flex-direction: row-reverse;
+    > span {
+        padding: 0 !important;
+        flex: 1;
+    }
+}
+
+.ms-side-panel .ms-header {
+    box-shadow: none;
+}