Remove edit icons from detail panel (#408)

GeoNode · Aug 11, 2021 · d6f75a5 · d6f75a5
1 parent 0207c40
commit d6f75a5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 50 deletions.
diff --git a/geonode_mapstore_client/client/js/components/ContentsEditable/TextEditable.jsx b/geonode_mapstore_client/client/js/components/ContentsEditable/TextEditable.jsx
@@ -12,13 +12,17 @@ import ContentEditable from 'react-contenteditable';
 const TextEditable = forwardRef(({
     text,
     className = "gn-text-editable",
+    tagName,
+    disabled,
     onEdit = () => {}
 
 }, ref ) => {
     return (<ContentEditable
         innerRef={ref}
         className={className}
         html={text}
+        tagName={tagName}
+        disabled={disabled}
         onClick={evt => {
             evt.stopPropagation();
         }}

diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -8,7 +8,6 @@
  */
 
 import React, { useRef, useState, useEffect } from 'react';
-import DOMPurify from 'dompurify';
 import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
 import Tabs from '@js/components/Tabs';
@@ -26,16 +25,26 @@ import { TextEditable, ThumbnailEditable } from '@js/components/ContentsEditable
 
 const CopyToClipboard = tooltip(CopyToClipboardCmp);
 
-const EditTitle = ({ title, onEdit }) => {
+const EditTitle = ({ title, onEdit, tagName, disabled }) => {
     return (
         <div className="editContainer">
-            <TextEditable onEdit={onEdit} text={title} />
+            <TextEditable
+                tagName={tagName}
+                onEdit={onEdit}
+                text={title}
+                disabled={disabled}
+            />
         </div>);
 };
 
-const EditAbstract = ({ abstract, onEdit }) => (
+const EditAbstract = ({ abstract, onEdit, tagName, disabled }) => (
     <div className="editContainer">
-        <TextEditable onEdit={onEdit} text={abstract} />
+        <TextEditable
+            tagName={tagName}
+            onEdit={onEdit}
+            text={abstract}
+            disabled={disabled}
+        />
     </div>
 
 );
@@ -125,16 +134,6 @@ function DetailsPanel({
     onFavorite,
     enableFavorite
 }) {
-    const [editModeTitle, setEditModeTitle] = useState(false);
-    const [editModeAbstract, setEditModeAbstract] = useState(false);
-
-    const handleEditModeTitle = () => {
-        setEditModeTitle(!editModeTitle);
-    };
-
-    const handleEditModeAbstract = () => {
-        setEditModeAbstract(!editModeAbstract);
-    };
 
     const detailsContainerNode = useRef();
     const isMounted = useRef();
@@ -377,20 +376,10 @@ function DetailsPanel({
 
                     <div className="gn-details-panel-content-text">
                         <div className="gn-details-panel-title" >
+                            <span className="gn-details-panel-title-icon" ><FaIcon name={icon} /> </span> <EditTitle disabled={!activeEditMode} tagName="h1"  title={resource?.title} onEdit={editTitle} >
 
-                            {!editModeTitle && <h1>
-                                {icon && <><FaIcon name={icon} /></>}
-                                {resource?.title}
-                            </h1>
-                            }
-                            {activeEditMode && !editModeTitle && <span onClick={handleEditModeTitle} ><FaIcon name={'pencil-square-o'} /></span>}
-
+                            </EditTitle>
 
-                            {editModeTitle && <h1>
-                                <EditTitle title={resource?.title} onEdit={editTitle} />
-                                <span className="inEdit" onClick={handleEditModeTitle} ><FaIcon name={'check-circle'} /></span>
-                            </h1>
-                            }
                             {
                                 <div className="gn-details-panel-tools">
                                     {
@@ -446,21 +435,7 @@ function DetailsPanel({
                             && <>{' '}/{' '}{moment(resource.date).format('MMMM Do YYYY')}</>}
                         </p>
                         }
-                        <div className="gn-details-panel-description">
-                            {editModeAbstract && <>
-                                <EditAbstract abstract={resource?.abstract} onEdit={editAbstract} />
-                                <span className="inEdit" onClick={handleEditModeAbstract} ><FaIcon name={'check-circle'} /></span>
-
-                            </>
-                            }
-                            {
-                                !editModeAbstract && resource?.abstract ?
-                                    <span className="gn-details-panel-text" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resource.abstract) }} />
-                                    : null
-                            }
-                            {activeEditMode && !editModeAbstract && <span onClick={handleEditModeAbstract} ><FaIcon name={'pencil-square-o'} /></span>}
-                        </div>
-
+                        <EditAbstract disabled={!activeEditMode} tagName="span"  abstract={resource?.abstract} onEdit={editAbstract} />
                         <p>
                             {resource?.category?.identifier && <div>
                                 <Message msgId="gnhome.category" />:{' '}

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -47,9 +47,6 @@
 
     .gn-details-panel {
         .editContainer {
-            [contenteditable] {
-                .border-color-var(@theme-vars[main-border-color]);
-            }
             &.imagepreview {
                 .icon-image-preview {
                     .color-var(@theme-vars[main-bg]);
@@ -89,11 +86,10 @@
     .editContainer {
         flex: 1;
         [contenteditable] {
-            padding: 0.5em;
-            border-width: 1px;
-            border-style: solid;
-            border-radius: 5px;
-            margin-right: 0.5rem;
+            padding: 0.5em 0.2em;
+        }
+        [contenteditable]:focus-visible {
+            outline-color: @gn-editable-border;
         }
         &.imagepreview {
             width: 250px;
@@ -131,6 +127,9 @@
 }
 .gn-details-panel-content-text {
     flex: 1;
+    p{
+        margin-left: 0.2rem;
+    }
 }
 .gn-details-panel-info{
     .tabs-info {
@@ -207,6 +206,12 @@
             margin-right: 0.6rem;
         }
     }
+    .gn-details-panel-title-icon{
+        .fa{
+            margin-right: 0.6rem;
+            margin-left: 0.2rem;
+        }
+    }
     .gn-details-panel-tools{
         display: flex;
         flex: 1;

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_variables.less b/geonode_mapstore_client/client/themes/geonode/less/_variables.less
@@ -45,6 +45,7 @@
 
 @gn-image-color: #333333;
 @gn-image-bg: #f2f2f2;
+@gn-editable-border: #dddddd;
 
 @gn-jumbotron-color: #ffffff;
 @gn-jumbotron-bg: #0c3756;