change readonly path UI (#7573)

Author: Michael18811380328

frontend/src/components/cur-dir-path/dir-path.js

@@ -128,15 +128,19 @@ class DirPath extends React.Component {
     return (
       <>
         <span className="path-split">/</span>
-        <span className="path-item">{gettext('Views')}</span>
+        <span className="path-item path-item-read-only">{gettext('Views')}</span>
         <span className="path-split">/</span>
-        <span className="path-item" role={children ? 'button' : null} onClick={children ? this.handleRefresh : () => {}}>
+        <span
+          className="path-item path-item-read-only"
+          role={children ? 'button' : null}
+          onClick={children ? this.handleRefresh : () => {}}
+        >
           <MetadataViewName id={viewId} />
         </span>
         {children && (
           <>
             <span className="path-split">/</span>
-            <span className="path-item">{children}</span>
+            <span className="path-item path-item-read-only">{children}</span>
           </>
         )}
         <div className="path-item-refresh" id="sf-metadata-view-refresh" onClick={this.handleRefresh}>
@@ -156,13 +160,13 @@ class DirPath extends React.Component {
     return (
       <>
         <span className="path-split">/</span>
-        <span className="path-item">{gettext('Tags')}</span>
+        <span className="path-item path-item-read-only">{gettext('Tags')}</span>
         <span className="path-split">/</span>
         <TagViewName id={tagId} canSelectAllTags={canSelectAllTags} />
         {children && (
           <>
             <span className="path-split">/</span>
-            <span className="path-item">{children}</span>
+            <span className="path-item path-item-read-only">{children}</span>
           </>
         )}
       </>
@@ -172,8 +176,12 @@ class DirPath extends React.Component {
   turnPathToLink = (path) => {
     path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
     const pathList = path.split('/');
-    if (pathList.includes(PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) return this.turnViewPathToLink(pathList);
-    if (pathList.includes(PRIVATE_FILE_TYPE.TAGS_PROPERTIES)) return this.turnTagPathToLink(pathList);
+    if (pathList.includes(PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) {
+      return this.turnViewPathToLink(pathList);
+    }
+    if (pathList.includes(PRIVATE_FILE_TYPE.TAGS_PROPERTIES)) {
+      return this.turnTagPathToLink(pathList);
+    }
     let nodePath = '';
     let pathElem = pathList.map((item, index) => {
       if (item === '') return null;

frontend/src/css/lib-content-view.css

@@ -299,6 +299,10 @@
   background: #efefef;
 }
 
+.dir-view-path .path-item.path-item-read-only:hover {
+  background: #fff;
+}
+
 .dir-view-path .path-item-refresh {
   height: 24px;
   width: 24px;

frontend/src/tag/components/tag-view-name/all-tags-operation-toolbar/index.js

@@ -8,7 +8,7 @@ import { useTags } from '../../../hooks';
 
 import './index.css';
 
-const AllTagsOperationToolbar = ({ children }) => {
+const AllTagsOperationToolbar = () => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [isShowEditTagDialog, setShowEditTagDialog] = useState(false);
 
@@ -44,6 +44,7 @@ const AllTagsOperationToolbar = ({ children }) => {
   return (
     <>
       <div className="dir-operation">
+        <span className="path-item path-item-read-only">{gettext('All tags')}</span>
         <Dropdown isOpen={isMenuOpen} toggle={toggleMenuOpen}>
           <DropdownToggle
             tag="span"
@@ -53,8 +54,7 @@ const AllTagsOperationToolbar = ({ children }) => {
             onKeyDown={onDropdownKeyDown}
             data-toggle="dropdown"
           >
-            {children}
-            <i className="ml-1 sf3-font-new sf3-font path-item-new-toggle"></i>
+            <i className="sf3-font-new sf3-font path-item-new-toggle"></i>
             <i className="sf3-font-down sf3-font path-item-dropdown-toggle"></i>
           </DropdownToggle>
           <DropdownMenu className='position-fixed'>

frontend/src/tag/components/tag-view-name/index.js

@@ -18,17 +18,27 @@ const TagViewName = ({ id, canSelectAllTags }) => {
   if (!id) return null;
   if (id === ALL_TAGS_ID) {
     if (canSelectAllTags) {
-      return (<span className="path-item" role="button" onClick={selectAllTags}>{gettext('All tags')}</span>);
+      return (
+        <span className="path-item" role="button" onClick={selectAllTags}>{gettext('All tags')}</span>
+      );
     }
 
     const canModify = context.canModify();
     const canAddTag = context.canAddTag();
-    if (!canModify || !canAddTag) return (<span className="path-item">{gettext('All tags')}</span>);
-    return (<AllTagsOperationToolbar>{gettext('All tags')}</AllTagsOperationToolbar>);
+    if (!canModify || !canAddTag) {
+      return (
+        <span className="path-item path-item-read-only">{gettext('All tags')}</span>
+      );
+    }
+    return (
+      <AllTagsOperationToolbar/>
+    );
   }
   const tag = getRowById(tagsData, id);
   if (!tag) return null;
-  return (<span className="path-item">{getTagName(tag)}</span>);
+  return (
+    <span className="path-item path-item-read-only">{getTagName(tag)}</span>
+  );
 };
 
 TagViewName.propTypes = {