fix bug

haiwen · Jan 13, 2025 · 03b5e95 · 03b5e95
1 parent 4f3dc22
commit 03b5e95
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 62 deletions.
diff --git a/frontend/src/components/dialog/image-dialog/index.css b/frontend/src/components/dialog/image-dialog/index.css
@@ -24,7 +24,7 @@
   border-left: 1px solid #666;
 }
 
-.lightbox-side-panel-button-container {
+.lightbox-side-panel .side-panel-controller {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -43,15 +43,15 @@
   cursor: pointer;
 }
 
-.lightbox-side-panel-button-container .switch-button {
+.lightbox-side-panel .side-panel-controller .expand-button {
   width: 32px;
   height: 32px;
   transform: scale(0.6875);
   opacity: 0.7;
   border: none;
 }
 
-.lightbox-side-panel-button-container:hover .switch-button {
+.lightbox-side-panel .side-panel-controller:hover .expand-button {
   opacity: 1;
 }
 

diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js
@@ -4,13 +4,13 @@ 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 { Dirent } from '../../../models';
-import DirentDetails from '../../dirent-detail/dirent-details';
+import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
+import { Utils } from '../../../utils/utils';
 
 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 ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isCustomPermission }) => {
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
   const downloadImage = useCallback((url) => {
@@ -23,7 +23,6 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
 
   const imageItemsLength = imageItems.length;
   if (imageItemsLength === 0) return null;
-  const id = imageItems[imageIndex].id;
   const name = imageItems[imageIndex].name;
   const mainImg = imageItems[imageIndex];
   const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
@@ -43,19 +42,22 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
   }
 
   const renderSidePanel = () => {
-    const dirent = new Dirent({ id, name, type: 'file' });
+    const dirent = { name, type: 'file' };
+    const path = Utils.joinPath(mainImg.parentDir, name);
 
     return (
-      <DirentDetails
+      <EmbeddedFileDetails
         repoID={repoID}
-        currentRepoInfo={repoInfo}
-        path={mainImg.parentDir}
+        repoInfo={repoInfo}
+        path={path}
         dirent={dirent}
         onClose={() => {}}
-        repoTags={[]}
-        fileTags={[]}
-        onFileTagChanged={() => {}}
-        withinPreviewer={true}
+        component={{
+          headerComponent: {
+            isShowControl: false,
+          }
+        }}
+        withinImageDialog={true}
       />
     );
   };
@@ -85,15 +87,11 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
       onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
       onOCR={onOCR}
       OCRLabel={gettext('OCR')}
-      onRenderSidePanel={!isShared ? renderSidePanel : null}
+      onRenderSidePanel={!isCustomPermission ? renderSidePanel : null}
     />
   );
 };
 
-ImageDialog.defaultProps = {
-  isShared: false,
-};
-
 ImageDialog.propTypes = {
   repoID: PropTypes.string.isRequired,
   repoInfo: PropTypes.object.isRequired,
@@ -105,11 +103,12 @@ ImageDialog.propTypes = {
   onDeleteImage: PropTypes.func,
   onRotateImage: PropTypes.func,
   enableRotate: PropTypes.bool,
-  isShared: PropTypes.bool,
+  isCustomPermission: PropTypes.bool,
 };
 
 ImageDialog.defaultProps = {
   enableRotate: true,
+  isCustomPermission: false,
 };
 
 export default ImageDialog;
diff --git a/frontend/src/components/dir-view-mode/dir-files.js b/frontend/src/components/dir-view-mode/dir-files.js
@@ -257,7 +257,6 @@ class DirFiles extends React.Component {
         thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
       }
       return {
-        id: item.object.id,
         name,
         parentDir: node.parentNode.path,
         src,
@@ -363,8 +362,9 @@ class DirFiles extends React.Component {
   };
 
   render() {
-    const { repoID, currentRepoInfo } = this.props;
+    const { repoID, currentRepoInfo, userPerm } = this.props;
     const repoEncrypted = currentRepoInfo.encrypted;
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
     return (
       <>
         <TreeSection
@@ -460,6 +460,7 @@ class DirFiles extends React.Component {
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
               enableRotate={!repoEncrypted}
+              isCustomPermission={isCustomPermission}
             />
           </ModalPortal>
         )}

diff --git a/frontend/src/components/dirent-detail/detail/detail/index.js b/frontend/src/components/dirent-detail/detail/detail/index.js
@@ -6,7 +6,7 @@ import { DRAG_HANDLER_HEIGHT } from '../../../resize-bar/constants';
 
 import './index.css';
 
-const Detail = ({ children, className, withinPreviewer }) => {
+const Detail = ({ children, className }) => {
   const [width, setWidth] = useState(300);
   const [isResizing, setResizing] = useState(false);
   const resizeBarRef = useRef(null);
@@ -57,16 +57,14 @@ const Detail = ({ children, className, withinPreviewer }) => {
       style={{ width }}
     >
       {children}
-      {!withinPreviewer && (
-        <ResizeBar
-          resizeBarRef={resizeBarRef}
-          dragHandlerRef={dragHandlerRef}
-          resizeBarStyle={{ left: -1 }}
-          dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }}
-          onResizeMouseDown={onResizeMouseDown}
-          onResizeMouseOver={onResizeMouseOver}
-        />
-      )}
+      <ResizeBar
+        resizeBarRef={resizeBarRef}
+        dragHandlerRef={dragHandlerRef}
+        resizeBarStyle={{ left: -1 }}
+        dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }}
+        onResizeMouseDown={onResizeMouseDown}
+        onResizeMouseOver={onResizeMouseOver}
+      />
     </div>
   );
 
@@ -75,7 +73,6 @@ const Detail = ({ children, className, withinPreviewer }) => {
 Detail.propTypes = {
   className: PropTypes.string,
   children: PropTypes.any,
-  withinPreviewer: PropTypes.bool,
 };
 
 export default Detail;
diff --git a/frontend/src/components/dirent-detail/detail/header/index.js b/frontend/src/components/dirent-detail/detail/header/index.js
@@ -5,12 +5,12 @@ import Title from './title';
 
 import './index.css';
 
-const Header = ({ title, icon, iconSize = 32, onClose, children, component = {}, withinPreviewer = false }) => {
-  const { closeIcon } = component;
+const Header = ({ title, icon, iconSize = 32, onClose, children, component = {} }) => {
+  const { isShowControl, closeIcon } = component;
   return (
     <div className="detail-header">
       <Title title={title} icon={icon} iconSize={iconSize} />
-      {!withinPreviewer && (
+      {isShowControl && (
         <div className="detail-control-container">
           {children}
           <div className="detail-control" onClick={onClose}>
@@ -22,14 +22,20 @@ const Header = ({ title, icon, iconSize = 32, onClose, children, component = {},
   );
 };
 
+Header.defaultProps = {
+  component: {
+    isShowControl: true,
+  }
+};
+
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   iconSize: PropTypes.number,
   component: PropTypes.object,
   children: PropTypes.any,
   onClose: PropTypes.func.isRequired,
-  withinPreviewer: PropTypes.bool,
+  isShowControl: PropTypes.bool,
 };
 
 export default Header;
diff --git a/frontend/src/components/dirent-detail/dirent-details/index.js b/frontend/src/components/dirent-detail/dirent-details/index.js
@@ -104,7 +104,7 @@ class DirentDetails extends React.Component {
 
   render() {
     const { dirent, direntDetail } = this.state;
-    const { repoID, fileTags, withinPreviewer } = this.props;
+    const { repoID, fileTags } = this.props;
 
     if (!dirent || !direntDetail) {
       return (
@@ -131,13 +131,13 @@ class DirentDetails extends React.Component {
         direntDetail={direntDetail}
         direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
       >
-        <Detail withinPreviewer={withinPreviewer}>
-          <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={this.props.onClose} withinPreviewer={withinPreviewer} >
+        <Detail>
+          <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={this.props.onClose} >
             <AI />
             <Settings />
           </Header>
           <Body>
-            {!withinPreviewer && this.renderImage()}
+            {this.renderImage()}
             {dirent && direntDetail && (
               <div className="detail-content">
                 {dirent.type !== 'file' ? (
@@ -162,10 +162,6 @@ class DirentDetails extends React.Component {
   }
 }
 
-DirentDetails.defaultProps = {
-  withinPreviewer: false,
-};
-
 DirentDetails.propTypes = {
   repoID: PropTypes.string.isRequired,
   dirent: PropTypes.object,
@@ -175,7 +171,6 @@ DirentDetails.propTypes = {
   onFileTagChanged: PropTypes.func.isRequired,
   repoTags: PropTypes.array,
   fileTags: PropTypes.array,
-  withinPreviewer: PropTypes.bool,
 };
 
 export default DirentDetails;
diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -12,21 +12,25 @@ import { AI, Settings } from '../../../metadata/components/metadata-details';
 
 import './index.css';
 
-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {}, withinImageDialog }) => {
   const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 
   useEffect(() => {
-    // init context
-    const context = new MetadataContext();
-    window.sfMetadataContext = context;
-    window.sfMetadataContext.init({ repoID, repoInfo });
     seafileAPI.getFileInfo(repoID, path).then(res => {
       setDirentDetail(res.data);
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
+  }, [repoID, path]);
+
+  useEffect(() => {
+    if (withinImageDialog) return;
+    // init context
+    const context = new MetadataContext();
+    window.sfMetadataContext = context;
+    window.sfMetadataContext.init({ repoID, repoInfo });
 
     return () => {
       if (window.sfMetadataContext) {
@@ -45,6 +49,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
       dirent={dirent}
       direntDetail={direntDetail}
       direntType="file"
+      withinImageDialog={withinImageDialog}
     >
       <div
         className={classnames('cur-view-detail', className, {
@@ -69,13 +74,18 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
   );
 };
 
+EmbeddedFileDetails.defaultProps = {
+  withinImageDialog: false,
+};
+
 EmbeddedFileDetails.propTypes = {
   repoID: PropTypes.string.isRequired,
   dirent: PropTypes.object,
   path: PropTypes.string.isRequired,
   repoInfo: PropTypes.object.isRequired,
   component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
+  withinImageDialog: PropTypes.bool,
 };
 
 export default EmbeddedFileDetails;
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -608,7 +608,6 @@ class DirentGridView extends React.Component {
     }
 
     return {
-      id: item.id,
       name,
       thumbnail,
       src,
@@ -844,9 +843,10 @@ class DirentGridView extends React.Component {
   };
 
   render() {
-    let { direntList, selectedDirentList, path } = this.props;
+    let { direntList, selectedDirentList, path, userPerm } = this.props;
     let dirent = this.state.activeDirent ? this.state.activeDirent : '';
     let direntPath = Utils.joinPath(path, dirent.name);
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
 
     if (this.props.isDirentListLoading) {
       return (<Loading />);
@@ -1029,6 +1029,7 @@ class DirentGridView extends React.Component {
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
               enableRotate={!repoEncrypted}
+              isCustomPermission={isCustomPermission}
             />
           </ModalPortal>
         )}

diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -205,7 +205,6 @@ class DirentListView extends React.Component {
     }
 
     return {
-      id: item.id,
       name,
       thumbnail,
       src,
@@ -750,10 +749,11 @@ class DirentListView extends React.Component {
   };
 
   render() {
-    const { direntList } = this.props;
+    const { direntList, userPerm } = this.props;
 
     const isDesktop = Utils.isDesktop();
     const repoEncrypted = this.props.currentRepoInfo.encrypted;
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
 
     return (
       <div
@@ -860,6 +860,7 @@ class DirentListView extends React.Component {
                 onDeleteImage={this.deleteImage}
                 onRotateImage={this.rotateImage}
                 enableRotate={!repoEncrypted}
+                isCustomPermission={isCustomPermission}
               />
             </ModalPortal>
           )}