update setting window

noob9527 · Jan 14, 2024 · aae46d6 · aae46d6
1 parent 900f36f
commit aae46d6
Show file tree

Hide file tree

Showing 8 changed files with 266 additions and 69 deletions.
diff --git a/src/browser/components/themed-ui/tabs/tabs.tsx b/src/browser/components/themed-ui/tabs/tabs.tsx
@@ -1,3 +1,6 @@
+/**
+ * @see https://github.com/reactjs/react-tabs?tab=readme-ov-file#custom-components
+ */
 import React from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 // import './tabs.css';

diff --git a/src/browser/pages/search/split-pane.tsx → ...r/pages/search/search-page-split-pane.tsx b/src/browser/pages/search/split-pane.tsx → ...r/pages/search/search-page-split-pane.tsx
@@ -2,7 +2,8 @@ import SplitPane from 'react-split-pane';
 import styled from 'styled-components';
 import ColorId from '../../styles/ColorId';
 
-const ThemedSplitPane = styled(SplitPane)`
+// see: https://github.com/tomkp/react-split-pane
+const SearchPageSplitPane = styled(SplitPane)`
   // unset height: 100%
   // unset min-height: 100%
   height: unset !important;
@@ -75,4 +76,4 @@ const ThemedSplitPane = styled(SplitPane)`
   }
 `;
 
-export default ThemedSplitPane;
+export default SearchPageSplitPane;
diff --git a/src/browser/pages/search/search-page.tsx b/src/browser/pages/search/search-page.tsx
@@ -10,7 +10,7 @@ import { SearchPanelMenu, SearchPanelMenuItem } from './panel/search-panel-menu'
 import { ThemedContent } from '../../components/themed-ui/content/content';
 import styled from 'styled-components';
 import SearchNote from './note/search-note';
-import ThemedSplitPane from './split-pane';
+import SearchPageSplitPane from './search-page-split-pane';
 import { SearchState, SPLIT_PANE_SIZE_MAX, SPLIT_PANE_SIZE_MIN } from './search-model';
 import _ from 'lodash';
 import { useParams } from 'react-router-dom';
@@ -113,7 +113,7 @@ export default () => {
           }
           {showSearchNote ?
             (
-              <ThemedSplitPane
+              <SearchPageSplitPane
                 primary="second"
                 split="horizontal"
                 minSize={SPLIT_PANE_SIZE_MIN}
@@ -124,7 +124,7 @@ export default () => {
               >
                 <SearchPanel/>
                 <SearchNote/>
-              </ThemedSplitPane>
+              </SearchPageSplitPane>
             )
             :
             (

diff --git a/src/browser/pages/setting/general-setting-page.tsx b/src/browser/pages/setting/general-setting-page.tsx
@@ -0,0 +1,77 @@
+import { settingChange, useSettingStore } from './setting-store'
+import { shell } from 'electron'
+import { DbLocationSetting } from './db-location-setting'
+import { EcdictLocationSetting } from './ecdict-location-setting'
+import { ThemedCheckbox } from '../../components/themed-ui/input/checkbox'
+import { ThemedInputShortcut } from '../../components/themed-ui/input/input-shortcut/themed-input-shortcut'
+import React from 'react'
+import { rendererContainer } from '../../../common/container/renderer-container'
+import {
+  AppService,
+  AppServiceToken,
+} from '../../../common/services/app-service'
+import styled from 'styled-components'
+
+const appService = rendererContainer.get<AppService>(AppServiceToken)
+const userDataFolder = appService.getUserDataFolder()
+
+const Container = styled.div`
+  > div {
+    margin: 30px 0;
+  }
+`
+
+const InlineContainer = styled.span`
+  display: inline-flex;
+  align-items: center;
+
+  > * + * {
+    margin-left: 10px;
+  }
+`
+
+export const GeneralSettingPage = () => {
+  const { appHotKey, readClipboard } = useSettingStore()
+  return (
+    <Container>
+      <div>
+        <span>User Data Folder: </span>
+        <a
+          onClick={() => {
+            shell.showItemInFolder(userDataFolder)
+          }}
+          role="button"
+        >
+          {userDataFolder}
+        </a>
+      </div>
+      <DbLocationSetting />
+      <EcdictLocationSetting />
+      <div>
+        <ThemedCheckbox
+          checked={readClipboard}
+          onChange={(event) => {
+            settingChange({
+              readClipboard: event?.target?.checked!!,
+            })
+          }}
+        >
+          Read Clipboard
+        </ThemedCheckbox>
+      </div>
+      <div>
+        <InlineContainer>
+          <span>hot key:</span>
+          <ThemedInputShortcut
+            value={appHotKey}
+            onChange={(value) => {
+              settingChange({
+                appHotKey: value,
+              })
+            }}
+          />
+        </InlineContainer>
+      </div>
+    </Container>
+  )
+}
diff --git a/src/browser/pages/setting/setting-page-split-pane.tsx b/src/browser/pages/setting/setting-page-split-pane.tsx
@@ -0,0 +1,66 @@
+import SplitPane from 'react-split-pane';
+import styled from 'styled-components';
+import ColorId from '../../styles/ColorId';
+
+// see: https://github.com/tomkp/react-split-pane
+const SettingPageSplitPane = styled(SplitPane)`
+  &.SplitPane {
+    position: unset !important;
+  }
+  .Resizer {
+    //background: #000;
+    background: ${props => props.theme[ColorId.foreground]};
+    opacity: 0.2;
+    z-index: 1;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+  }
+
+  .Resizer:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+  }
+
+  .Resizer.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
+  }
+
+  .Resizer.horizontal:hover {
+    //border-top: 5px solid rgba(0, 0, 0, 0.5);
+    //border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    border-top: 5px solid rgba(255, 255, 255, 0.5);
+    border-bottom: 5px solid rgba(255, 255, 255, 0.5);
+  }
+
+  .Resizer.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+  }
+
+  .Resizer.vertical:hover {
+    border-left: 5px solid rgba(0, 0, 0, 0.5);
+    border-right: 5px solid rgba(0, 0, 0, 0.5);
+  }
+
+  .Resizer.disabled {
+    cursor: not-allowed;
+  }
+
+  .Resizer.disabled:hover {
+    border-color: transparent;
+  }
+`;
+
+export default SettingPageSplitPane;
diff --git a/src/browser/pages/setting/setting-page.tsx b/src/browser/pages/setting/setting-page.tsx
@@ -1,77 +1,67 @@
-import React, { useRef } from 'react';
-import styled from 'styled-components';
-import { useDispatch, useSelector } from 'react-redux';
-import { ThemedCheckbox } from '../../components/themed-ui/input/checkbox';
-import { ThemedContent } from '../../components/themed-ui/content/content';
-import { ThemedInputShortcut } from '../../components/themed-ui/input/input-shortcut/themed-input-shortcut';
-import { EcdictLocationSetting } from './ecdict-location-setting';
-import { rendererContainer } from '../../../common/container/renderer-container';
-import { shell } from 'electron';
-import { AppService, AppServiceToken } from '../../../common/services/app-service';
-import { DbLocationSetting } from './db-location-setting';
-import { settingChange, useSettingStore } from './setting-store';
-const appService = rendererContainer.get<AppService>(AppServiceToken);
+import React from 'react'
+import styled from 'styled-components'
+import { ThemedContent } from '../../components/themed-ui/content/content'
+import SettingPageSplitPane from './setting-page-split-pane'
+// import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import {
+  Tab,
+  Tabs,
+  TabList,
+  TabPanel,
+} from '../../components/themed-ui/tabs/tabs'
+import ColorId from '../../styles/ColorId'
+import { GeneralSettingPage } from './general-setting-page'
+import { SyncSettingPage } from './sync-setting-page';
 
 const Container = styled.div`
   height: 100vh;
   padding: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-`;
+`
 
-const InlineContainer = styled.span`
-  display: inline-flex;
-  align-items: center;
+const StyledTabs = styled(Tabs)`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+`
 
-  > * + * {
-    margin-left: 10px;
-  }
-`;
+// @ts-ignore
+const StyledTabList = styled(TabList)`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => props.theme[ColorId.background]};
+`
 
-const userDataFolder = appService.getUserDataFolder();
+const StyledContent = styled.div`
+  margin: 20px;
+`
 
 const SettingPage = () => {
-  const {
-    appHotKey,
-    readClipboard,
-  } = useSettingStore()
-
   return (
     <ThemedContent>
       <Container>
-        <div>
-          <span>User Data Folder: </span>
-          <a
-            onClick={() => {
-              shell.showItemInFolder(userDataFolder);
-            }}
-            role="button"
-          >{userDataFolder}</a>
-        </div>
-        <DbLocationSetting/>
-        <EcdictLocationSetting/>
-        <ThemedCheckbox
-          checked={readClipboard}
-          onChange={event => {
-            settingChange({
-              readClipboard: event?.target?.checked!!,
-            })
-          }}>Read Clipboard</ThemedCheckbox>
-        <InlineContainer>
-          <span>hot key:</span>
-          <ThemedInputShortcut
-            value={appHotKey}
-            onChange={value => {
-              settingChange({
-                appHotKey: value,
-              })
-            }}
-          />
-        </InlineContainer>
+        <StyledTabs>
+          <SettingPageSplitPane
+            split="vertical"
+            minSize={120}
+          >
+            <StyledTabList>
+              <Tab>General</Tab>
+              <Tab>Auto Sync</Tab>
+            </StyledTabList>
+
+            <StyledContent>
+              <TabPanel>
+                <GeneralSettingPage />
+              </TabPanel>
+              <TabPanel>
+                <SyncSettingPage />
+              </TabPanel>
+            </StyledContent>
+          </SettingPageSplitPane>
+        </StyledTabs>
       </Container>
     </ThemedContent>
-  );
-};
+  )
+}
 
-export default SettingPage;
+export default SettingPage
diff --git a/src/browser/pages/setting/sync-setting-page.tsx b/src/browser/pages/setting/sync-setting-page.tsx
@@ -0,0 +1,60 @@
+import { settingChange, useSettingStore } from './setting-store'
+import React from 'react'
+import styled from 'styled-components'
+import { ThemedCheckbox } from '../../components/themed-ui/input/checkbox'
+
+const Container = styled.div`
+  > div {
+    margin: 30px 0;
+  }
+`
+
+export const SyncSettingPage = () => {
+  const syncOnQuit = useSettingStore.use['search.syncHistory.syncOnQuit']()
+  const syncOnStart = useSettingStore.use['search.syncHistory.syncOnStart']()
+  const syncIntervalMinutes =
+    useSettingStore.use['search.syncHistory.syncIntervalMinutes']()
+  const autoSyncInBackground = syncIntervalMinutes > 0
+  return (
+    <Container>
+      <div>
+        <ThemedCheckbox
+          checked={syncOnStart}
+          onChange={(event) => {
+            settingChange({
+              'search.syncHistory.syncOnStart': event?.target?.checked!!,
+            })
+          }}
+        >
+          Sync On Start
+        </ThemedCheckbox>
+      </div>
+      <div>
+        <ThemedCheckbox
+          checked={syncOnQuit}
+          onChange={(event) => {
+            settingChange({
+              'search.syncHistory.syncOnQuit': event?.target?.checked!!,
+            })
+          }}
+        >
+          Sync On Quit
+        </ThemedCheckbox>
+      </div>
+      <div>
+        <ThemedCheckbox
+          checked={autoSyncInBackground}
+          onChange={(event) => {
+            settingChange({
+              'search.syncHistory.syncIntervalMinutes': event?.target?.checked
+                ? 60
+                : -1,
+            })
+          }}
+        >
+          Auto Sync In Background
+        </ThemedCheckbox>
+      </div>
+    </Container>
+  )
+}
diff --git a/src/electron-main/window/setting-window.ts b/src/electron-main/window/setting-window.ts
@@ -22,8 +22,8 @@ function createWindow() {
   // https://electronjs.org/docs/api/browser-window#modal-windows
   const parent = homeWindowManager.getOrCreate()
   const window = new BrowserWindow({
-    width: Runtime.isDev ? 1200 : 400,
-    height: Runtime.isDev ? 600 : 200,
+    width: Runtime.isDev ? 1200 : 800,
+    height: Runtime.isDev ? 600 : 600,
     maximizable: false,
     minimizable: false,