show people in sidepanel

haiwen · Jan 14, 2025 · 5503eee · 5503eee
1 parent 1c7b1bf
commit 5503eee
Show file tree

Hide file tree

Showing 20 changed files with 184 additions and 119 deletions.
diff --git a/.../dialog/image-dialog/side-panel/index.css → .../components/dialog/image-dialog/index.css b/.../dialog/image-dialog/side-panel/index.css → .../components/dialog/image-dialog/index.css
@@ -1,11 +1,9 @@
 .lightbox-side-panel {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 50px;
-  right: 0;
   width: 10px;
   height: calc(100% - 100px);
+  display: flex;
+  flex-direction: column;
+  position: relative;
   font-size: 1rem;
   color: #fff;
   background-color: #333;
@@ -22,7 +20,15 @@
   width: 10px;
 }
 
-.expand-button {
+.lightbox-side-panel .cur-view-detail {
+  background-color: #333;
+  border-left: 1px solid #666;
+}
+
+.side-panel-controller {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
   top: 30px;
   left: -40px;
@@ -38,11 +44,16 @@
   cursor: pointer;
 }
 
-.expand-button .sf-metadata-icon {
+.side-panel-controller .expand-button {
   width: 32px;
   height: 32px;
-  color: #999;
-  vertical-align: middle;
+  transform: scale(0.67);
+  opacity: 0.7;
+  border: none;
+}
+
+.side-panel-controller:hover .expand-button {
+  opacity: 1;
 }
 
 .lightbox-side-panel .detail-header {
@@ -62,6 +73,7 @@
 
 .lightbox-side-panel .detail-body {
   overflow-y: auto;
+  scrollbar-color: #666 #333;
   padding: 0;
 }
 
@@ -73,6 +85,13 @@
   margin-bottom: 20px;
 }
 
+.lightbox-side-panel .sf-metadata-ui.collaborator-item {
+  color: #212529;
+}
+
+.lightbox-side-panel .dirent-detail-item .dirent-detail-item-value:not(.editable) .sf-metadata-record-cell-empty:empty::before,
+.lightbox-side-panel .sf-metadata-property-detail-editor:empty::before,
+.lightbox-side-panel .sf-metadata-property-detail-capture-information-item .dirent-detail-item-value:empty::before,
 .lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down {
   color: #999;
 }
@@ -82,7 +101,7 @@
   background-color: #666;
 }
 
-.lightbox-side-panel .lightbox-side-panel-divider {
+.lightbox-side-panel .dirent-detail-divider {
   height: 1px;
   background-color: #999;
   margin-bottom: 20px;

diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js
@@ -7,29 +7,21 @@ import { SYSTEM_FOLDERS } from '../../../constants';
 import { Utils } from '../../../utils/utils';
 import { Dirent } from '../../../models';
 import { seafileAPI } from '../../../utils/seafile-api';
-import SidePanel from './side-panel';
+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, onFileTagChanged }) => {
+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 getDirentDetail = async (repoID, path) => {
-      try {
-        const res = await seafileAPI.getFileInfo(repoID, path);
-        return res.data;
-      } catch (error) {
-        return null;
-      }
-    };
-
     const path = Utils.joinPath(imageItems[imageIndex].parentDir, imageItems[imageIndex].name);
-    getDirentDetail(repoID, path).then(res => {
-      setDirentDetail(res);
+    seafileAPI.getFileInfo(repoID, path).then(res => {
+      setDirentDetail(res.data);
     });
-  }, [imageIndex, imageItems, repoID]);
+  }, [imageIndex, imageItems, repoID, repoInfo]);
 
   const downloadImage = useCallback((url) => {
     location.href = url;
@@ -41,6 +33,7 @@ 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];
@@ -60,10 +53,22 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
   }
 
   const renderSidePanel = () => {
-    const dirent = new Dirent({ name, type: 'file' });
-    const path = Utils.joinPath(mainImg.parentDir, mainImg.name);
+    const dirent = new Dirent({ id, name, type: 'file' });
 
-    return <SidePanel repoID={repoID} repoInfo={repoInfo} path={path} dirent={dirent} direntDetail={direntDetail} onFileTagChanged={onFileTagChanged} />;
+    return (
+      <DirentDetails
+        repoID={repoID}
+        currentRepoInfo={repoInfo}
+        path={mainImg.parentDir}
+        dirent={dirent}
+        direntDetail={direntDetail}
+        onClose={() => {}}
+        repoTags={[]}
+        fileTags={[]}
+        onFileTagChanged={() => {}}
+        withinPreviewer={true}
+      />
+    );
   };
 
   return (
@@ -91,13 +96,18 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
       onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
       onOCR={onOCR}
       OCRLabel={gettext('OCR')}
-      onRenderSidePanel={renderSidePanel}
+      onRenderSidePanel={!isShared ? renderSidePanel : null}
     />
   );
 };
 
+ImageDialog.defaultProps = {
+  isShared: false,
+};
+
 ImageDialog.propTypes = {
-  repoID: PropTypes.string,
+  repoID: PropTypes.string.isRequired,
+  repoInfo: PropTypes.object.isRequired,
   imageItems: PropTypes.array.isRequired,
   imageIndex: PropTypes.number.isRequired,
   closeImagePopup: PropTypes.func.isRequired,
@@ -106,7 +116,7 @@ ImageDialog.propTypes = {
   onDeleteImage: PropTypes.func,
   onRotateImage: PropTypes.func,
   enableRotate: PropTypes.bool,
-  onFileTagChanged: PropTypes.func,
+  isShared: PropTypes.bool,
 };
 
 ImageDialog.defaultProps = {

diff --git a/frontend/src/components/dialog/image-dialog/side-panel/index.js b/frontend/src/components/dialog/image-dialog/side-panel/index.js
diff --git a/frontend/src/components/dir-view-mode/dir-column-nav/index.js b/frontend/src/components/dir-view-mode/dir-column-nav/index.js
@@ -32,6 +32,9 @@ 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 {
@@ -71,6 +74,9 @@ 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} />

diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -84,6 +84,7 @@ const propTypes = {
   eventBus: PropTypes.object,
   updateCurrentDirent: PropTypes.func.isRequired,
   updateCurrentPath: PropTypes.func,
+  fileTags: PropTypes.array,
 };
 
 class DirColumnView extends React.Component {
@@ -182,6 +183,9 @@ 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}

diff --git a/frontend/src/components/dir-view-mode/dir-files.js b/frontend/src/components/dir-view-mode/dir-files.js
@@ -257,6 +257,7 @@ class DirFiles extends React.Component {
         thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
       }
       return {
+        id: item.object.id,
         name,
         parentDir: node.parentNode.path,
         src,
@@ -449,6 +450,8 @@ class DirFiles extends React.Component {
         {this.state.isNodeImagePopupOpen && (
           <ModalPortal>
             <ImageDialog
+              repoID={repoID}
+              repoInfo={currentRepoInfo}
               imageItems={this.state.imageNodeItems}
               imageIndex={this.state.imageIndex}
               closeImagePopup={this.closeNodeImagePopup}

diff --git a/frontend/src/components/dir-view-mode/dir-list-view.js b/frontend/src/components/dir-view-mode/dir-list-view.js
@@ -44,6 +44,7 @@ const propTypes = {
   fullDirentList: PropTypes.array,
   getMenuContainerSize: PropTypes.func,
   eventBus: PropTypes.object,
+  fileTags: PropTypes.array,
 };
 
 class DirListView extends React.Component {

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 }) => {
+const Detail = ({ children, className, withinPreviewer }) => {
   const [width, setWidth] = useState(300);
   const [isResizing, setResizing] = useState(false);
   const resizeBarRef = useRef(null);
@@ -57,14 +57,16 @@ const Detail = ({ children, className }) => {
       style={{ width }}
     >
       {children}
-      <ResizeBar
-        resizeBarRef={resizeBarRef}
-        dragHandlerRef={dragHandlerRef}
-        resizeBarStyle={{ left: -1 }}
-        dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }}
-        onResizeMouseDown={onResizeMouseDown}
-        onResizeMouseOver={onResizeMouseOver}
-      />
+      {!withinPreviewer && (
+        <ResizeBar
+          resizeBarRef={resizeBarRef}
+          dragHandlerRef={dragHandlerRef}
+          resizeBarStyle={{ left: -1 }}
+          dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }}
+          onResizeMouseDown={onResizeMouseDown}
+          onResizeMouseOver={onResizeMouseOver}
+        />
+      )}
     </div>
   );
 
@@ -73,6 +75,7 @@ const Detail = ({ children, className }) => {
 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,17 +5,19 @@ import Title from './title';
 
 import './index.css';
 
-const Header = ({ title, icon, iconSize = 32, onClose, children, component = {} }) => {
+const Header = ({ title, icon, iconSize = 32, onClose, children, component = {}, withinPreviewer }) => {
   const { closeIcon } = component;
   return (
     <div className="detail-header">
       <Title title={title} icon={icon} iconSize={iconSize} />
-      <div className="detail-control-container">
-        {children}
-        <div className="detail-control" onClick={onClose}>
-          {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />}
+      {!withinPreviewer && (
+        <div className="detail-control-container">
+          {children}
+          <div className="detail-control" onClick={onClose}>
+            {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
@@ -27,6 +29,7 @@ Header.propTypes = {
   component: PropTypes.object,
   children: PropTypes.any,
   onClose: PropTypes.func.isRequired,
+  withinPreviewer: PropTypes.bool,
 };
 
 export default Header;