[Update] Config Page: Add break point and change the design layout.(UI Scaling will apply)

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -1,6 +1,7 @@
-import styles from "./Templates.module.scss";
+import clsx from "clsx";
-import { useStore_IsOpenedDropdownMenu } from "@store";
 
+import styles from "./Templates.module.scss";
+import { useStore_IsOpenedDropdownMenu, useStore_IsBreakPoint } from "@store";
 import {
     LabelComponent,
     DropdownMenu,
@@ -17,6 +18,13 @@ import {
     DownloadModels,
 } from "../_components/";
 
+const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
+    <div className={clsx(styles.container, custom_class_name)}>
+        <LabelComponent label={label} desc={desc} />
+        {children}
+    </div>
+);
+
 export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
@@ -29,7 +37,6 @@ export const useOnMouseLeaveDropdownMenu = () => {
 
 export const DropdownMenuContainer = (props) => {
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-
     return (
         <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
             <LabelComponent label={props.label} desc={props.desc} />
@@ -38,94 +45,67 @@ export const DropdownMenuContainer = (props) => {
     );
 };
 
+const CommonContainer = ({ Component, ...props }) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: props.add_break_point ?? currentIsBreakPoint.data,
+    });
 
-export const SliderContainer = (props) => {
     return (
-        <div className={styles.container}>
+        <LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
-            <LabelComponent label={props.label} desc={props.desc} />
+            <Component {...props} />
-            <Slider {...props}/>
+        </LabeledContainer>
-        </div>
     );
 };
+export const SliderContainer = (props) => (
+    <CommonContainer Component={Slider} {...props} />
+);
 
-export const CheckboxContainer = (props) => {
+export const CheckboxContainer = (props) => (
-    return (
+    <CommonContainer Component={Checkbox} {...props} add_break_point={false} />
-        <div className={styles.container}>
+);
+
+export const SwitchBoxContainer = (props) => (
+    <CommonContainer Component={SwitchBox} {...props} />
+);
+
+export const EntryContainer = (props) => (
+    <CommonContainer Component={Entry} {...props} add_break_point={false} />
+);
+
+export const RadioButtonContainer = (props) => (
+    <CommonContainer Component={RadioButton} {...props} />
+);
+
+export const DeeplAuthKeyContainer = (props) => (
+    <div className={styles.container}>
+        <div className={styles.deepl_auth_key_label_section}>
             <LabelComponent label={props.label} desc={props.desc} />
-            <Checkbox {...props}/>
+            <OpenWebpage_DeeplAuthKey />
         </div>
-    );
+        <DeeplAuthKey {...props} />
-};
+    </div>
+);
 
-export const SwitchBoxContainer = (props) => {
+export const ActionButtonContainer = (props) => (
-    return (
+    <CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
-        <div className={styles.container}>
+);
-            <LabelComponent label={props.label} desc={props.desc} />
-            <SwitchBox {...props}/>
-        </div>
-    );
-};
 
-export const EntryContainer = (props) => {
+export const WordFilterContainer = (props) => (
-    return (
+    <div className={styles.word_filter_container}>
-        <div className={styles.container}>
+        <div className={styles.word_filter_switch_section}>
-            <LabelComponent label={props.label} desc={props.desc} />
+            <div className={styles.word_filter_label_wrapper}>
-            <Entry {...props}/>
-        </div>
-    );
-};
-
-export const RadioButtonContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <RadioButton {...props}/>
-        </div>
-    );
-};
-
-export const DeeplAuthKeyContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <div className={styles.deepl_auth_key_label_section}>
                 <LabelComponent label={props.label} desc={props.desc} />
-                <OpenWebpage_DeeplAuthKey />
             </div>
-            <DeeplAuthKey {...props}/>
+            <WordFilterListToggleComponent />
         </div>
-    );
+        <div className={styles.word_filter_section}>
-};
+            <WordFilter {...props} />
+        </div>
+    </div>
+);
 
-export const ActionButtonContainer = (props) => {
+export const DownloadModelsContainer = (props) => (
-    return (
+    <CommonContainer Component={DownloadModels} {...props} />
-        <div className={styles.container}>
+);
-            <LabelComponent label={props.label} desc={props.desc} />
-            <ActionButton {...props}/>
-        </div>
-    );
-};
-
-export const WordFilterContainer = (props) => {
-    return (
-        <div className={styles.word_filter_container}>
-            <div className={styles.word_filter_switch_section}>
-                <div className={styles.word_filter_label_wrapper}>
-                    <LabelComponent label={props.label} desc={props.desc}/>
-                </div>
-                <WordFilterListToggleComponent/>
-            </div>
-            <div className={styles.word_filter_section}>
-                <WordFilter {...props}/>
-            </div>
-        </div>
-    );
-};
-
-export const DownloadModelsContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <DownloadModels {...props}/>
-        </div>
-    );
-};

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -9,6 +9,12 @@
         flex-direction: column;
     }
     border-bottom: solid 0.1rem var(--dark_800_color);
+
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+    }
 }
 
 .label_only_section {

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -4,6 +4,11 @@ import { useTranslation } from "react-i18next";
 import styles from "./Appearance.module.scss";
 import { ui_configs } from "@ui_configs";
 import { useStore_SelectableFontFamilyList } from "@store";
+
+import {
+    useWindow,
+} from "@logics_common";
+
 import {
     useUiLanguage,
     useUiScaling,
@@ -52,6 +57,8 @@ const UiLanguageContainer = () => {
 const UiScalingContainer = () => {
     const { t } = useTranslation();
     const { currentUiScaling, setUiScaling } = useUiScaling();
+    const { asyncUpdateBreakPoint } = useWindow();
+
     const [ui_ui_scaling, setUiUiScaling] = useState(currentUiScaling.data);
 
     const onchangeFunction = (value) => {
@@ -62,6 +69,7 @@ const UiScalingContainer = () => {
     };
     useEffect(() => {
         setUiUiScaling(currentUiScaling.data);
+        asyncUpdateBreakPoint();
     }, [currentUiScaling.data]);
 
     const createMarks = (min, max) => {

src-ui/logics/common/useWindow.js

@@ -1,8 +1,14 @@
-import { useStdoutToPython } from "@logics/useStdoutToPython";
 import { useEffect } from "react";
 import { appWindow, currentMonitor, availableMonitors, LogicalPosition, LogicalSize } from "@tauri-apps/api/window";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStore_IsBreakPoint } from "@store";
+import { useUiScaling } from "@logics_configs";
+
 export const useWindow = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentUiScaling } = useUiScaling();
+    const { updateIsBreakPoint } = useStore_IsBreakPoint();
+
     const asyncGetWindowGeometry = async () => {
         try {
             const position = await appWindow.outerPosition();
@@ -82,13 +88,23 @@ export const useWindow = () => {
         }
     };
 
+    const asyncUpdateBreakPoint = async () => {
+        const size = await appWindow.innerSize();
+        const dynamicBreakPoint = 800 * (currentUiScaling.data / 100);
+        updateIsBreakPoint(size.width <= dynamicBreakPoint);
+    };
 
     const WindowGeometryController = () => {
         useEffect(() => {
             let resizeTimeout;
+            const asyncFunction = () => {
+                asyncSaveWindowGeometry();
+                asyncUpdateBreakPoint();
+            };
+
             const unlistenResize = appWindow.onResized(() => {
                 clearTimeout(resizeTimeout);
-                resizeTimeout = setTimeout(asyncSaveWindowGeometry, 200);
+                resizeTimeout = setTimeout(asyncFunction, 200);
             });
 
             return () => {
@@ -115,5 +131,6 @@ export const useWindow = () => {
         WindowGeometryController,
         asyncSaveWindowGeometry,
         restoreWindowGeometry,
+        asyncUpdateBreakPoint,
     };
 };

src-ui/store.js

@@ -113,6 +113,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
 export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
 export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
 export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress");
+export const { atomInstance: Atom_IsBreakPoint, useHook: useStore_IsBreakPoint } = createAtomWithHook(false, "IsBreakPoint");
 
 // Main Page
 // Functions