feat: more list item filename overflow options

AlistGo · Feb 28, 2024 · 25c4de8 · 25c4de8
1 parent 1687d11
commit 25c4de8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/lang/en/home.json b/src/lang/en/home.json
@@ -123,7 +123,12 @@
       "none": "None",
       "visible": "Visible"
     },
-    "filename_scrollable": "Filename scrollable",
+    "list_item_filename_overflow": "List item filename overflow",
+    "list_item_filename_overflow_options": {
+      "ellipsis": "Ellipsis",
+      "scrollable": "Scrollable",
+      "multi_line": "Multi-line"
+    },
     "open_item_on_checkbox": "Open item on Checkbox",
     "open_item_on_checkbox_options": {
       "direct": "Direct",

diff --git a/src/pages/home/folder/ListItem.tsx b/src/pages/home/folder/ListItem.tsx
@@ -38,7 +38,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
   const { show } = useContextMenu({ id: 1 })
   const { pushHref, to } = useRouter()
   const isShouldOpenItem = useOpenItemWithCheckbox()
-  const filenameScrollable = () => local["filename_scrollable"] === "true"
+  const filenameStyle = () => local["list_item_filename_overflow"]
   return (
     <Motion.div
       initial={{ opacity: 0, scale: 0.95 }}
@@ -115,9 +115,12 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
           <Text
             class="name"
             css={{
-              whiteSpace: "nowrap",
-              "overflow-x": filenameScrollable() ? "auto" : "hidden",
-              textOverflow: filenameScrollable() ? "unset" : "ellipsis",
+              wordBreak: "break-all",
+              whiteSpace: filenameStyle() === "multi_line" ? "unset" : "nowrap",
+              "overflow-x":
+                filenameStyle() === "scrollable" ? "auto" : "hidden",
+              textOverflow:
+                filenameStyle() === "ellipsis" ? "ellipsis" : "unset",
               "scrollbar-width": "none", // firefox
               "&::-webkit-scrollbar": {
                 // webkit

diff --git a/src/store/local_settings.ts b/src/store/local_settings.ts
@@ -47,9 +47,10 @@ export const initialLocalSettings = [
     type: "number",
   },
   {
-    key: "filename_scrollable",
-    default: "false",
-    type: "boolean",
+    key: "list_item_filename_overflow",
+    default: "ellipsis",
+    type: "select",
+    options: ["ellipsis", "scrollable", "multi_line"],
   },
   {
     key: "open_item_on_checkbox",