Change edit tags dialog UI (#5655)

* fix warnings * 01 tags icon always show * 02 tag list footer UI * 03 change select color popover style * 04 Add virtual tag * 05 handle key event * 06 add createRepoTags API * 07 optimize codes * 08 optimize codes * optimize python code * change create tags success callback --------- Co-authored-by: wang <[email protected]>
haiwen · Oct 9, 2023 · e90a64c · e90a64c
1 parent 39d490a
commit e90a64c
Show file tree

Hide file tree

Showing 19 changed files with 802 additions and 266 deletions.
diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -1,12 +1,10 @@
-import React, { Fragment } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import PropTypes from 'prop-types';
-import ModalPortal from '../modal-portal';
-import { Modal } from 'reactstrap';
-import ListTagDialog from '../dialog/list-tag-dialog';
-import CreateTagDialog from '../dialog/create-tag-dialog';
-import ListTaggedFilesDialog from '../dialog/list-taggedfiles-dialog';
+import SeahubPopover from '../common/seahub-popover';
+import ListTagPopover from '../popover/list-tag-popover';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -21,112 +19,93 @@ class DirTool extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isRepoTagDialogShow: false,
-      currentTag: null,
       isListRepoTagShow: false,
-      isCreateRepoTagShow: false,
-      isListTaggedFileShow: false,
     };
+    this.tagsIconID = `tags-icon-${uuidv4()}`;
   }
 
   onShowListRepoTag = (e) => {
-    e.preventDefault();
-    this.setState({
-      isRepoTagDialogShow: true,
-      isListRepoTagShow: true,
-      isCreateRepoTagShow: false,
-      isListTaggedFileShow: false
-    });
+    this.setState({ isListRepoTagShow: true });
   };
 
-  onCloseRepoTagDialog = () => {
-    this.setState({
-      isRepoTagDialogShow: false,
-      isListRepoTagShow: false,
-      isCreateRepoTagShow: false,
-      isListTaggedFileShow: false
-    });
-  };
-
-  onCreateRepoTagToggle = () => {
-    this.setState({
-      isCreateRepoTagShow: !this.state.isCreateRepoTagShow,
-      isListRepoTagShow: !this.state.isListRepoTagShow,
-    });
+  hidePopover = (e) => {
+    if (e) {
+      let dom = e.target;
+      while (dom) {
+        if (typeof dom.className === 'string' && dom.className.includes('tag-color-popover')) return;
+        dom = dom.parentNode;
+      }
+    }
+    this.setState({ isListRepoTagShow: false });
   };
 
-  onListTaggedFileToggle = (currentTag) => {
-    this.setState({
-      currentTag: currentTag,
-      isListRepoTagShow: !this.state.isListRepoTagShow,
-      isListTaggedFileShow: !this.state.isListTaggedFileShow,
-    });
+  toggleCancel = () => {
+    this.setState({ isListRepoTagShow: false });
   };
 
   isMarkdownFile(filePath) {
-    let name = Utils.getFileName(filePath);
-    return name.indexOf('.md') > -1 ? true : false;
+    return Utils.getFileName(filePath).includes('.md');
   }
 
   render() {
     let { repoID, userPerm, currentPath } = this.props;
-    let isFile = this.isMarkdownFile(currentPath);
-    let name = Utils.getFileName(currentPath);
-    let trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
-    let historyUrl = siteRoot + 'repo/history/' + repoID + '/';
-    if (userPerm === 'rw') {
-      if (!isFile) {
-        if (name) { // name not '' is not root path
-          trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
-          return (
-            <ul className="path-toolbar">
-              <li className="toolbar-item"><a className="op-link sf2-icon-recycle" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
-            </ul>
-          );
-        } else { // currentPath === '/' is root path
-          return (
-            <Fragment>
-              <ul className="path-toolbar">
-                <li className="toolbar-item"><a className="op-link sf2-icon-tag" href="#" role="button" onClick={this.onShowListRepoTag} title={gettext('Tags')} aria-label={gettext('Tags')}></a></li>
-                <li className="toolbar-item"><a className="op-link sf2-icon-recycle" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
-                <li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
-              </ul>
-
-              {this.state.isRepoTagDialogShow && (
-                <ModalPortal>
-                  <Modal isOpen={true} autoFocus={false}>
-                    {this.state.isListRepoTagShow && (
-                      <ListTagDialog
-                        repoID={repoID}
-                        onListTagCancel={this.onCloseRepoTagDialog}
-                        onCreateRepoTag={this.onCreateRepoTagToggle}
-                      />
-                    )}
-                    {this.state.isCreateRepoTagShow && (
-                      <CreateTagDialog
-                        repoID={repoID}
-                        onClose={this.onCloseRepoTagDialog}
-                        toggleCancel={this.onCreateRepoTagToggle}
-                      />
-                    )}
-                    {this.state.isListTaggedFileShow && (
-                      <ListTaggedFilesDialog
-                        repoID={this.props.repoID}
-                        currentTag={this.state.currentTag}
-                        onClose={this.onCloseRepoTagDialog}
-                        toggleCancel={this.onListTaggedFileToggle}
-                        updateUsedRepoTags={this.props.updateUsedRepoTags}
-                      />
-                    )}
-                  </Modal>
-                </ModalPortal>
-              )}
-            </Fragment>
-          );
-        }
-      }
+    if (userPerm !== 'rw') {
+      return '';
     }
-    return '';
+    if (this.isMarkdownFile(currentPath)) {
+      return '';
+    }
+    let toolbarDom = null;
+    if (Utils.getFileName(currentPath)) { // name not '' is not root path
+      let trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
+      toolbarDom = (
+        <ul className="path-toolbar">
+          <li className="toolbar-item">
+            <a className="op-link sf2-icon-tag" href="#" id={this.tagsIconID} role="button" onClick={this.onShowListRepoTag} title={gettext('Tags')} aria-label={gettext('Tags')}></a>
+          </li>
+          <li className="toolbar-item">
+            <a className="op-link sf2-icon-recycle" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a>
+          </li>
+        </ul>
+      );
+    } else { // currentPath === '/' is root path
+      let trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
+      let historyUrl = siteRoot + 'repo/history/' + repoID + '/';
+      toolbarDom = (
+        <ul className="path-toolbar">
+          <li className="toolbar-item">
+            <a className="op-link sf2-icon-tag" href="#" id={this.tagsIconID} role="button" onClick={this.onShowListRepoTag} title={gettext('Tags')} aria-label={gettext('Tags')}></a>
+          </li>
+          <li className="toolbar-item">
+            <a className="op-link sf2-icon-recycle" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a>
+          </li>
+          <li className="toolbar-item">
+            <a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a>
+          </li>
+        </ul>
+      );
+    }
+    return (
+      <>
+        {toolbarDom}
+        {this.state.isListRepoTagShow &&
+          <SeahubPopover
+            popoverClassName="list-tag-popover"
+            target={this.tagsIconID}
+            hideSeahubPopover={this.hidePopover}
+            hideSeahubPopoverWithEsc={this.hidePopover}
+            canHideSeahubPopover={true}
+            boundariesElement={document.body}
+            placement={'bottom-end'}
+          >
+            <ListTagPopover
+              repoID={repoID}
+              onListTagCancel={this.toggleCancel}
+            />
+          </SeahubPopover>
+        }
+      </>
+    );
   }
 }
 

diff --git a/frontend/src/components/dialog/list-tag-dialog.js b/frontend/src/components/dialog/list-tag-dialog.js
diff --git a/frontend/src/components/dialog/tag-color.js b/frontend/src/components/dialog/tag-color.js
@@ -23,6 +23,14 @@ class TagColor extends React.Component {
     };
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.tag.color !== this.props.tag.color) {
+      this.setState({
+        tagColor: nextProps.tag.color,
+      });
+    }
+  }
+
   togglePopover = () => {
     this.setState({
       isPopoverOpen: !this.state.isPopoverOpen
@@ -59,7 +67,7 @@ class TagColor extends React.Component {
       <div>
         <span
           id={`tag-${id}-color`}
-          className="tag-color cursor-pointer w-4 h-4 rounded-circle d-flex align-items-center justify-content-center"
+          className="tag-color cursor-pointer rounded-circle d-flex align-items-center justify-content-center"
           style={{backgroundColor: tagColor}}
           onClick={this.togglePopover}
         >
@@ -70,7 +78,7 @@ class TagColor extends React.Component {
           isOpen={isPopoverOpen}
           placement="bottom"
           toggle={this.togglePopover}
-          className="mw-100"
+          className="tag-color-popover mw-100"
         >
           <PopoverBody className="p-2">
             <div className="d-flex justify-content-between">