Feature/gallery info side panel (#6876)

* gallery info side panel

* clean up code

* optimize code

* optimize code

* feat: optimize code

* feat: optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
Co-authored-by: 杨国璇 <ygx@Hello-word.local>

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

@@ -10,6 +10,7 @@ import ViewModes from '../../components/view-modes';
 import ReposSortMenu from '../../components/repos-sort-menu';
 import MetadataViewToolBar from '../../metadata/components/view-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
+import { DIRENT_DETAIL_MODE } from '../dir-view-mode/constants';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -97,10 +98,14 @@ class DirTool extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   };
 
+  showDirentDetail = () => {
+    this.props.switchViewMode(DIRENT_DETAIL_MODE);
+  };
+
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
 
@@ -114,7 +119,7 @@ class DirTool extends React.Component {
     if (isFileExtended) {
       return (
         <div className="dir-tool">
-          <MetadataViewToolBar viewId={viewId} />
+          <MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} showDetail={this.showDirentDetail} />
         </div>
       );
     }
@@ -124,8 +129,8 @@ class DirTool extends React.Component {
         <div className="dir-tool d-flex">
           <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
           <ReposSortMenu sortOptions={sortOptions} onSelectSortOption={this.onSelectSortOption}/>
-          {(!this.props.isCustomPermission) &&
-            <div className="cur-view-path-btn" onClick={() => this.props.switchViewMode('detail')}>
+          {(!isCustomPermission) &&
+            <div className="cur-view-path-btn" onClick={this.showDirentDetail}>
               <span className="sf3-font sf3-font-info" aria-label={propertiesText} title={propertiesText}></span>
             </div>
           }

frontend/src/components/dir-view-mode/constants.js

@@ -1,4 +1,5 @@
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
+export const DIRENT_DETAIL_MODE = 'detail';
 export const METADATA_MODE = 'metadata';
 export const FACE_RECOGNITION_MODE = 'person_image';

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -80,6 +80,7 @@ const propTypes = {
   fullDirentList: PropTypes.array,
   onItemsScroll: PropTypes.func.isRequired,
   eventBus: PropTypes.object,
+  updateCurrentDirent: PropTypes.func.isRequired,
 };
 
 class DirColumnView extends React.Component {
@@ -202,6 +203,7 @@ class DirColumnView extends React.Component {
               viewID={this.props.viewId}
               deleteFilesCallback={this.props.deleteFilesCallback}
               renameFileCallback={this.props.renameFileCallback}
+              updateCurrentDirent={this.props.updateCurrentDirent}
             />
           }
           {currentMode === FACE_RECOGNITION_MODE &&

frontend/src/components/dirent-detail/detail-container.js

@@ -2,12 +2,16 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LibDetail from './lib-details';
 import DirentDetail from './dirent-details';
+import ViewDetails from '../../metadata/components/view-details';
 import ObjectUtils from '../../metadata/utils/object-utils';
 import { MetadataContext } from '../../metadata';
+import { PRIVATE_FILE_TYPE } from '../../constants';
 
 const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
 
   useEffect(() => {
+    if (path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) return;
+
     // init context
     const context = new MetadataContext();
     window.sfMetadataContext = context;
@@ -16,7 +20,13 @@ const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, rep
       window.sfMetadataContext.destroy();
       delete window['sfMetadataContext'];
     };
-  }, [repoID, currentRepoInfo]);
+  }, [repoID, currentRepoInfo, path]);
+
+  if (path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) {
+    const viewId = path.split('/').pop();
+    if (!dirent) return (<ViewDetails viewId={viewId} onClose={onClose} />);
+    path = dirent.path;
+  }
 
   if (path === '/' && !dirent) {
     return (

frontend/src/components/dirent-detail/detail/header/index.css

@@ -16,6 +16,15 @@
   width: 0; /* prevent strut flex layout */
 }
 
+.detail-header .detail-title .detail-header-icon-container {
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .detail-header .detail-title .name {
   margin: 0 0.5rem 0 6px;
   line-height: 1.5rem;

frontend/src/components/dirent-detail/detail/header/index.js

@@ -4,12 +4,14 @@ import Icon from '../../../icon';
 
 import './index.css';
 
-const Header = ({ title, icon, onClose, component = {} }) => {
+const Header = ({ title, icon, iconSize = 32, onClose, component = {} }) => {
   const { closeIcon } = component;
   return (
     <div className="detail-header">
       <div className="detail-title dirent-title">
-        <img src={icon} width="32" height="32" alt="" />
+        <div className="detail-header-icon-container">
+          <img src={icon} width={iconSize} height={iconSize} alt="" />
+        </div>
         <span className="name ellipsis" title={title}>{title}</span>
       </div>
       <div className="detail-control" onClick={onClose}>
@@ -22,6 +24,7 @@ const Header = ({ title, icon, onClose, component = {} }) => {
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
+  iconSize: PropTypes.number,
   component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
 };

frontend/src/components/dirent-detail/dirent-details/index.css

@@ -42,3 +42,8 @@
 .detail-body .sf-metadata-property-detail-tags.tags-empty {
   padding: 6.5px 6px;;
 }
+
+.detail-body .detail-content.detail-content-empty {
+  width: 100%;
+  height: 100%;
+}