feat: make long filename scrollable (#149)

* feat: make long file name scrollable * make it optional --------- Co-authored-by: Andy Hsu <i@nn.ci>
AlistGo · Feb 23, 2024 · 1fcd962 · 1fcd962
1 parent d0e8acf
commit 1fcd962
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/src/lang/en/home.json b/src/lang/en/home.json
@@ -122,7 +122,8 @@
     "show_sidebar_options": {
       "none": "None",
       "visible": "Visible"
-    }
+    },
+    "filename_scrollable": "Filename scrollable"
   },
   "package_download": {
     "current_status": "Current Status",

diff --git a/src/pages/home/folder/ListItem.tsx b/src/pages/home/folder/ListItem.tsx
@@ -7,6 +7,7 @@ import { usePath, useUtil } from "~/hooks"
 import {
   checkboxOpen,
   getMainColor,
+  local,
   OrderBy,
   selectAll,
   selectIndex,
@@ -34,6 +35,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
   }
   const { setPathAs } = usePath()
   const { show } = useContextMenu({ id: 1 })
+  const filenameScrollable = () => local["filename_scrollable"] === "true"
   return (
     <Motion.div
       initial={{ opacity: 0, scale: 0.95 }}
@@ -102,8 +104,13 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
             class="name"
             css={{
               whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
+              "overflow-x": filenameScrollable() ? "auto" : "hidden",
+              textOverflow: filenameScrollable() ? "unset" : "ellipsis",
+              "scrollbar-width": "none", // firefox
+              "&::-webkit-scrollbar": {
+                // webkit
+                display: "none",
+              },
             }}
             title={props.obj.name}
           >

diff --git a/src/pages/home/toolbar/LocalSettings.tsx b/src/pages/home/toolbar/LocalSettings.tsx
@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
   VStack,
+  Switch as HopeSwitch,
 } from "@hope-ui/solid"
 import { For, Match, onCleanup, Switch } from "solid-js"
 import { SwitchLanguageWhite, SwitchColorMode } from "~/components"
@@ -71,6 +72,14 @@ function LocalSettingEdit(props: LocalSetting) {
             </SelectContent>
           </Select>
         </Match>
+        <Match when={props.type === "boolean"}>
+          <HopeSwitch
+            defaultChecked={local[props.key] === "true"}
+            onChange={(e) => {
+              setLocal(props.key, e.currentTarget.checked.toString())
+            }}
+          />
+        </Match>
       </Switch>
     </FormControl>
   )

diff --git a/src/store/local_settings.ts b/src/store/local_settings.ts
@@ -46,6 +46,11 @@ export const initialLocalSettings = [
     default: "90",
     type: "number",
   },
+  {
+    key: "filename_scrollable",
+    default: "false",
+    type: "boolean",
+  },
 ]
 export type LocalSetting = (typeof initialLocalSettings)[number]
 for (const setting of initialLocalSettings) {