optimize

frontend/package.json

@@ -9,6 +9,7 @@
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@gatsbyjs/reach-router": "1.3.9",
+    "@seafile/react-image-lightbox": "3.0.5",
     "@seafile/resumablejs": "1.1.16",
     "@seafile/sdoc-editor": "1.0.203",
     "@seafile/seafile-calendar": "0.0.28",

frontend/src/components/dialog/image-dialog/index.css

@@ -9,7 +9,6 @@
   background-color: #333;
   border: 1px solid #666;
   transition: width 0.3s ease;
-  z-index: 1052;
 }
 
 .lightbox-side-panel.expanded {
@@ -25,7 +24,7 @@
   border-left: 1px solid #666;
 }
 
-.side-panel-controller {
+.lightbox-side-panel-button-container {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,15 +43,15 @@
   cursor: pointer;
 }
 
-.side-panel-controller .expand-button {
+.lightbox-side-panel-button-container .switch-button {
   width: 32px;
   height: 32px;
-  transform: scale(0.67);
+  transform: scale(0.6875);
   opacity: 0.7;
   border: none;
 }
 
-.side-panel-controller:hover .expand-button {
+.lightbox-side-panel-button-container:hover .switch-button {
   opacity: 1;
 }
 
@@ -101,8 +100,6 @@
   background-color: #666;
 }
 
-.lightbox-side-panel .dirent-detail-divider {
-  height: 1px;
-  background-color: #999;
-  margin-bottom: 20px;
+.lightbox-side-panel .dirent-detail-people {
+  border-top: 1px solid #999;
 }

frontend/src/components/dialog/image-dialog/index.js

@@ -1,28 +1,18 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../../utils/constants';
 import Lightbox from '@seafile/react-image-lightbox';
 import { useMetadataAIOperations } from '../../../hooks/metadata-ai-operation';
 import { SYSTEM_FOLDERS } from '../../../constants';
-import { Utils } from '../../../utils/utils';
 import { Dirent } from '../../../models';
-import { seafileAPI } from '../../../utils/seafile-api';
 import DirentDetails from '../../dirent-detail/dirent-details';
 
 import '@seafile/react-image-lightbox/style.css';
 import './index.css';
 
 const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isShared }) => {
-  const [direntDetail, setDirentDetail] = useState(null);
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
-  useEffect(() => {
-    const path = Utils.joinPath(imageItems[imageIndex].parentDir, imageItems[imageIndex].name);
-    seafileAPI.getFileInfo(repoID, path).then(res => {
-      setDirentDetail(res.data);
-    });
-  }, [imageIndex, imageItems, repoID, repoInfo]);
-
   const downloadImage = useCallback((url) => {
     location.href = url;
   }, []);
@@ -61,7 +51,6 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
         currentRepoInfo={repoInfo}
         path={mainImg.parentDir}
         dirent={dirent}
-        direntDetail={direntDetail}
         onClose={() => {}}
         repoTags={[]}
         fileTags={[]}

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

@@ -32,9 +32,6 @@ const propTypes = {
   onItemsMove: PropTypes.func.isRequired,
   getMenuContainerSize: PropTypes.func,
   updateDirent: PropTypes.func,
-  repoTags: PropTypes.array,
-  fileTags: PropTypes.array,
-  onFileTagChanged: PropTypes.func,
 };
 
 class DirColumnNav extends React.Component {
@@ -74,9 +71,6 @@ class DirColumnNav extends React.Component {
               onItemMove={this.props.onItemMove}
               onItemsMove={this.props.onItemsMove}
               updateDirent={this.props.updateDirent}
-              repoTags={this.props.repoTags}
-              fileTags={this.props.fileTags}
-              onFileTagChanged={this.props.onFileTagChanged}
             />
             <DirViews repoID={repoID} currentPath={currentPath} userPerm={userPerm} currentRepoInfo={currentRepoInfo} />
             <DirTags repoID={repoID} currentPath={currentPath} userPerm={userPerm} currentRepoInfo={currentRepoInfo} />

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

@@ -84,7 +84,6 @@ const propTypes = {
   eventBus: PropTypes.object,
   updateCurrentDirent: PropTypes.func.isRequired,
   updateCurrentPath: PropTypes.func,
-  fileTags: PropTypes.array,
 };
 
 class DirColumnView extends React.Component {
@@ -183,9 +182,6 @@ class DirColumnView extends React.Component {
               getMenuContainerSize={this.getMenuContainerSize}
               direntList={this.props.direntList}
               updateDirent={this.props.updateDirent}
-              repoTags={this.props.repoTags}
-              fileTags={this.props.fileTags}
-              onFileTagChanged={this.props.onFileTagChanged}
             />
             <ResizeBar
               resizeBarRef={this.resizeBarRef}

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

@@ -44,7 +44,6 @@ const propTypes = {
   fullDirentList: PropTypes.array,
   getMenuContainerSize: PropTypes.func,
   eventBus: PropTypes.object,
-  fileTags: PropTypes.array,
 };
 
 class DirListView extends React.Component {

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

@@ -5,7 +5,7 @@ import Title from './title';
 
 import './index.css';
 
-const Header = ({ title, icon, iconSize = 32, onClose, children, component = {}, withinPreviewer }) => {
+const Header = ({ title, icon, iconSize = 32, onClose, children, component = {}, withinPreviewer = false }) => {
   const { closeIcon } = component;
   return (
     <div className="detail-header">

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

@@ -3,6 +3,8 @@
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 20px;
+  border-top: 1px solid #eee;
+  padding-top: 20px;
 }
 
 .dirent-detail-people .dirent-detail-people-item {
@@ -11,9 +13,3 @@
   border-radius: 50%;
   overflow: hidden;
 }
-
-.dirent-detail-divider {
-  height: 1px;
-  background-color: #eee;
-  margin-bottom: 20px;
-}

frontend/src/components/dirent-detail/dirent-details/file-details/people/index.js

@@ -23,16 +23,13 @@ const People = ({ repoID, record }) => {
   if (!images.length) return null;
 
   return (
-    <>
-      {images.length > 0 && <div className="dirent-detail-divider"></div>}
-      <div className="dirent-detail-people">
-        {images.map(img => (
-          <div className="dirent-detail-people-item" key={img.row_id} title={img.display_value || gettext('Unknown people')}>
-            <img src={img.url} alt={img.display_value || gettext('Unknown people')} onError={onImgLoadError} height={32} width={32} />
-          </div>
-        ))}
-      </div>
-    </>
+    <div className="dirent-detail-people">
+      {images.map(img => (
+        <div className="dirent-detail-people-item" key={img.row_id} title={img.display_value || gettext('Unknown people')}>
+          <img src={img.url} alt={img.display_value || gettext('Unknown people')} onError={onImgLoadError} height={32} width={32} />
+        </div>
+      ))}
+    </div>
   );
 };
 

frontend/src/metadata/components/cell-editors/long-text-editor/index.js

@@ -9,8 +9,6 @@ import { lang, serviceURL } from '../../../../utils/constants';
 import { LONG_TEXT_EXCEED_LIMIT_MESSAGE, LONG_TEXT_EXCEED_LIMIT_SUGGEST } from '../../../constants';
 import i18n from '../../../../_i18n/i18n-seafile-editor';
 
-import './index.css';
-
 class LongTextEditor extends React.PureComponent {
 
   constructor(props) {

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -2395,7 +2395,6 @@ class LibContentView extends React.Component {
                         eventBus={this.props.eventBus}
                         updateCurrentDirent={this.updateCurrentDirent}
                         updateCurrentPath={this.updatePath}
-                        fileTags={this.state.isViewFile ? this.state.fileTags : []}
                       />
                       :
                       <div className="message err-tip">{gettext('Folder does not exist.')}</div>