feat: 使用Grid优化布局 (#112)

pot-app · May 20, 2023 · 31891c3 · 31891c3
1 parent 9a8e443
commit 31891c3
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 25 deletions.
diff --git a/src/styles/style.css b/src/styles/style.css
@@ -26,7 +26,7 @@ html {
     height: 35px;
     user-select: none;
     position: fixed;
-    margin: 1px;
+    margin: 5px;
     top: 0;
     left: 0;
     right: 0;
@@ -37,10 +37,10 @@ html {
 }
 
 *::-webkit-scrollbar-thumb {
-    background: #c0c1c5;
+    background: #c0c1c550;
     border-radius: 5px;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-    background: #c0c1c5;
+    background: #c0c1c550;
 }
diff --git a/src/windows/Config/index.jsx b/src/windows/Config/index.jsx
@@ -18,6 +18,8 @@ export const defaultPinedAtom = atom(true);
 export const dynamicTranslateAtom = atom(false);
 export const deleteNewlineAtom = atom(false);
 export const openaiStreamAtom = atom(false);
+export const hideSourceAtom = atom(false);
+export const hideLanguageAtom = atom(false);
 export const autoCopyAtom = atom(4);
 export const targetLanguageAtom = atom('zh-cn');
 export const secondLanguageAtom = atom('en');
@@ -50,6 +52,8 @@ export default function Config() {
     const setDynamicTranslate = useSetAtom(dynamicTranslateAtom);
     const setDeleteNewline = useSetAtom(deleteNewlineAtom);
     const setOpenaiStream = useSetAtom(openaiStreamAtom);
+    const setHideSource = useSetAtom(hideSourceAtom);
+    const setHideLanguage = useSetAtom(hideLanguageAtom);
     const setAutoCopy = useSetAtom(autoCopyAtom);
     const setTargetLanguage = useSetAtom(targetLanguageAtom);
     const setSecondLanguage = useSetAtom(secondLanguageAtom);
@@ -83,6 +87,8 @@ export default function Config() {
         setDynamicTranslate(get('dynamic_translate') ?? false);
         setDeleteNewline(get('delete_newline') ?? false);
         setOpenaiStream(get('openai_stream') ?? false);
+        setHideSource(get('hide_source') ?? false);
+        setHideLanguage(get('hide_language') ?? false);
         setAutoCopy(get('auto_copy') ?? 4);
         setTargetLanguage(get('target_language') ?? 'zh-cn');
         setSecondLanguage(get('second_language') ?? 'en');

diff --git a/src/windows/Config/pages/AppConfig/index.jsx b/src/windows/Config/pages/AppConfig/index.jsx
@@ -17,6 +17,8 @@ import {
     windowHeightAtom,
     windowWidthAtom,
     themeAtom,
+    hideSourceAtom,
+    hideLanguageAtom,
 } from '../..';
 import { invoke } from '@tauri-apps/api/tauri';
 
@@ -28,6 +30,8 @@ export default function AppConfig() {
     const [defaultWindow, setDefaultWindow] = useAtom(defaultWindowAtom);
     const [windowWidth, setWindowWidth] = useAtom(windowWidthAtom);
     const [windowHeight, setWindowHeight] = useAtom(windowHeightAtom);
+    const [hideSource, setHideSource] = useAtom(hideSourceAtom);
+    const [hideLanguage, setHideLanguage] = useAtom(hideLanguageAtom);
     const [theme, setTheme] = useAtom(themeAtom);
     const muitheme = useTheme();
 
@@ -99,6 +103,30 @@ export default function AppConfig() {
                         }
                         label='独立翻译窗口默认置顶'
                     />
+                    <FormControlLabel
+                        control={
+                            <Checkbox
+                                checked={hideSource}
+                                onChange={(e) => {
+                                    setHideSource(e.target.checked);
+                                    set('hide_source', e.target.checked);
+                                }}
+                            />
+                        }
+                        label='隐藏原文本'
+                    />
+                    <FormControlLabel
+                        control={
+                            <Checkbox
+                                checked={hideLanguage}
+                                onChange={(e) => {
+                                    setHideLanguage(e.target.checked);
+                                    set('hide_language', e.target.checked);
+                                }}
+                            />
+                        }
+                        label='隐藏语言栏'
+                    />
                 </ConfigItem>
                 <ConfigItem label='网络代理'>
                     <TextField

diff --git a/src/windows/Translator/components/SourceArea/style.css b/src/windows/Translator/components/SourceArea/style.css
@@ -1,11 +1,9 @@
 .sourcearea {
     padding: 8px;
-    height: calc(40vh - 61px);
-    /* 原本应该是40vh-91px 加了CssBaseline之后不知道为什么多出了30px */
 }
 
 .overflow-sourcearea {
-    height: calc(100% - 30px);
+    max-height: 100px;
     overflow: auto;
 }
 

diff --git a/src/windows/Translator/index.jsx b/src/windows/Translator/index.jsx
@@ -1,7 +1,7 @@
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { appWindow } from '@tauri-apps/api/window';
-import { useMediaQuery, Box } from '@mui/material';
+import { useMediaQuery, Grid } from '@mui/material';
 import React, { useEffect } from 'react';
 import LanguageSelector from './components/LanguageSelector';
 import TargetArea from './components/TargetArea';
@@ -29,25 +29,36 @@ export default function Translator() {
                 className='titlebar'
             />
             <TopBar />
-            <SourceArea />
-            <LanguageSelector />
-            <Box
-                style={{
-                    marginTop: '8px',
-                    height: 'calc(60vh - 44px)',
-                    overflow: 'auto',
-                }}
+            <Grid
+                container
+                direction='column'
+                height='calc(100vh - 50px)'
             >
-                {interfaceList.map((x, index) => {
-                    return (
-                        <TargetArea
-                            i={x}
-                            q={index}
-                            key={x}
-                        />
-                    );
-                })}
-            </Box>
+                <Grid style={{ width: '100%', display: get('hide_source') ?? false ? 'none' : '' }}>
+                    <SourceArea />
+                </Grid>
+                <Grid style={{ width: '100%', display: get('hide_language') ?? false ? 'none' : '' }}>
+                    <LanguageSelector />
+                </Grid>
+                <Grid
+                    style={{
+                        width: '100%',
+                        overflow: 'auto',
+                        marginTop: '8px',
+                    }}
+                    xs
+                >
+                    {interfaceList.map((x, index) => {
+                        return (
+                            <TargetArea
+                                i={x}
+                                q={index}
+                                key={x}
+                            />
+                        );
+                    })}
+                </Grid>
+            </Grid>
         </ThemeProvider>
     );
 }