every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-06 10:27:37 +09:00
parent 451391bcdb
commit f4aea309cf
5 changed files with 95 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
import styles from "./Templates.module.scss";
import { useStore_IsOpenedDropdownMenu } from "@store";
import clsx from "clsx";
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}>
<LabelComponent label={props.label} desc={props.desc} />
<Slider {...props}/>
</div>
<LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
<Component {...props} />
</LabeledContainer>
);
};
export const SliderContainer = (props) => (
<CommonContainer Component={Slider} {...props} />
);
export const CheckboxContainer = (props) => {
return (
<div className={styles.container}>
export const CheckboxContainer = (props) => (
<CommonContainer Component={Checkbox} {...props} add_break_point={false} />
);
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) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<SwitchBox {...props}/>
</div>
);
};
export const ActionButtonContainer = (props) => (
<CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
);
export const EntryContainer = (props) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<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}>
export const WordFilterContainer = (props) => (
<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} />
<OpenWebpage_DeeplAuthKey />
</div>
<DeeplAuthKey {...props}/>
<WordFilterListToggleComponent />
</div>
);
};
<div className={styles.word_filter_section}>
<WordFilter {...props} />
</div>
</div>
);
export const ActionButtonContainer = (props) => {
return (
<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>
);
};
export const DownloadModelsContainer = (props) => (
<CommonContainer Component={DownloadModels} {...props} />
);

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

@@ -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 {

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

@@ -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) => {

21
src-ui/logics/common/useWindow.js
View File

@@ -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,
};
};

1
src-ui/store.js
View File

@@ -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