fix(desktop): improve setting ui

drl990114 · Sep 6, 2023 · a85f7b1 · a85f7b1
1 parent a3d274d
commit a85f7b1
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 83 deletions.
diff --git a/apps/desktop/src/hooks/useTheme.ts b/apps/desktop/src/hooks/useTheme.ts
@@ -25,7 +25,7 @@ const lightThemeColors = {
 
 const darkThemeColors = {
   primaryFontColor: 'rgba(255, 255, 255, 0.9)',
-  labelFontColor: 'rgba(255, 255, 255, 0.9)',
+  labelFontColor: 'rgba(255, 255, 255, 0.5)',
   accentColor: '#1c78aa',
   borderColor: '#21313d',
   bgColor: '#11191f',

diff --git a/apps/desktop/src/router/Setting/component/SettingGroup/styles.ts b/apps/desktop/src/router/Setting/component/SettingGroup/styles.ts
@@ -2,28 +2,16 @@ import styled from 'styled-components'
 
 export const SettingGroupContainer = styled.div`
   padding: 1rem;
+  margin: 20px 0;
   font-size: 0.875rem;
-  background-color: ${props => props.theme.tipsBgColor};
+  background-color: ${(props) => props.theme.tipsBgColor};
+  box-sizing: border-box;
 
   .setting-group {
     &__title {
-      margin-bottom: 10px;
-    }
-  }
-
-  .setting-item {
-    display: flex;
-    align-items: center;
-
-    &__label {
-      margin-right: 6px;
-      flex-grow: 0;
-      flex-shrink: 0;
-    }
-
-    &__form {
-      flex-grow: 1;
-      flex-shrink: 1;
+      margin-bottom: 20px;
+      font-size: 14px;
+      font-weight: 600;
     }
   }
 `
diff --git a/apps/desktop/src/router/Setting/component/SettingItems/Container.tsx b/apps/desktop/src/router/Setting/component/SettingItems/Container.tsx
@@ -0,0 +1,13 @@
+import styled from "styled-components"
+
+export const SettingItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  .setting-item__slider {
+    width: 120px;
+    box-sizing: border-box;
+  }
+`
diff --git a/apps/desktop/src/router/Setting/component/SettingItems/Input.tsx b/apps/desktop/src/router/Setting/component/SettingItems/Input.tsx
@@ -2,11 +2,13 @@ import { Input } from '@/components/Input'
 import { useCallback, useEffect, useState } from 'react'
 import type { SettingItemProps } from '.'
 import { useGlobalSettingData } from '@/hooks'
+import { SettingLabel } from './Label'
+import { SettingItemContainer } from './Container'
 
 const InputSettingItem: React.FC<SettingItemProps<Setting.InputSettingItem>> = (
   props,
 ) => {
-  const { item, itemKey } = props
+  const { item } = props
   const [settingData, handler] = useGlobalSettingData()
   const { writeSettingData } = handler
   const curValue = settingData[item.key] as unknown as string
@@ -26,14 +28,13 @@ const InputSettingItem: React.FC<SettingItemProps<Setting.InputSettingItem>> = (
   )
 
   return (
-    <label className='setting-item'>
-      <label className="setting-item__label">{itemKey}:</label>
+    <SettingItemContainer>
+      <SettingLabel item={item} />
       <Input
-        className="setting-item__form"
         value={value}
         onChange={handleChange}
       />
-    </label>
+    </SettingItemContainer>
   )
 }
 

diff --git a/apps/desktop/src/router/Setting/component/SettingItems/Label.tsx b/apps/desktop/src/router/Setting/component/SettingItems/Label.tsx
@@ -0,0 +1,30 @@
+import styled from "styled-components"
+
+interface SettingLabelProps {
+  item: Setting.BaseSettingItem
+}
+
+export const SettingLabel = (props: SettingLabelProps) => {
+  const { item } = props
+
+  return <Container>
+    <label className="setting-item__title">{item.title}</label>
+    {item.desc ? <label className="setting-item__label">{item.desc}</label> : null}
+  </Container>
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  .setting-item__title {
+    margin-bottom: 4px;
+    font-size: 14px;
+    color: ${({ theme }) => theme.primaryFontColor};
+  }
+
+  .setting-item__label {
+    font-size: 13px;
+    color: ${({ theme }) => theme.labelFontColor};
+  }
+`
diff --git a/apps/desktop/src/router/Setting/component/SettingItems/Select.tsx b/apps/desktop/src/router/Setting/component/SettingItems/Select.tsx
@@ -2,69 +2,56 @@ import Autocomplete from '@mui/material/Autocomplete'
 import { useEffect, useState } from 'react'
 import type { SettingItemProps } from '.'
 import { useGlobalSettingData } from '@/hooks'
-import styled from 'styled-components'
+import { SettingItemContainer } from './Container'
+import { SettingLabel } from './Label'
 
-const SelectSettingItem: React.FC<
-  SettingItemProps<Setting.SelectSettingItem>
-> = (props) => {
-  const { item, itemKey } = props
+const SelectSettingItem: React.FC<SettingItemProps<Setting.SelectSettingItem>> = (props) => {
+  const { item } = props
   const [settingData, handler] = useGlobalSettingData()
   const { writeSettingData } = handler
   const options = item.options
-  const curValue = options.find(
-    option => option.value === settingData[item.key],
-  )
+  const curValue = options.find((option) => option.value === settingData[item.key])
   const [value, setValue] = useState(curValue)
 
   useEffect(() => {
-    if (curValue !== value)
-      setValue(curValue)
+    if (curValue !== value) setValue(curValue)
   }, [curValue])
 
   return (
-    <Container>
-      <label className="setting-item__label">{itemKey}</label>
+    <SettingItemContainer>
+      <SettingLabel item={item} />
       <Autocomplete
-        className="setting-item__form"
+        className='setting-item__form'
         sx={{
-          'display': 'inline-block',
+          display: 'inline-block',
           '& input': {
             bgcolor: 'background.paper',
-            color: theme =>
-              theme.palette.getContrastText(theme.palette.background.paper),
+            color: (theme) => theme.palette.getContrastText(theme.palette.background.paper),
           },
         }}
         value={value}
         options={options}
         getOptionLabel={(option) => {
           // Value selected with enter, right from the input
-          if (typeof option === 'string')
-            return option
+          if (typeof option === 'string') return option
 
           // Regular option
           return option.title
         }}
         renderOption={(p, option) => <li {...p}>{option.title}</li>}
         onChange={(_, v) => {
-          if (!v)
-            return
+          if (!v) return
           writeSettingData(item, v.value)
           setValue(v)
         }}
-        renderInput={params => (
+        renderInput={(params) => (
           <div ref={params.InputProps.ref}>
-            <input type="text" {...params.inputProps} />
+            <input type='text' {...params.inputProps} />
           </div>
         )}
       />
-    </Container>
+    </SettingItemContainer>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
-
 export default SelectSettingItem
diff --git a/apps/desktop/src/router/Setting/component/SettingItems/Slider.tsx b/apps/desktop/src/router/Setting/component/SettingItems/Slider.tsx
@@ -2,10 +2,11 @@ import { useCallback, useEffect, useState } from 'react'
 import type { SettingItemProps } from '.'
 import { useGlobalSettingData } from '@/hooks'
 import { Slider } from '@mui/material'
-import styled from 'styled-components'
+import { SettingLabel } from './Label'
+import { SettingItemContainer } from './Container'
 
 const SliderSettingItem: React.FC<SettingItemProps<Setting.SliderSettingItem>> = (props) => {
-  const { item, itemKey } = props
+  const { item } = props
   const [settingData, handler] = useGlobalSettingData()
   const { writeSettingData } = handler
   const curValue = settingData[item.key] as unknown as number
@@ -23,8 +24,8 @@ const SliderSettingItem: React.FC<SettingItemProps<Setting.SliderSettingItem>> =
   )
 
   return (
-    <Container>
-      <label className='setting-item__label'>{itemKey}</label>
+    <SettingItemContainer>
+      <SettingLabel item={item}/>
       <Slider
         className='setting-item__slider'
         value={value}
@@ -33,18 +34,8 @@ const SliderSettingItem: React.FC<SettingItemProps<Setting.SliderSettingItem>> =
         min={item.scope[0]}
         max={item.scope[1]}
       />
-    </Container>
+    </SettingItemContainer>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .setting-item__slider {
-    width: 120px;
-  }
-`
-
 export default SliderSettingItem
diff --git a/apps/desktop/src/router/Setting/component/SettingItems/Switch.tsx b/apps/desktop/src/router/Setting/component/SettingItems/Switch.tsx
@@ -2,12 +2,13 @@ import { useCallback, useEffect, useState } from 'react'
 import type { SettingItemProps } from '.'
 import { useGlobalSettingData } from '@/hooks'
 import { Switch } from '@mui/material'
-import styled from 'styled-components'
+import { SettingItemContainer } from './Container'
+import { SettingLabel } from './Label'
 
 const SwitchSettingItem: React.FC<SettingItemProps<Setting.SwitchSettingItem>> = (
   props,
 ) => {
-  const { item, itemKey } = props
+  const { item } = props
   const [settingData, handler] = useGlobalSettingData()
   const { writeSettingData } = handler
   const curValue = settingData[item.key] as unknown as boolean
@@ -19,28 +20,22 @@ const SwitchSettingItem: React.FC<SettingItemProps<Setting.SwitchSettingItem>> =
   }, [curValue, value])
 
   const handleChange = useCallback(
-    (e: { target: { value: any } }) => {
-      const settingValue = e.target.value
+    (e: React.ChangeEvent<HTMLInputElement> ) => {
+      const settingValue = e.target.checked
       writeSettingData(item, settingValue)
     },
     [item, writeSettingData],
   )
 
   return (
-    <Container>
-      <label className="setting-item__label">{itemKey}</label>
+    <SettingItemContainer>
+      <SettingLabel item={item}/>
       <Switch
-        value={value}
+        checked={value}
         onChange={handleChange}
       />
-    </Container>
+    </SettingItemContainer>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
-
 export default SwitchSettingItem
diff --git a/apps/desktop/src/router/Setting/settingMap.ts b/apps/desktop/src/router/Setting/settingMap.ts
@@ -3,19 +3,24 @@ const settingMap = {
     "Auto Save": {
       autosave: {
         key: 'autosave',
-        desc: 'Enable auto save, Active file will be automatically saved at set intervals.',
+        title: 'Switch auto save',
+        desc: 'Switch auto save, Active file will be automatically saved at set intervals.',
         type: 'switch',
       },
       autosaveInterval: {
         key: 'autosave_interval',
         type: 'slider',
+        title: 'Auto save interval',
+        desc: 'Set the interval of auto save, in milliseconds.',
         scope: [1000, 10000]
       }
     },
     "Misc": {
       language: {
         key: 'language',
         type: 'select',
+        title: 'Language',
+        desc: 'Set the language of the app.',
         options: [
           {
             title: 'English',
@@ -34,6 +39,8 @@ const settingMap = {
       ApiKey: {
         key: 'extensions_chatgpt_apikey',
         type: 'input',
+        title: 'Api Key',
+        desc: 'Api Key for ChatGPT',
       },
     },
   },

diff --git a/apps/desktop/src/router/Setting/styles.ts b/apps/desktop/src/router/Setting/styles.ts
@@ -109,6 +109,7 @@ export const Container = styled.div`
     flex: 1;
     padding: 1rem 2rem;
     width: 100%;
+    overflow: auto;
     background: ${(props) => props.theme.bgColor};
 
     & .conf-path {