From 64474d8b18ecc05a3315626db24bb24b657ab8cf Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Mon, 9 Jun 2025 14:07:11 +0800
Subject: [PATCH] change file detail when preview image (#7906)

---
 .../components/dialog/image-dialog/index.css   | 18 ++++++++++++++----
 .../components/dialog/image-dialog/index.js    |  4 ++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/dialog/image-dialog/index.css b/frontend/src/components/dialog/image-dialog/index.css
index 9304fef344..8823700198 100644
--- a/frontend/src/components/dialog/image-dialog/index.css
+++ b/frontend/src/components/dialog/image-dialog/index.css
@@ -80,9 +80,6 @@
 }
 
 .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,
 .lightbox-side-panel .sf-metadata-number-property-detail-editor::placeholder {
   color: #666;
 }
@@ -91,7 +88,6 @@
   color: #999;
 }
 
-.lightbox-side-panel .file-details-collapse .file-details-collapse-header .file-details-collapse-header-operation:hover,
 .lightbox-side-panel .dirent-detail-item .dirent-detail-item-value.editable:hover {
   background-color: #666;
 }
@@ -102,3 +98,17 @@
   padding-bottom: 16px;
   border-bottom: 1px solid #999;
 }
+
+.lightbox-side-panel .sf-metadata-property-detail-capture-information-item .dirent-detail-item-value:empty::before,
+.lightbox-side-panel .sf-metadata-property-detail-editor:empty::before,
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .file-details-collapse-header-operation:hover {
+  background-color: transparent;
+}
+
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .file-details-collapse-header-operation:hover .sf3-font-down {
+  color: rgba(255, 255, 255, 1);
+}
diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js
index ef461d0bde..d6eb48ff80 100644
--- a/frontend/src/components/dialog/image-dialog/index.js
+++ b/frontend/src/components/dialog/image-dialog/index.js
@@ -102,10 +102,10 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate = true, i
       onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
       onOCR={onOCR}
       OCRLabel={gettext('OCR')}
-      sidePanel={!isCustomPermission ? {
+      sidePanel={isCustomPermission ? null : {
         render: renderSidePanel,
         width: expanded ? SIDE_PANEL_EXPANDED_WIDTH : SIDE_PANEL_COLLAPSED_WIDTH,
-      } : null}
+      }}
     />
   );
 };