From 3c769021240f782c43155466e767559c3d21677a Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 30 Oct 2024 16:01:37 +0900 Subject: [PATCH] [Update] Quick Settings: Add Overlay settings. --- src-ui/app/App.jsx | 2 ++ .../setting_box/SettingBox.jsx | 16 +++++---- .../setting_section/setting_box/index.js | 7 ++++ .../RightSideComponents.jsx | 24 +++++++++++-- .../RightSideComponents.module.scss | 1 + .../_buttons/OpenQuickSettingButton.jsx | 16 +++++++++ .../OpenQuickSettingButton.module.scss | 34 +++++++++++++++++++ .../app/modal_controller/ModalController.jsx | 15 ++++++++ .../ModalController.module.scss | 29 ++++++++++++++++ src-ui/logics/configs/index.js | 1 + .../configs/vr/useIsEnabledOverlaySmallLog.js | 28 +++++++++++++++ src-ui/store.js | 2 ++ vite.config.js | 2 ++ 13 files changed, 168 insertions(+), 9 deletions(-) create mode 100644 src-ui/app/config_page/setting_section/setting_box/index.js create mode 100644 src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx create mode 100644 src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss create mode 100644 src-ui/app/modal_controller/ModalController.jsx create mode 100644 src-ui/app/modal_controller/ModalController.module.scss create mode 100644 src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 8ed648e8..b9b59e6f 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -3,6 +3,7 @@ import { useStartPython } from "@logics/useStartPython"; import { WindowTitleBar } from "./window_title_bar/WindowTitleBar"; import { MainPage } from "./main_page/MainPage"; import { ConfigPage } from "./config_page/ConfigPage"; +import { ModalController } from "./modal_controller/ModalController"; import styles from "./App.module.scss"; export const App = () => { @@ -21,6 +22,7 @@ export const App = () => {
+
); diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx index adec9373..fac72e8a 100644 --- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx @@ -1,12 +1,14 @@ import { useStore_SelectedConfigTabId } from "@store"; -import { Device } from "./device/Device"; -import { Appearance } from "./appearance/Appearance"; -import { Transcription } from "./transcription/Transcription"; -import { Others } from "./others/Others"; -import { AdvancedSettings } from "./advanced_settings/AdvancedSettings"; -import { Vr } from "./vr/Vr"; -// import { AboutVrct } from "./about_vrct/AboutVrct"; +import { + Device, + Appearance, + Transcription, + Others, + AdvancedSettings, + Vr, + // AboutVrct, +} from "@setting_box"; export const SettingBox = () => { const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId(); diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js new file mode 100644 index 00000000..1d8953fd --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/index.js @@ -0,0 +1,7 @@ +export { Device } from "./device/Device"; +export { Appearance } from "./appearance/Appearance"; +export { Transcription } from "./transcription/Transcription"; +export { Others } from "./others/Others"; +export { AdvancedSettings } from "./advanced_settings/AdvancedSettings"; +export { Vr } from "./vr/Vr"; +// export { AboutVrct } from "./about_vrct/AboutVrct"; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx index 4ceb31f9..fc05b10a 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx @@ -1,12 +1,15 @@ import styles from "./RightSideComponents.module.scss"; - import HelpSvg from "@images/help.svg?react"; +import { useStore_OpenedQuickSetting } from "@store"; +import { useIsEnabledOverlaySmallLog } from "@logics_configs"; +import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton"; + export const RightSideComponents = () => { return (

VRC mic mute sync

-

Overlay(VR)

+ {
); +}; + +const OpenOverlayQuickSetting = () => { + const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); + + const onClickFunction = () => { + updateOpenedQuickSetting("overlay"); + }; + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss index d3c77d6d..80f64219 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss @@ -3,6 +3,7 @@ flex-direction: row; align-items: center; gap: 1rem; + height: 100%; } .help_and_info_button { diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx new file mode 100644 index 00000000..c3151df3 --- /dev/null +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx @@ -0,0 +1,16 @@ +import clsx from "clsx"; +import styles from "./OpenQuickSettingButton.module.scss"; + +export const OpenQuickSettingButton = (props) => { + return ( +
+
+

{props.label}

+ {props.variable === true + ?

Enabled

+ :

Disabled

+ } +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss new file mode 100644 index 00000000..2b542209 --- /dev/null +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss @@ -0,0 +1,34 @@ +.container { + // height: 100%; +} + +.button_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.2rem; + padding: 0.6rem 0.4rem; + border-radius: 0.2rem; + cursor: pointer; + &:hover { + background-color: var(--dark_800_color); + } + &:active { + background-color: var(--dark_900_color); + } +} + +.button_label { + font-size: 1.2rem; +} + +.button_indicator_label { + font-size: 1rem; + &.disabled { + color: var(--dark_600_color); + } + &.enabled { + color: var(--primary_300_color); + } +} \ No newline at end of file diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx new file mode 100644 index 00000000..4d2e4e54 --- /dev/null +++ b/src-ui/app/modal_controller/ModalController.jsx @@ -0,0 +1,15 @@ +import styles from "./ModalController.module.scss"; +import { useStore_OpenedQuickSetting } from "@store"; +import { Vr } from "@setting_box"; +export const ModalController = () => { + const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + if (currentOpenedQuickSetting.data === "") return null; + return ( +
+
updateOpenedQuickSetting("")}>
+
+ +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/modal_controller/ModalController.module.scss b/src-ui/app/modal_controller/ModalController.module.scss new file mode 100644 index 00000000..914fedef --- /dev/null +++ b/src-ui/app/modal_controller/ModalController.module.scss @@ -0,0 +1,29 @@ +.container { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.bg_onclick_close_area { + position: absolute; + width: 100%; + height: 100%; + background-color: (#ffffff22); + backdrop-filter: blur(0.2rem); +} + +.wrapper { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + overflow-y: auto; + background-color: var(--dark_875_color); + width: 60%; + height: 96%; + padding: 2rem; + border-radius: 0.6rem; +} \ No newline at end of file diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index d5cdffab..e290d5d1 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -31,6 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout"; export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords"; +export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog"; export { useOverlaySettings } from "./vr/useOverlaySettings"; export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings"; diff --git a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js new file mode 100644 index 00000000..cf46ce4e --- /dev/null +++ b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js @@ -0,0 +1,28 @@ +import { useStore_IsEnabledOverlaySmallLog } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useIsEnabledOverlaySmallLog = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog(); + + const getIsEnabledOverlaySmallLog = () => { + // pendingIsEnabledOverlaySmallLog(); + asyncStdoutToPython("/get/data/overlay_settings"); + }; + + const toggleIsEnabledOverlaySmallLog = () => { + pendingIsEnabledOverlaySmallLog(); + if (currentIsEnabledOverlaySmallLog.data) { + asyncStdoutToPython("/set/disable/overlay_small_log"); + } else { + asyncStdoutToPython("/set/enable/overlay_small_log"); + } + }; + + return { + currentIsEnabledOverlaySmallLog, + getIsEnabledOverlaySmallLog, + updateIsEnabledOverlaySmallLog, + toggleIsEnabledOverlaySmallLog, + }; +}; \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index 856a24cb..2e775960 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -103,6 +103,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma transcription_send: false, transcription_receive: false, }, "MainFunctionsStateMemory"); +export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting"); // Main Page // Functions @@ -204,6 +205,7 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove display_duration: 5, fadeout_duration: 2, }, "OverlaySmallLogSettings"); +export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog"); // Others export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox"); diff --git a/vite.config.js b/vite.config.js index 86f28f71..93057bc4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -43,6 +43,8 @@ export default defineConfig(async () => ({ "@logics_common": path.resolve(__dirname, "src-ui/logics/common"), "@logics_main": path.resolve(__dirname, "src-ui/logics/main"), "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"), + + "@setting_box": path.resolve(__dirname, "src-ui/app/config_page/setting_section/setting_box/index.js"), }, },