fix bug

frontend/package.json

@@ -9,7 +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/react-image-lightbox": "3.0.6",
     "@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

@@ -3,28 +3,23 @@
   height: calc(100% - 100px);
   display: flex;
   flex-direction: column;
-  position: relative;
+  top: 50px;
+  right: 0;
+  bottom: 50px;
+  position: absolute;
   font-size: 1rem;
   color: #fff;
   background-color: #333;
   border: 1px solid #666;
   transition: width 0.3s ease;
 }
 
-.lightbox-side-panel.expanded {
-  width: 300px;
-}
-
-.lightbox-side-panel.collapsed {
-  width: 10px;
-}
-
 .lightbox-side-panel .cur-view-detail {
   background-color: #333;
   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 +38,14 @@
   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;
 }
 

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

@@ -1,16 +1,22 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } 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 { Dirent } from '../../../models';
-import DirentDetails from '../../dirent-detail/dirent-details';
+import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
+import { Utils } from '../../../utils/utils';
+import Icon from '../../icon';
 
 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 SIDE_PANEL_COLLAPSED_WIDTH = 10;
+const SIDE_PANEL_EXPANDED_WIDTH = 300;
+
+const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isCustomPermission }) => {
+  const [expanded, setExpanded] = useState(false);
+
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
   const downloadImage = useCallback((url) => {
@@ -21,6 +27,10 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
     window.open(imageItems[imageIndex].url, '_blank');
   }, [imageItems, imageIndex]);
 
+  const onToggleSidePanel = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded]);
+
   const imageItemsLength = imageItems.length;
   if (imageItemsLength === 0) return null;
   const id = imageItems[imageIndex].id;
@@ -43,20 +53,36 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
   }
 
   const renderSidePanel = () => {
-    const dirent = new Dirent({ id, name, type: 'file' });
+    const dirent = { id, name, type: 'file' };
+    const path = Utils.joinPath(mainImg.parentDir, name);
 
     return (
-      <DirentDetails
-        repoID={repoID}
-        currentRepoInfo={repoInfo}
-        path={mainImg.parentDir}
-        dirent={dirent}
-        onClose={() => {}}
-        repoTags={[]}
-        fileTags={[]}
-        onFileTagChanged={() => {}}
-        withinPreviewer={true}
-      />
+      <div
+        className="lightbox-side-panel"
+        style={{ width: expanded ? `${SIDE_PANEL_EXPANDED_WIDTH}px` : `${SIDE_PANEL_COLLAPSED_WIDTH}px` }}
+        aria-expanded={expanded}
+        onClick={onToggleSidePanel}
+      >
+        <div className="side-panel-controller">
+          <Icon className="expand-button" symbol={expanded ? 'right_arrow' : 'left_arrow'} />
+        </div>
+        {expanded && (
+          <EmbeddedFileDetails
+            repoID={repoID}
+            repoInfo={repoInfo}
+            path={path}
+            dirent={dirent}
+            onClose={() => {}}
+            component={{
+              headerComponent: {
+                isShowControl: false,
+              }
+            }}
+            withinImageDialog={true}
+          />
+        )}
+      </div>
+
     );
   };
 
@@ -85,15 +111,14 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
       onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
       onOCR={onOCR}
       OCRLabel={gettext('OCR')}
-      onRenderSidePanel={!isShared ? renderSidePanel : null}
+      sidePanel={!isCustomPermission ? {
+        render: renderSidePanel,
+        width: expanded ? `${SIDE_PANEL_EXPANDED_WIDTH}px` : `${SIDE_PANEL_COLLAPSED_WIDTH}px`,
+      } : null}
     />
   );
 };
 
-ImageDialog.defaultProps = {
-  isShared: false,
-};
-
 ImageDialog.propTypes = {
   repoID: PropTypes.string.isRequired,
   repoInfo: PropTypes.object.isRequired,
@@ -105,11 +130,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;

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

@@ -363,8 +363,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 +461,7 @@ class DirFiles extends React.Component {
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
               enableRotate={!repoEncrypted}
+              isCustomPermission={isCustomPermission}
             />
           </ModalPortal>
         )}

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;

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;

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

@@ -15,7 +15,7 @@ import ObjectUtils from '../../../../metadata/utils/object-utils';
 import { getCellValueByColumn, getDateDisplayString, decimalToExposureTime } from '../../../../metadata/utils/cell';
 import Collapse from './collapse';
 import { useMetadataStatus } from '../../../../hooks';
-import People from './people';
+import People from '../../people';
 
 import './index.css';
 

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;