feat: better action of checkbox on mobile phone (#161)

* feat: better action of checkbox on mobile phone

* fix: z-index of gallery should higher than overlay

src/app/theme.ts

@@ -176,6 +176,14 @@ export const globalStyles = globalCss({
     flexWrap: "wrap",
     rowGap: "0 !important",
   },
+  ".lightgallery-container": {
+    "& .lg-backdrop": {
+      zIndex: "$popover",
+    },
+    "& .lg-outer": {
+      zIndex: "calc($popover + 10)",
+    },
+  },
   ".viselect-selection-area": {
     background: "rgba(46, 115, 252, 0.11)",
     border: "2px solid rgba(98, 155, 255, 0.81)",

src/lang/en/home.json

@@ -132,6 +132,7 @@
     "open_item_on_checkbox": "Open item on Checkbox",
     "open_item_on_checkbox_options": {
       "direct": "Direct",
+      "disable_while_checked": "Disable while checked",
       "with_ctrl": "With Ctrl/Command hold",
       "with_alt": "With Alt/Option hold"
     },

src/pages/home/folder/Folder.tsx

@@ -39,6 +39,7 @@ const Folder = () => {
   let dynamicGallery: LightGallery | undefined
   const initGallery = () => {
     dynamicGallery = lightGallery(document.createElement("div"), {
+      addClass: "lightgallery-container",
       dynamic: true,
       thumbnail: true,
       plugins: [lgZoom, lgThumbnail, lgRotate, lgAutoplay, lgFullscreen],

src/pages/home/folder/GridItem.tsx

@@ -1,4 +1,4 @@
-import { Center, VStack, Icon, Text, Checkbox } from "@hope-ui/solid"
+import { Center, VStack, Icon, Text } from "@hope-ui/solid"
 import { Motion } from "@motionone/solid"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, createMemo, createSignal, Show } from "solid-js"
@@ -14,7 +14,11 @@ import {
 import { ObjType, StoreObj } from "~/types"
 import { bus, hoverColor } from "~/utils"
 import { getIconByObj } from "~/utils/icon"
-import { useOpenItemWithCheckbox, useSelectWithMouse } from "./helper"
+import {
+  ItemCheckbox,
+  useOpenItemWithCheckbox,
+  useSelectWithMouse,
+} from "./helper"
 
 export const GridItem = (props: { obj: StoreObj; index: number }) => {
   const { isHide } = useUtil()
@@ -124,7 +128,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
           pos="relative"
         >
           <Show when={showCheckbox()}>
-            <Checkbox
+            <ItemCheckbox
               pos="absolute"
               left="$1"
               top="$1"

src/pages/home/folder/ImageItem.tsx

@@ -1,4 +1,4 @@
-import { Center, VStack, Icon, Checkbox } from "@hope-ui/solid"
+import { Center, VStack, Icon } from "@hope-ui/solid"
 import { Motion } from "@motionone/solid"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, createMemo, createSignal, Show } from "solid-js"
@@ -8,7 +8,11 @@ import { checkboxOpen, getMainColor, selectAll, selectIndex } from "~/store"
 import { ObjType, StoreObj } from "~/types"
 import { bus } from "~/utils"
 import { getIconByObj } from "~/utils/icon"
-import { useOpenItemWithCheckbox, useSelectWithMouse } from "./helper"
+import {
+  ItemCheckbox,
+  useOpenItemWithCheckbox,
+  useSelectWithMouse,
+} from "./helper"
 
 export const ImageItem = (props: { obj: StoreObj; index: number }) => {
   const { isHide } = useUtil()
@@ -68,7 +72,7 @@ export const ImageItem = (props: { obj: StoreObj; index: number }) => {
           <Show
             when={showCheckbox() || (isMouseSupported() && props.obj.selected)}
           >
-            <Checkbox
+            <ItemCheckbox
               pos="absolute"
               left="$1"
               top="$1"

src/pages/home/folder/List.tsx

@@ -1,4 +1,4 @@
-import { HStack, VStack, Text, Checkbox } from "@hope-ui/solid"
+import { HStack, VStack, Text } from "@hope-ui/solid"
 import { batch, createEffect, createSignal, For, Show } from "solid-js"
 import { useT } from "~/hooks"
 import {
@@ -11,7 +11,7 @@ import {
 } from "~/store"
 import { OrderBy } from "~/store"
 import { Col, cols, ListItem } from "./ListItem"
-import { useSelectWithMouse } from "./helper"
+import { ItemCheckbox, useSelectWithMouse } from "./helper"
 
 const ListLayout = () => {
   const t = useT()
@@ -55,7 +55,7 @@ const ListLayout = () => {
       <HStack class="title" w="$full" p="$2">
         <HStack w={cols[0].w} spacing="$1">
           <Show when={checkboxOpen()}>
-            <Checkbox
+            <ItemCheckbox
               checked={allChecked()}
               indeterminate={isIndeterminate()}
               onChange={(e: any) => {

src/pages/home/folder/ListItem.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, HStack, Icon, Text } from "@hope-ui/solid"
+import { HStack, Icon, Text } from "@hope-ui/solid"
 import { Motion } from "@motionone/solid"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, Show } from "solid-js"
@@ -15,7 +15,11 @@ import {
 import { ObjType, StoreObj } from "~/types"
 import { bus, formatDate, getFileSize, hoverColor } from "~/utils"
 import { getIconByObj } from "~/utils/icon"
-import { useOpenItemWithCheckbox, useSelectWithMouse } from "./helper"
+import {
+  ItemCheckbox,
+  useOpenItemWithCheckbox,
+  useSelectWithMouse,
+} from "./helper"
 
 export interface Col {
   name: OrderBy
@@ -100,7 +104,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
       >
         <HStack class="name-box" spacing="$1" w={cols[0].w}>
           <Show when={checkboxOpen()}>
-            <Checkbox
+            <ItemCheckbox
               // colorScheme="neutral"
               on:click={(e: MouseEvent) => {
                 e.stopPropagation()

src/pages/home/folder/helper.ts

@@ -1,5 +1,6 @@
+import { Checkbox, hope } from "@hope-ui/solid"
 import { createKeyHold } from "@solid-primitives/keyboard"
-import { createEffect, createSignal, on, onCleanup } from "solid-js"
+import { createEffect, createSignal, onCleanup } from "solid-js"
 import SelectionArea from "@viselect/vanilla"
 import {
   checkboxOpen,
@@ -9,7 +10,6 @@ import {
   oneChecked,
   selectAll,
   selectIndex,
-  selectedObjs,
 } from "~/store"
 import { isMac, isMobile } from "~/utils/compatibility"
 import { useContextMenu } from "solid-contextmenu"
@@ -29,6 +29,10 @@ export function useOpenItemWithCheckbox() {
         setShouldOpen(true)
         break
       }
+      case "disable_while_checked": {
+        setShouldOpen(!haveSelected())
+        break
+      }
       case "with_ctrl": {
         // FYI why should use metaKey on a Mac
         // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey
@@ -107,3 +111,17 @@ export function useSelectWithMouse() {
 
   return { isMouseSupported, registerSelectContainer, captureContentMenu }
 }
+
+export const ItemCheckbox = hope(Checkbox, {
+  baseStyle: {
+    // expand the range of click
+    _before: {
+      content: "",
+      pos: "absolute",
+      top: -10,
+      right: -2,
+      bottom: -10,
+      left: -10,
+    },
+  },
+})

src/pages/home/toolbar/LocalSettings.tsx

@@ -58,7 +58,13 @@ function LocalSettingEdit(props: LocalSetting) {
             </SelectTrigger>
             <SelectContent>
               <SelectListbox>
-                <For each={props.options}>
+                <For
+                  each={
+                    typeof props.options === "function"
+                      ? props.options()
+                      : props.options
+                  }
+                >
                   {(item) => (
                     <SelectOption value={item}>
                       <SelectOptionText>
@@ -107,7 +113,7 @@ export const LocalSettings = () => {
         </DrawerHeader>
         <DrawerBody>
           <VStack spacing="$2">
-            <For each={initialLocalSettings}>
+            <For each={initialLocalSettings.filter((s) => !s.hidden)}>
               {(setting) => <LocalSettingEdit {...setting} />}
             </For>
           </VStack>

src/store/local_settings.ts

@@ -57,13 +57,17 @@ export const initialLocalSettings = [
     key: "open_item_on_checkbox",
     default: "direct",
     type: "select",
-    options: ["direct", "with_alt", "with_ctrl"],
+    options: () =>
+      isMobile
+        ? ["direct", "disable_while_checked"]
+        : ["direct", "disable_while_checked", "with_alt", "with_ctrl"],
   },
   {
     key: "select_with_mouse",
     default: "disabled",
     type: "select",
     options: ["disabled", "open_item_with_dblclick"],
+    hidden: isMobile,
   },
 ]
 export type LocalSetting = (typeof initialLocalSettings)[number]