Optimize Theme Setting Page

Wox-launcher · Nov 27, 2023 · c78e18d · c78e18d
1 parent f0cd7b2
commit c78e18d
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 32 deletions.
diff --git a/Wox.UI.React/src/components/settings/WoxSettingThemes.tsx b/Wox.UI.React/src/components/settings/WoxSettingThemes.tsx
@@ -2,8 +2,10 @@ import React, { useEffect, useImperativeHandle, useState } from "react"
 import styled from "styled-components"
 import WoxThemePreview from "../themes/WoxThemePreview.tsx"
 import { WoxThemeHelper } from "../../utils/WoxThemeHelper.ts"
-import { Box, Card, CardContent, Chip, Divider, Skeleton, Typography } from "@mui/material"
+import { Box, List, ListItemButton, ListItemText, Skeleton } from "@mui/material"
 import { Theme } from "../../entity/Theme.typings"
+import { useWindowSize } from "usehooks-ts"
+import WoxScrollbar from "../tools/WoxScrollbar.tsx"
 
 export type WoxSettingThemesRefHandler = {}
 
@@ -14,6 +16,8 @@ export default React.forwardRef((_props: WoxSettingThemesProps, ref: React.Ref<W
   const [selectedThemeIndex, setSelectedThemeIndex] = useState(0)
   const [currentTheme, setCurrentTheme] = useState<Theme>({} as Theme)
   const [themes, setThemes] = useState<Theme[]>([])
+  const size = useWindowSize()
+
   useImperativeHandle(ref, () => ({}))
 
   useEffect(() => {
@@ -38,39 +42,83 @@ export default React.forwardRef((_props: WoxSettingThemesProps, ref: React.Ref<W
         </Box>
       )}
       {!loading && (
-        <Card sx={{ width: "100%", borderRadius: 0, background: "transparent", boxShadow: "initial" }}>
-          <Typography variant="h6" component="div" sx={{ padding: "5px 16px", color: "white" }}>
-            Available Themes
-          </Typography>
-          <Divider />
-          <CardContent>
-            {themes.map((item, index) => {
-              return index === selectedThemeIndex ? (
-                <Chip
-                  label={item.ThemeName}
-                  color={"primary"}
-                  onClick={() => {
-                    setSelectedThemeIndex(index)
-                    setCurrentTheme(themes[index])
-                  }}
-                />
-              ) : (
-                <Chip
-                  label={item.ThemeName}
-                  onClick={() => {
-                    setSelectedThemeIndex(index)
-                    setCurrentTheme(themes[index])
-                  }}
-                />
-              )
-            })}
-          </CardContent>
-        </Card>
+        <Box sx={{ display: "flex", flexGrow: 1, height: size.height - 400 }}>
+          <div className={"theme-list-container"}>
+            <WoxScrollbar
+              className={"theme-list-scrollbars"}
+              scrollbarProps={{
+                autoHeightMax: size.height - 400
+              }}
+            >
+              <List>
+                {themes.map((item, index) => {
+                  return (
+                    <ListItemButton
+                      selected={index === selectedThemeIndex}
+                      onClick={() => {
+                        setSelectedThemeIndex(index)
+                      }}
+                    >
+                      <ListItemText primary={item.ThemeName} secondary={<span className={"theme-author"}>{item.ThemeAuthor}</span>} />
+                    </ListItemButton>
+                  )
+                })}
+              </List>
+            </WoxScrollbar>
+          </div>
+          <div className={"theme-setting-container"}>&nbsp;</div>
+        </Box>
+        // <Card sx={{ width: "100%", borderRadius: 0, background: "transparent", boxShadow: "initial" }}>
+        //   <Typography variant="h6" component="div" sx={{ padding: "5px 16px", color: "white" }}>
+        //     Available Themes
+        //   </Typography>
+        //   <Divider />
+        //   <CardContent>
+        //     {themes.map((item, index) => {
+        //       return index === selectedThemeIndex ? (
+        //         <Chip
+        //           label={item.ThemeName}
+        //           color={"primary"}
+        //           onClick={() => {
+        //             setSelectedThemeIndex(index)
+        //             setCurrentTheme(themes[index])
+        //           }}
+        //         />
+        //       ) : (
+        //         <Chip
+        //           label={item.ThemeName}
+        //           onClick={() => {
+        //             setSelectedThemeIndex(index)
+        //             setCurrentTheme(themes[index])
+        //           }}
+        //         />
+        //       )
+        //     })}
+        //   </CardContent>
+        // </Card>
       )}
     </Style>
   )
 })
 
 const Style = styled.div`
   margin-top: -32px;
+  .theme-list-container,
+  .theme-setting-container {
+    flex: 1;
+    height: 100%;
+  }
+
+  .theme-list-container {
+    border-right: 1px solid #23272d;
+  }
+
+  .theme-author {
+    color: #787b8b;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(50vw - 280px);
+  }
 `
diff --git a/Wox.UI.React/src/components/themes/WoxThemePreview.tsx b/Wox.UI.React/src/components/themes/WoxThemePreview.tsx
@@ -21,7 +21,7 @@ export default (props: { theme: Theme }) => {
         Actions: [
           {
             Id: "e5ec9374-facf-4733-9439-a3b9e067c4c1",
-            Name: "打开",
+            Name: "Open",
             Icon: {
               ImageType: "svg",
               ImageData:
@@ -32,7 +32,7 @@ export default (props: { theme: Theme }) => {
           },
           {
             Id: "115697fe-a395-4254-aaed-a8b570848df5",
-            Name: "打开所在文件夹",
+            Name: "Open Folder",
             Icon: {
               ImageType: "svg",
               ImageData:
@@ -43,7 +43,7 @@ export default (props: { theme: Theme }) => {
           },
           {
             Id: "ec482e87-099b-49fa-a9b7-8e1829abe1ce",
-            Name: "复制路径",
+            Name: "Copy Path",
             Icon: {
               ImageType: "base64",
               ImageData: