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

Merge branch 'ui' into for_webui

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-28 10:16:54 +09:00
parent 0f226da217 833fa24545
commit da406b55b4
10 changed files with 45 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src-ui/app/config_page/setting_section/SettingSection.jsx
View File

@@ -2,14 +2,22 @@ import { useRef, useLayoutEffect, useEffect } from "react";
import styles from "./SettingSection.module.scss";
import { SettingBox } from "./setting_box/SettingBox";
import { store } from "@store";
import { store, useStore_SelectedConfigTabId } from "@store";
import { useSettingBoxScrollPosition } from "@logics_configs";
export const SettingSection = () => {
const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
const { resetScrollPosition } = useSettingBoxScrollPosition();
const scrollContainerRef = useRef(null);
useLayoutEffect(() => {
store.setting_box_scroll_container = scrollContainerRef;
}, []);
useEffect(() => {
resetScrollPosition();
}, [currentSelectedConfigTabId.data]);
return (
<div ref={scrollContainerRef} className={styles.scroll_container}>
<div className={styles.container}>

5
src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
View File

@@ -4,6 +4,7 @@
justify-content: center;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.entry_section_wrapper {
@@ -72,13 +73,14 @@
}
.open_webpage_button {
padding: 0.6rem 3.2rem;
padding: 0.6rem 2.8rem;
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
border-radius: 0.4rem;
cursor: pointer;
flex-shrink: 0;
&:hover {
background-color: var(--dark_825_color);
}
@@ -95,4 +97,5 @@
.external_link_svg {
color: var(--dark_500_color);
width: 1.6rem;
flex-shrink: 0;
}

1
src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
View File

@@ -10,6 +10,7 @@
font-weight: 400;
color: var(--dark_basic_text_color);
white-space: nowrap;
width: max-content;
}
.desc {

2
src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
View File

@@ -5,7 +5,7 @@ import { clsx } from "clsx";
export const Slider = (props) => {
return (
<div className={clsx(styles.container, props.className)}>
<div className={clsx(styles.container, props.className, {[styles.no_padding]: props.no_padding || props.is_break_point})}>
<MUI_Slider
aria-label="Default"
valueLabelDisplay="auto"

4
src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
View File

@@ -4,4 +4,8 @@
align-items: center;
justify-content: center;
width: 100%;
padding-left: 4rem;
&.no_padding {
padding-left: 0;
}
}

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

@@ -54,7 +54,7 @@ const CommonContainer = ({ Component, ...props }) => {
return (
<LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
<Component {...props} />
<Component {...props} is_break_point={currentIsBreakPoint.data} />
</LabeledContainer>
);
};

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

@@ -4,7 +4,7 @@
justify-content: space-between;
align-items: center;
padding: 2rem;
gap: 10rem;
gap: 2rem;
&.flex_column {
flex-direction: column;
}

10
src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
View File

@@ -199,6 +199,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
</p>
<Slider
className={styles.x_position_slider}
no_padding={true}
variable={settings.x_pos}
step={ui_configs.x_pos.step}
min={ui_configs.x_pos.min}
@@ -213,6 +214,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
</p>
<Slider
className={styles.y_position_slider}
no_padding={true}
variable={settings.y_pos}
step={ui_configs.y_pos.step}
min={ui_configs.y_pos.min}
@@ -228,6 +230,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
</p>
<Slider
className={styles.z_position_slider}
no_padding={true}
variable={settings.z_pos}
step={ui_configs.z_pos.step}
min={ui_configs.z_pos.min}
@@ -252,6 +255,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
</p>
<Slider
className={styles.x_rotation_slider}
no_padding={true}
variable={-settings.x_rotation}
valueLabelFormat={settings.x_rotation}
step={5}
@@ -268,6 +272,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
</p>
<Slider
className={styles.y_rotation_slider}
no_padding={true}
variable={settings.y_rotation}
step={5}
min={-180}
@@ -282,6 +287,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
</p>
<Slider
className={styles.z_rotation_slider}
no_padding={true}
variable={settings.z_rotation}
step={5}
min={-180}
@@ -308,6 +314,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
</p>
<Slider
className={clsx(styles.other_controls_slider, styles.opacity_slider)}
no_padding={true}
variable={settings.opacity * 100}
valueLabelFormat={`${ui_variable_opacity}%`}
step={5}
@@ -322,6 +329,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
</p>
<Slider
className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
no_padding={true}
variable={settings.ui_scaling * 100}
valueLabelFormat={`${ui_variable_ui_scaling}%`}
step={ui_configs.ui_scaling.step}
@@ -334,6 +342,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
<p className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</p>
<Slider
className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
no_padding={true}
variable={settings.display_duration}
valueLabelFormat={`${settings.display_duration} second(s)`}
step={1}
@@ -346,6 +355,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
<p className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</p>
<Slider
className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
no_padding={true}
variable={settings.fadeout_duration}
valueLabelFormat={`${settings.fadeout_duration} second(s)`}
step={1}

10
src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
View File

@@ -256,18 +256,20 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
justify-content: space-between;
width: 100%;
position: relative;
}
.other_controls_slider {
margin-left: 18rem;
// margin-left: 18rem;
// width: 60%;
}
.other_controls_slider_label {
position: absolute;
// position: absolute;
font-size: 1.6rem;
width: 100%;
flex-shrink: 0;
width: 30%;
}
.common_container {

10
src-ui/logics/configs/useSettingBoxScrollPosition.js
View File

@@ -9,19 +9,25 @@ export const useSettingBoxScrollPosition = () => {
}
};
const restoreScrollPosition = () => {
if (store.setting_box_scroll_container.current) {
updateSettingBoxScrollPosition((pre) => {
store.setting_box_scroll_container.current.scrollTop = pre.data;
return pre.data;
})
}
};
const resetScrollPosition = () => {
if (store.setting_box_scroll_container.current) {
store.setting_box_scroll_container.current.scrollTop = 0;
updateSettingBoxScrollPosition(0);
}
}
return {
saveScrollPosition,
restoreScrollPosition,
resetScrollPosition,
currentSettingBoxScrollPosition,
updateSettingBoxScrollPosition,
};