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

[Update] Config Page: Adjust slider component and deepL auth key component width.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-28 07:31:16 +09:00
parent 9e057d4395
commit 833fa24545
8 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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; justify-content: center;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
flex-shrink: 0;
} }
.entry_section_wrapper { .entry_section_wrapper {
@@ -72,13 +73,14 @@
} }
.open_webpage_button { .open_webpage_button {
padding: 0.6rem 3.2rem; padding: 0.6rem 2.8rem;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 0.4rem; border-radius: 0.4rem;
cursor: pointer; cursor: pointer;
flex-shrink: 0;
&:hover { &:hover {
background-color: var(--dark_825_color); background-color: var(--dark_825_color);
} }
@@ -95,4 +97,5 @@
.external_link_svg { .external_link_svg {
color: var(--dark_500_color); color: var(--dark_500_color);
width: 1.6rem; 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; font-weight: 400;
color: var(--dark_basic_text_color); color: var(--dark_basic_text_color);
white-space: nowrap; white-space: nowrap;
width: max-content;
} }
.desc { .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) => { export const Slider = (props) => {
return ( 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 <MUI_Slider
aria-label="Default" aria-label="Default"
valueLabelDisplay="auto" 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; align-items: center;
justify-content: center; justify-content: center;
width: 100%; 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 ( return (
<LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}> <LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
<Component {...props} /> <Component {...props} is_break_point={currentIsBreakPoint.data} />
</LabeledContainer> </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; justify-content: space-between;
align-items: center; align-items: center;
padding: 2rem; padding: 2rem;
gap: 10rem; gap: 2rem;
&.flex_column { &.flex_column {
flex-direction: 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> </p>
<Slider <Slider
className={styles.x_position_slider} className={styles.x_position_slider}
no_padding={true}
variable={settings.x_pos} variable={settings.x_pos}
step={ui_configs.x_pos.step} step={ui_configs.x_pos.step}
min={ui_configs.x_pos.min} min={ui_configs.x_pos.min}
@@ -213,6 +214,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
</p> </p>
<Slider <Slider
className={styles.y_position_slider} className={styles.y_position_slider}
no_padding={true}
variable={settings.y_pos} variable={settings.y_pos}
step={ui_configs.y_pos.step} step={ui_configs.y_pos.step}
min={ui_configs.y_pos.min} min={ui_configs.y_pos.min}
@@ -228,6 +230,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
</p> </p>
<Slider <Slider
className={styles.z_position_slider} className={styles.z_position_slider}
no_padding={true}
variable={settings.z_pos} variable={settings.z_pos}
step={ui_configs.z_pos.step} step={ui_configs.z_pos.step}
min={ui_configs.z_pos.min} min={ui_configs.z_pos.min}
@@ -252,6 +255,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
</p> </p>
<Slider <Slider
className={styles.x_rotation_slider} className={styles.x_rotation_slider}
no_padding={true}
variable={-settings.x_rotation} variable={-settings.x_rotation}
valueLabelFormat={settings.x_rotation} valueLabelFormat={settings.x_rotation}
step={5} step={5}
@@ -268,6 +272,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
</p> </p>
<Slider <Slider
className={styles.y_rotation_slider} className={styles.y_rotation_slider}
no_padding={true}
variable={settings.y_rotation} variable={settings.y_rotation}
step={5} step={5}
min={-180} min={-180}
@@ -282,6 +287,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
</p> </p>
<Slider <Slider
className={styles.z_rotation_slider} className={styles.z_rotation_slider}
no_padding={true}
variable={settings.z_rotation} variable={settings.z_rotation}
step={5} step={5}
min={-180} min={-180}
@@ -308,6 +314,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
</p> </p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.opacity_slider)} className={clsx(styles.other_controls_slider, styles.opacity_slider)}
no_padding={true}
variable={settings.opacity * 100} variable={settings.opacity * 100}
valueLabelFormat={`${ui_variable_opacity}%`} valueLabelFormat={`${ui_variable_opacity}%`}
step={5} step={5}
@@ -322,6 +329,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
</p> </p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)} className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
no_padding={true}
variable={settings.ui_scaling * 100} variable={settings.ui_scaling * 100}
valueLabelFormat={`${ui_variable_ui_scaling}%`} valueLabelFormat={`${ui_variable_ui_scaling}%`}
step={ui_configs.ui_scaling.step} 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> <p className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.display_duration_slider)} className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
no_padding={true}
variable={settings.display_duration} variable={settings.display_duration}
valueLabelFormat={`${settings.display_duration} second(s)`} valueLabelFormat={`${settings.display_duration} second(s)`}
step={1} 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> <p className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)} className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
no_padding={true}
variable={settings.fadeout_duration} variable={settings.fadeout_duration}
valueLabelFormat={`${settings.fadeout_duration} second(s)`} valueLabelFormat={`${settings.fadeout_duration} second(s)`}
step={1} step={1}

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

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