optimize gallery

frontend/src/metadata/views/gallery/content.js

@@ -18,7 +18,8 @@ const Content = ({
   onImageSelect,
   onImageClick,
   onImageDoubleClick,
-  onContextMenu
+  onContextMenu,
+  onDateTagClick,
 }) => {
   const animationFrameRef = useRef(null);
   const containerRef = useRef(null);
@@ -142,7 +143,14 @@ const Content = ({
         style={{ height, paddingTop }}
       >
         {mode !== GALLERY_DATE_MODE.ALL && childrenStartIndex === 0 && (
-          <div className="metadata-gallery-date-tag" style={{ height: paddingTop }}>{name || gettext('Empty')}</div>
+          <div
+            className={classNames('metadata-gallery-date-tag', { 'hover': mode === GALLERY_DATE_MODE.MONTH })}
+            style={{ height: paddingTop }}
+            onClick={(event) => onDateTagClick(event, name)}
+          >
+            {name || gettext('Empty')}
+            {mode === GALLERY_DATE_MODE.MONTH && <i className="metadata-gallery-date-tag-arrow sf3-font-down sf3-font rotate-270" />}
+          </div>
         )}
         <div
           className={classNames('metadata-gallery-image-list', `metadata-gallery-${mode}-image-list`)}
@@ -172,7 +180,7 @@ const Content = ({
         </div>
       </div>
     );
-  }, [overScan, mode, columns, rowHeight, onImageClick, onImageDoubleClick, onContextMenu, size, selectedImageIds]);
+  }, [overScan, mode, columns, rowHeight, onImageClick, onImageDoubleClick, onContextMenu, size, selectedImageIds, onDateTagClick]);
 
   if (!Array.isArray(groups) || groups.length === 0) return (<EmptyTip text={gettext('No record')}/>);
 
@@ -217,6 +225,7 @@ Content.propTypes = {
   onImageClick: PropTypes.func.isRequired,
   onImageDoubleClick: PropTypes.func.isRequired,
   onContextMenu: PropTypes.func.isRequired,
+  onDateTagClick: PropTypes.func.isRequired,
 };
 
 export default Content;

frontend/src/metadata/views/gallery/index.css

@@ -1,15 +1,21 @@
-.sf-metadata-gallery-container {
+.sf-metadata-gallery-scroll-container {
+  width: 100%;
   height: 100%;
-  padding-top: 0;
+  display: flex;
+  flex-direction: column;
   padding-bottom: 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.sf-metadata-gallery-container {
+  flex: 1 1;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 2px;
   justify-content: left;
   align-items: center;
-  overflow-y: auto;
-  overflow-x: hidden;
   padding-left: calc(100% / 9);
   padding-right: calc(100% / 9);
 }
@@ -31,13 +37,22 @@
   display: flex;
   justify-content: left;
   align-items: center;
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 500;
   z-index: 1;
   user-select: none;
   padding-top: 8px;
 }
 
+.metadata-gallery-date-tag.hover {
+  cursor: pointer;
+}
+
+.metadata-gallery-date-tag-arrow {
+  font-size: 1rem !important;
+  margin-left: 6px;
+}
+
 .metadata-gallery-main {
   flex: 1;
   width: 100%;

frontend/src/metadata/views/gallery/main.js

@@ -30,6 +30,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
   const [selectedImages, setSelectedImages] = useState([]);
 
   const containerRef = useRef(null);
+  const scrollContainer = useRef(null);
   const lastState = useRef({ visibleAreaFirstImage: { groupIndex: 0, rowIndex: 0 } });
 
   const { repoID, updateCurrentDirent } = useMetadataView();
@@ -126,12 +127,8 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
   }, [groups]);
 
   const handleScroll = useCallback(() => {
-    if (!containerRef.current) return;
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-    const newOverScan = {
-      top: Math.max(0, scrollTop - rowHeight * OVER_SCAN_ROWS),
-      bottom: scrollTop + clientHeight + rowHeight * OVER_SCAN_ROWS
-    };
+    if (!scrollContainer.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollContainer.current;
 
     if (scrollTop + clientHeight >= scrollHeight - 10) {
       onLoadMore && onLoadMore();
@@ -153,8 +150,12 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
       }
       if (flag) break;
     }
-
     lastState.current = { ...lastState.current, visibleAreaFirstImage: { groupIndex, rowIndex } };
+
+    const newOverScan = {
+      top: Math.max(0, scrollTop - rowHeight * OVER_SCAN_ROWS),
+      bottom: scrollTop + clientHeight + rowHeight * OVER_SCAN_ROWS
+    };
     setOverScan(newOverScan);
   }, [rowHeight, onLoadMore, groups]);
 
@@ -196,20 +197,10 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
 
   const handleDoubleClick = useCallback((event, image) => {
     event.preventDefault();
-    if (mode === GALLERY_DATE_MODE.YEAR) {
-      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, GALLERY_DATE_MODE.MONTH);
-    } else if (mode === GALLERY_DATE_MODE.MONTH) {
-      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, GALLERY_DATE_MODE.DAY);
-    } else if (mode === GALLERY_DATE_MODE.DAY) {
-      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, GALLERY_DATE_MODE.ALL);
-    } else {
-      const index = images.findIndex(item => item.id === image.id);
-      setImageIndex(index);
-      setIsImagePopupOpen(true);
-    }
-
-    lastState.current = { ...lastState.current, clickTargetId: image.id };
-  }, [mode, images]);
+    const index = images.findIndex(item => item.id === image.id);
+    setImageIndex(index);
+    setIsImagePopupOpen(true);
+  }, [images]);
 
   const handleContextMenu = useCallback((event, image) => {
     event.preventDefault();
@@ -221,15 +212,19 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
 
   const moveToPrevImage = useCallback(() => {
     const imageItemsLength = images.length;
+    const selectedImage = images[(imageIndex + imageItemsLength - 1) % imageItemsLength];
     setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
-    setSelectedImages([images[(imageIndex + imageItemsLength - 1) % imageItemsLength]]);
-  }, [images, imageIndex]);
+    setSelectedImages([selectedImage]);
+    updateSelectedImage(selectedImage);
+  }, [images, imageIndex, updateSelectedImage]);
 
   const moveToNextImage = useCallback(() => {
     const imageItemsLength = images.length;
+    const selectedImage = images[(imageIndex + 1) % imageItemsLength];
     setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
-    setSelectedImages([images[(imageIndex + 1) % imageItemsLength]]);
-  }, [images, imageIndex]);
+    setSelectedImages([selectedImage]);
+    updateSelectedImage(selectedImage);
+  }, [images, imageIndex, updateSelectedImage]);
 
   const handleImageSelection = useCallback((selectedImages) => {
     setSelectedImages(selectedImages);
@@ -289,6 +284,17 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
     updateSelectedImage(newSelectedImage);
   }, [selectedImages, images, onDelete, updateSelectedImage]);
 
+  const handleDateTagClick = useCallback((event, groupName) => {
+    event.preventDefault();
+    if (mode === GALLERY_DATE_MODE.MONTH) {
+      const image = groups.find(group => group.name === groupName)?.children[0]?.children[0];
+      if (image) {
+        lastState.current = { ...lastState.current, targetGroupFirstImageId: image.id };
+      }
+      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, GALLERY_DATE_MODE.DAY);
+    }
+  }, [mode, groups]);
+
   useEffect(() => {
     updateCurrentDirent();
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -355,7 +361,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
         return previousValue;
       }, 0) + rowIndex;
       const topOffset = rowOffset * perImageOffset + groupIndex * (mode === GALLERY_DATE_MODE.ALL ? 0 : DATE_TAG_HEIGHT);
-      containerRef.current.scrollTop = containerRef.current.scrollTop + topOffset;
+      scrollContainer.current.scrollTop = scrollContainer.current.scrollTop + topOffset;
       lastState.current = { ...lastState.current, imageSize, mode };
     }
   }, [mode, imageSize, groups]);
@@ -368,30 +374,29 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
 
   useEffect(() => {
     if (!imageSize || imageSize?.large < 0) return;
-    const { clickTargetId } = lastState.current;
-    if (clickTargetId) {
+    const { targetGroupFirstImageId: imageId } = lastState.current;
+    if (imageId) {
       if (mode === GALLERY_DATE_MODE.ALL) {
-        const targetImage = images.find(img => img.id === clickTargetId);
+        const targetImage = images.find(img => img.id === imageId);
         if (targetImage) {
-          containerRef.current.scrollTop = targetImage.rowIndex * rowHeight - 60;
+          scrollContainer.current.scrollTop = targetImage.rowIndex * rowHeight - 60;
         }
       } else {
-        const targetGroup = groups.find(group => group.children.some(row => row.children.some(img => img.id === clickTargetId)));
+        const targetGroup = groups.find(group => group.children.some(row => row.children.some(img => img.id === imageId)));
         if (targetGroup) {
-          containerRef.current.scrollTop = targetGroup.top;
+          scrollContainer.current.scrollTop = targetGroup.top;
         }
       }
-      lastState.current = { ...lastState.current, clickTargetId: null, mode };
+      lastState.current = { ...lastState.current, targetGroupFirstImageId: null, mode };
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageSize, groups, mode]);
 
   return (
-    <>
+    <div className="sf-metadata-gallery-scroll-container" ref={scrollContainer} onScroll={handleScroll}>
       <div
         className={`sf-metadata-gallery-container sf-metadata-gallery-container-${mode}`}
         ref={containerRef}
-        onScroll={handleScroll}
         onMouseDown={handleClickOutside}
       >
         {!isFirstLoading && (
@@ -408,6 +413,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
               onImageClick={handleClick}
               onImageDoubleClick={handleDoubleClick}
               onContextMenu={handleContextMenu}
+              onDateTagClick={handleDateTagClick}
             />
             {isLoadingMore &&
               <div className="sf-metadata-gallery-loading-more">
@@ -437,7 +443,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
           />
         </ModalPortal>
       )}
-    </>
+    </div>
   );
 };