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

[Update/Refactor] Config Page: VR: Change triangle icon from symbol to svg.

Browse Source 
Refactor the common component and function.
This commit is contained in:
Sakamoto Shiina
2025-06-02 13:33:00 +09:00
parent 09865d02be
commit 2ea0a3b529
2 changed files with 105 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,10 @@ import {
import RedoSvg from "@images/redo.svg?react"; import RedoSvg from "@images/redo.svg?react";
import SquareSvg from "@images/square.svg?react";
import TriangleSvg from "@images/triangle.svg?react";
import { randomIntMinMax } from "@utils";
export const Vr = () => { export const Vr = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true); const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
@@ -188,15 +192,9 @@ const PageSwitcherContainer = (props) => {
}; };
/** export const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs }) => {
* PositionControls:
* - x_pos, y_pos, z_pos 用のスライダーとリセットボタン、上下ボタンを表示
* - useVariableControl を使って、is_max/is_min/variable_display/countUp/countDown を共通化
*/
const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs }) => {
const { t } = useTranslation(); const { t } = useTranslation();
// x_pos 用のフック呼び出し
const { const {
variable_display: x_variable_display, variable_display: x_variable_display,
is_max: is_max_position_x, is_max: is_max_position_x,
@@ -205,7 +203,6 @@ const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_confi
countDown: countDownPositionX, countDown: countDownPositionX,
} = useVariableControl("x_pos", settings, onchangeFunction, ui_configs); } = useVariableControl("x_pos", settings, onchangeFunction, ui_configs);
// y_pos 用のフック呼び出し
const { const {
variable_display: y_variable_display, variable_display: y_variable_display,
is_max: is_max_position_y, is_max: is_max_position_y,
@@ -214,7 +211,6 @@ const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_confi
countDown: countDownPositionY, countDown: countDownPositionY,
} = useVariableControl("y_pos", settings, onchangeFunction, ui_configs); } = useVariableControl("y_pos", settings, onchangeFunction, ui_configs);
// z_pos 用のフック呼び出し
const { const {
variable_display: z_variable_display, variable_display: z_variable_display,
is_max: is_max_position_z, is_max: is_max_position_z,
@@ -223,19 +219,8 @@ const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_confi
countDown: countDownPositionZ, countDown: countDownPositionZ,
} = useVariableControl("z_pos", settings, onchangeFunction, ui_configs); } = useVariableControl("z_pos", settings, onchangeFunction, ui_configs);
// 各ボタンの className を生成
const x_position_button_up_classname = clsx(styles.x_position_button_up, { [styles.is_disabled]: is_max_position_x });
const x_position_button_down_classname = clsx(styles.x_position_button_down, { [styles.is_disabled]: is_min_position_x });
const y_position_button_up_classname = clsx(styles.y_position_button_up, { [styles.is_disabled]: is_max_position_y });
const y_position_button_down_classname = clsx(styles.y_position_button_down, { [styles.is_disabled]: is_min_position_y });
const z_position_button_up_classname = clsx(styles.z_position_button_up, { [styles.is_disabled]: is_max_position_z });
const z_position_button_down_classname = clsx(styles.z_position_button_down, { [styles.is_disabled]: is_min_position_z });
return ( return (
<div className={styles.position_controls}> <div className={styles.position_controls}>
{/* X Position */}
<div className={styles.position_wrapper}> <div className={styles.position_wrapper}>
<p className={clsx(styles.slider_label, styles.x_position_label)}> <p className={clsx(styles.slider_label, styles.x_position_label)}>
{t("config_page.vr.x_position")} {t("config_page.vr.x_position")}
@@ -252,13 +237,15 @@ const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_confi
valueLabelDisplay={x_variable_display} valueLabelDisplay={x_variable_display}
valueLabelDisplayLocation="top" valueLabelDisplayLocation="top"
/> />
<div className={styles.x_position_button_wrapper}> <AdjustButtonContainer
<div className={x_position_button_up_classname} onClick={countUpPositionX}>△</div> wrapper_class_name={styles.x_position_button_wrapper}
<div className={x_position_button_down_classname} onClick={countDownPositionX}>▽</div> is_max={is_max_position_x}
</div> is_min={is_min_position_x}
countUp={countUpPositionX}
countDown={countDownPositionX}
/>
</div> </div>
{/* Y Position */}
<div className={styles.position_wrapper}> <div className={styles.position_wrapper}>
<p className={clsx(styles.slider_label, styles.y_position_label)}> <p className={clsx(styles.slider_label, styles.y_position_label)}>
{t("config_page.vr.y_position")} {t("config_page.vr.y_position")}
@@ -276,13 +263,15 @@ const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_confi
valueLabelDisplay={y_variable_display} valueLabelDisplay={y_variable_display}
valueLabelDisplayLocation="right" valueLabelDisplayLocation="right"
/> />
<div className={styles.y_position_button_wrapper}> <AdjustButtonContainer
<div className={y_position_button_up_classname} onClick={countUpPositionY}>△</div> wrapper_class_name={styles.y_position_button_wrapper}
<div className={y_position_button_down_classname} onClick={countDownPositionY}>▽</div> is_max={is_max_position_y}
</div> is_min={is_min_position_y}
countUp={countUpPositionY}
countDown={countDownPositionY}
/>
</div> </div>
{/* Z Position */}
<div className={styles.position_wrapper}> <div className={styles.position_wrapper}>
<p className={clsx(styles.slider_label, styles.z_position_label)}> <p className={clsx(styles.slider_label, styles.z_position_label)}>
{t("config_page.vr.z_position")} {t("config_page.vr.z_position")}
@@ -300,16 +289,19 @@ const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_confi
valueLabelDisplay={z_variable_display} valueLabelDisplay={z_variable_display}
valueLabelDisplayLocation="left" valueLabelDisplayLocation="left"
/> />
<div className={styles.z_position_button_wrapper}> <AdjustButtonContainer
<div className={z_position_button_up_classname} onClick={countUpPositionZ}>△</div> wrapper_class_name={styles.z_position_button_wrapper}
<div className={z_position_button_down_classname} onClick={countDownPositionZ}>▽</div> is_max={is_max_position_z}
</div> is_min={is_min_position_z}
countUp={countUpPositionZ}
countDown={countDownPositionZ}
/>
</div> </div>
</div> </div>
); );
}; };
const RotationControls = ({settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs}) => { export const RotationControls = ({ settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { const {
@@ -336,15 +328,6 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, ui_config
countDown: countDownRotationZ, countDown: countDownRotationZ,
} = useVariableControl("z_rotation", settings, onchangeFunction, ui_configs); } = useVariableControl("z_rotation", settings, onchangeFunction, ui_configs);
const x_rotation_button_up_classname = clsx(styles.x_rotation_button_up, { [styles.is_disabled]: is_min_rotation_x });
const x_rotation_button_down_classname = clsx(styles.x_rotation_button_down, { [styles.is_disabled]: is_max_rotation_x });
const y_rotation_button_up_classname = clsx(styles.y_rotation_button_up, { [styles.is_disabled]: is_max_rotation_y });
const y_rotation_button_down_classname = clsx(styles.y_rotation_button_down, { [styles.is_disabled]: is_min_rotation_y });
const z_rotation_button_up_classname = clsx(styles.z_rotation_button_up, { [styles.is_disabled]: is_max_rotation_z });
const z_rotation_button_down_classname = clsx(styles.z_rotation_button_down, { [styles.is_disabled]: is_min_rotation_z });
return ( return (
<div className={styles.rotation_controls}> <div className={styles.rotation_controls}>
<div className={styles.rotation_wrapper}> <div className={styles.rotation_wrapper}>
@@ -365,11 +348,15 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, ui_config
valueLabelDisplay={x_variable_display} valueLabelDisplay={x_variable_display}
valueLabelDisplayLocation="right" valueLabelDisplayLocation="right"
/> />
<div className={styles.x_rotation_button_wrapper}> <AdjustButtonContainer
<div className={x_rotation_button_up_classname} onClick={countDownRotationX}>△</div> wrapper_class_name={styles.x_rotation_button_wrapper}
<div className={x_rotation_button_down_classname} onClick={countUpRotationX}>▽</div> is_max={is_min_rotation_x}
</div> is_min={is_max_rotation_x}
countUp={countDownRotationX}
countDown={countUpRotationX}
/>
</div> </div>
<div className={styles.rotation_wrapper}> <div className={styles.rotation_wrapper}>
<p className={clsx(styles.slider_label, styles.y_rotation_label)}> <p className={clsx(styles.slider_label, styles.y_rotation_label)}>
{t("config_page.vr.y_rotation")} {t("config_page.vr.y_rotation")}
@@ -386,11 +373,15 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, ui_config
valueLabelDisplay={y_variable_display} valueLabelDisplay={y_variable_display}
valueLabelDisplayLocation="top" valueLabelDisplayLocation="top"
/> />
<div className={styles.y_rotation_button_wrapper}> <AdjustButtonContainer
<div className={y_rotation_button_up_classname} onClick={countUpRotationY}>△</div> wrapper_class_name={styles.y_rotation_button_wrapper}
<div className={y_rotation_button_down_classname} onClick={countDownRotationY}>▽</div> is_max={is_max_rotation_y}
</div> is_min={is_min_rotation_y}
countUp={countUpRotationY}
countDown={countDownRotationY}
/>
</div> </div>
<div className={styles.rotation_wrapper}> <div className={styles.rotation_wrapper}>
<p className={clsx(styles.slider_label, styles.z_rotation_label)}> <p className={clsx(styles.slider_label, styles.z_rotation_label)}>
{t("config_page.vr.z_rotation")} {t("config_page.vr.z_rotation")}
@@ -408,10 +399,43 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, ui_config
valueLabelDisplay={z_variable_display} valueLabelDisplay={z_variable_display}
valueLabelDisplayLocation="left" valueLabelDisplayLocation="left"
/> />
<div className={styles.z_rotation_button_wrapper}> <AdjustButtonContainer
<div className={z_rotation_button_up_classname} onClick={countUpRotationZ}>△</div> wrapper_class_name={styles.z_rotation_button_wrapper}
<div className={z_rotation_button_down_classname} onClick={countDownRotationZ}>▽</div> is_max={is_max_rotation_z}
</div> is_min={is_min_rotation_z}
countUp={countUpRotationZ}
countDown={countDownRotationZ}
/>
</div>
</div>
);
};
const AdjustButtonContainer = ({ wrapper_class_name, is_max, is_min, countUp, countDown }) => {
return (
<div className={wrapper_class_name}>
<div
className={clsx(
styles.button_wrapper,
{
[styles.is_disabled]: is_max,
[styles.up]: true,
}
)}
onClick={countUp}
>
<TriangleSvg className={styles.adjust_button_triangle_svg} />
</div>
<div
className={clsx(
styles.button_wrapper,
{
[styles.is_disabled]: is_min,
}
)}
onClick={countDown}
>
<TriangleSvg className={styles.adjust_button_triangle_svg} />
</div> </div>
</div> </div>
); );
@@ -511,10 +535,6 @@ const ResetButton = ({onClickFunction}) => {
); );
}; };
import SquareSvg from "@images/square.svg?react";
import TriangleSvg from "@images/triangle.svg?react";
import { randomIntMinMax } from "@utils";
const SendSampleTextToggleButton = () => { const SendSampleTextToggleButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { sendTextToOverlay } = useSendTextToOverlay(); const { sendTextToOverlay } = useSendTextToOverlay();
@@ -575,7 +595,6 @@ const useVariableControl = (key, settings, onchangeFunction, ui_configs) => {
const timerRef = useRef(); const timerRef = useRef();
// アンマウント時にタイマーをクリアする
useEffect(() => { useEffect(() => {
return () => { return () => {
clearTimeout(timerRef.current); clearTimeout(timerRef.current);

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

@@ -184,7 +184,9 @@
&.is_disabled { &.is_disabled {
pointer-events: none; pointer-events: none;
background-color: var(--dark_875_color); background-color: var(--dark_875_color);
color: var(--dark_600_color); & .adjust_button_triangle_svg {
color: var(--dark_800_color);
}
} }
} }
@@ -198,29 +200,39 @@
transform: translate(-50%) rotate($rotate); transform: translate(-50%) rotate($rotate);
} }
.button_wrapper {
@extend %variable-button;
&.up .adjust_button_triangle_svg {
transform: rotate(0deg);
}
&:not(.up) .adjust_button_triangle_svg {
transform: rotate(180deg);
}
&.is_disabled {
pointer-events: none;
color: var(--dark_875_color);
}
}
.adjust_button_triangle_svg {
width: 1.8rem;
color: var(--dark_400_color);
}
.y_position_button_wrapper { .y_position_button_wrapper {
@include variable-button-wrapper(top, 30%, left, -26%); @include variable-button-wrapper(top, 30%, left, -26%);
} }
.y_position_button_up,
.y_position_button_down {
@extend %variable-button;
}
.x_position_button_wrapper { .x_position_button_wrapper {
@include variable-button-wrapper(bottom, -38%, left, 46%, 90deg); @include variable-button-wrapper(bottom, -38%, left, 46%, 90deg);
} }
.x_position_button_up,
.x_position_button_down {
@extend %variable-button;
}
.z_position_button_wrapper { .z_position_button_wrapper {
@include variable-button-wrapper(bottom, 26%, right, -4%, 45deg); @include variable-button-wrapper(bottom, 26%, right, -4%, 45deg);
} }
.z_position_button_up,
.z_position_button_down {
@extend %variable-button;
}
@@ -280,27 +292,14 @@
.x_rotation_button_wrapper { .x_rotation_button_wrapper {
@include variable-button-wrapper(top, 30%, left, -26%); @include variable-button-wrapper(top, 30%, left, -26%);
} }
.x_rotation_button_up,
.x_rotation_button_down {
@extend %variable-button;
}
.y_rotation_button_wrapper { .y_rotation_button_wrapper {
@include variable-button-wrapper(bottom, -38%, left, 46%, 90deg); @include variable-button-wrapper(bottom, -38%, left, 46%, 90deg);
} }
.y_rotation_button_up,
.y_rotation_button_down {
@extend %variable-button;
}
.z_rotation_button_wrapper { .z_rotation_button_wrapper {
@include variable-button-wrapper(bottom, 50%, right, -60%, -45deg); @include variable-button-wrapper(bottom, 50%, right, -60%, -45deg);
} }
.z_rotation_button_up,
.z_rotation_button_down {
@extend %variable-button;
}