fix: folder not shows in image view if no images

close AlistGo/alist#4886
AlistGo · Aug 1, 2023 · 912e0db · 912e0db
1 parent 282e4c2
commit 912e0db
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/pages/home/folder/Folder.tsx b/src/pages/home/folder/Folder.tsx
@@ -33,7 +33,7 @@ const ImageLayout = lazy(() => import("./Images"))
 const Folder = () => {
   const { rawLink } = useLink()
   const images = createMemo(() =>
-    objStore.objs.filter((obj) => obj.type === ObjType.IMAGE)
+    objStore.objs.filter((obj) => obj.type === ObjType.IMAGE),
   )
 
   let dynamicGallery: LightGallery | undefined
@@ -56,7 +56,7 @@ const Folder = () => {
     on(images, () => {
       dynamicGallery?.destroy()
       dynamicGallery = undefined
-    })
+    }),
   )
   bus.on("gallery", (name) => {
     if (!dynamicGallery) {
@@ -79,12 +79,7 @@ const Folder = () => {
           <GridLayout />
         </Match>
         <Match when={layout() === "image"}>
-          <Show
-            when={images().length > 0}
-            fallback={<Heading m="$2">{t("home.no_images")}</Heading>}
-          >
-            <ImageLayout />
-          </Show>
+          <ImageLayout images={images()} />
         </Match>
       </Switch>
       <Pager />

diff --git a/src/pages/home/folder/Images.tsx b/src/pages/home/folder/Images.tsx
@@ -1,10 +1,13 @@
-import { Flex, Grid, VStack } from "@hope-ui/solid"
+import { Flex, Grid, Heading, VStack } from "@hope-ui/solid"
 import { For, Show, createMemo } from "solid-js"
 import { ImageItem } from "./ImageItem"
 import { local, objStore } from "~/store"
 import { GridItem } from "./GridItem"
+import { StoreObj } from "~/types"
+import { useT } from "~/hooks"
 
-const ImageLayout = () => {
+const ImageLayout = (props: { images: StoreObj[] }) => {
+  const t = useT()
   const folders = createMemo(() => (
     <Grid
       w="$full"
@@ -24,13 +27,18 @@ const ImageLayout = () => {
       <Show when={local["show_folder_in_image_view"] === "top"}>
         {folders()}
       </Show>
-      <Flex w="$full" gap="$1" flexWrap="wrap" class="image-images">
-        <For each={objStore.objs}>
-          {(obj, i) => {
-            return <ImageItem obj={obj} index={i()} />
-          }}
-        </For>
-      </Flex>
+      <Show
+        when={props.images.length > 0}
+        fallback={<Heading m="$2">{t("home.no_images")}</Heading>}
+      >
+        <Flex w="$full" gap="$1" flexWrap="wrap" class="image-images">
+          <For each={objStore.objs}>
+            {(obj, i) => {
+              return <ImageItem obj={obj} index={i()} />
+            }}
+          </For>
+        </Flex>
+      </Show>
       <Show when={local["show_folder_in_image_view"] === "bottom"}>
         {folders()}
       </Show>