diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 73a7ec06..80809c7d 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -31,6 +31,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; import { useUiLanguage } from "@logics_configs/useUiLanguage"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { useLanguageSettings } from "@logics_main/useLanguageSettings"; import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList"; @@ -39,6 +40,7 @@ const StartPythonFacadeComponent = () => { const hasRunRef = useRef(false); const main_page = getCurrent(); + const { getIsMainPageCompactMode } = useIsMainPageCompactMode(); const { getSoftwareVersion } = useSoftwareVersion(); const { getEnableAutoMicSelect } = useEnableAutoMicSelect(); const { getEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect(); @@ -67,6 +69,7 @@ const StartPythonFacadeComponent = () => { if (!hasRunRef.current) { asyncStartPython().then((result) => { getUiLanguage(); + getIsMainPageCompactMode(); getSoftwareVersion(); @@ -108,7 +111,7 @@ const UiLanguageController = () => { useEffect(() => { i18n.changeLanguage(currentUiLanguage.data); - }, [currentUiLanguage]); + }, [currentUiLanguage.data]); return null; }; diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx index f1c80973..312363e2 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx @@ -29,7 +29,7 @@ export const DropdownMenu = (props) => { }); const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], { - [styles.is_loading]: (props.state === "pending") ? true : false, + [styles.is_pending]: (props.state === "pending") ? true : false, [styles.is_disabled]: props.is_disabled, }); diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss index 1a5c88af..2dc94d7c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss @@ -17,7 +17,7 @@ &:active { background-color: var(--dark_975_color); } - &.is_loading { + &.is_pending { pointer-events: none; } &.is_disabled { diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx index 8217b5eb..ba19dfd9 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx @@ -6,11 +6,11 @@ export const Switchbox = (props) => { const [is_hovered, setIsHovered] = useState(false); const [is_mouse_down, setIsMouseDown] = useState(false); - const is_loading = (props.variable.state === "pending"); + const is_pending = (props.variable.state === "pending"); const getClassNames = (base_class) => clsx(base_class, { [styles.is_active]: (props.variable.data === true), - [styles.is_loading]: is_loading, + [styles.is_pending]: is_pending, [styles.is_hovered]: is_hovered, [styles.is_mouse_down]: is_mouse_down, }); @@ -36,7 +36,7 @@ export const Switchbox = (props) => { >
- {is_loading && } + {is_pending && }
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss index 701f7371..8f76c0b6 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss @@ -16,7 +16,7 @@ padding: 2rem; height: 100%; flex-shrink: 0; - &.is_loading { + &.is_pending { pointer-events: none; } } diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx index 19ffd483..e26d1e57 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx @@ -5,7 +5,7 @@ import clsx from "clsx"; export const VolumeCheckButton = React.memo((props) => { const getClassNames = (baseClass) => clsx(baseClass, { [styles.is_active]: (props.isChecking?.data === true), - [styles.is_loading]: (props.isChecking.state === "pending"), + [styles.is_pending]: (props.isChecking.state === "pending"), }); const toggleFunction = () => { diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss index 622323fb..302ab71e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss @@ -17,7 +17,7 @@ background-color: var(--primary_550_color); } } - &.is_loading { + &.is_pending { background-color: var(--dark_850_color); pointer-events: none; .button_svg, .button_text { diff --git a/src-ui/app/main_page/main_section/MainSection.jsx b/src-ui/app/main_page/main_section/MainSection.jsx index fc6d5021..abb83218 100644 --- a/src-ui/app/main_page/main_section/MainSection.jsx +++ b/src-ui/app/main_page/main_section/MainSection.jsx @@ -20,7 +20,7 @@ export const MainSection = () => { import { useLanguageSettings } from "@logics_main/useLanguageSettings"; const HandleLanguageSelector = () => { - const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector(); + const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector(); const { currentSelectedYourLanguages, setSelectedYourLanguages, @@ -29,11 +29,27 @@ const HandleLanguageSelector = () => { } = useLanguageSettings(); if (currentIsOpenedLanguageSelector.data.your_language === true) { - const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload); - return ; + const onclickFunction_YourLanguage = (payload) => { + updateIsOpenedLanguageSelector({ your_language: false, target_language: false }); + setSelectedYourLanguages(payload); + }; + return ( + + ); } else if (currentIsOpenedLanguageSelector.data.target_language === true) { - const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload); - return ; + const onclickFunction_TargetLanguage = (payload) => { + updateIsOpenedLanguageSelector({ your_language: false, target_language: false }); + setSelectedTargetLanguages(payload); + }; + return ( + + ); } else { return null; } diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss index 66bd5c92..6814b090 100644 --- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss +++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss @@ -62,9 +62,11 @@ .message_main { color: var(--dark_basic_text_color); font-size: 1.4rem; + user-select: text; } .message_second { color: var(--dark_450_color); font-size: 1rem; + user-select: text; } \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx index f275e3c2..83dfdd12 100644 --- a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx +++ b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx @@ -1,22 +1,18 @@ import clsx from "clsx"; import styles from "./SidebarCompactModeButton.module.scss"; -import { useStore_IsMainPageCompactMode } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import ArrowLeftSvg from "@images/arrow_left.svg?react"; export const SidebarCompactModeButton = () => { - const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); - - const toggleCompactMode = () => { - updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data); - }; + const { toggleIsMainPageCompactMode, currentIsMainPageCompactMode } = useIsMainPageCompactMode(); const class_names = clsx(styles["arrow_left_svg"], { [styles["reverse"]]: currentIsMainPageCompactMode.data }); return ( -
+
); diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx index ac607a6a..16119c06 100644 --- a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx +++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx @@ -1,7 +1,8 @@ import clsx from "clsx"; import styles from "./SidebarSection.module.scss"; -import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store"; +import { useStore_IsOpenedLanguageSelector } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { Logo } from "./logo/Logo"; import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch"; @@ -9,7 +10,7 @@ import { LanguageSettings } from "./language_settings/LanguageSettings"; import { OpenSettings } from "./open_settings/OpenSettings"; export const SidebarSection = () => { - const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + const { currentIsMainPageCompactMode } = useIsMainPageCompactMode(); const container_class_name = clsx(styles.container, { [styles.is_compact_mode]: currentIsMainPageCompactMode.data }); diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx index 8174cea4..3a4d374d 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx @@ -5,10 +5,12 @@ import { useTranslation } from "react-i18next"; import styles from "./LanguageSwapButton.module.scss"; import NarrowArrowDownSvg from "@images/narrow_arrow_down.svg?react"; +import { useLanguageSettings } from "@logics_main/useLanguageSettings"; export const LanguageSwapButton = () => { const [isHovered, setIsHovered] = useState(false); const { t } = useTranslation(); + const { runLanguageSwap } = useLanguageSettings(); const label = isHovered ? t("main_page.swap_button_label") @@ -27,6 +29,7 @@ export const LanguageSwapButton = () => { className={styles.swap_button_wrapper} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} + onClick={runLanguageSwap} >

{label}

diff --git a/src-ui/app/main_page/sidebar_section/logo/Logo.jsx b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx index 6b94eb75..9518c007 100644 --- a/src-ui/app/main_page/sidebar_section/logo/Logo.jsx +++ b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx @@ -11,10 +11,10 @@ export const Logo = () => { import vrct_logo from "@images/vrct_logo_for_dark_mode.png"; import chato_img from "@images/chato_white.png"; -import { useStore_IsMainPageCompactMode } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; export const LogoBox = () => { - const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + const { currentIsMainPageCompactMode } = useIsMainPageCompactMode(); if (currentIsMainPageCompactMode.data === true) { return VRCT logo chato; } else { diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx index 7e92a574..45eae936 100644 --- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx +++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx @@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react"; import MicSvg from "@images/mic.svg?react"; import HeadphonesSvg from "@images/headphones.svg?react"; import ForegroundSvg from "@images/foreground.svg?react"; -import { useStore_IsMainPageCompactMode } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { useMainFunction } from "@logics_main/useMainFunction"; @@ -74,12 +74,12 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState const [is_hovered, setIsHovered] = useState(false); const [is_mouse_down, setIsMouseDown] = useState(false); - const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + const { currentIsMainPageCompactMode } = useIsMainPageCompactMode(); const getClassNames = (baseClass) => clsx(baseClass, { [styles.is_compact_mode]: currentIsMainPageCompactMode.data, [styles.is_active]: (currentState.data === true), - [styles.is_loading]: (currentState.state === "pending"), + [styles.is_pending]: (currentState.state === "pending"), [styles.is_hovered]: is_hovered, [styles.is_mouse_down]: is_mouse_down, }); diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss index bb0b65f2..dd0df0d8 100644 --- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss +++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss @@ -23,7 +23,7 @@ &.is_compact_mode { padding: 1.5rem; } - &.is_loading { + &.is_pending { pointer-events: none; } } @@ -36,23 +36,23 @@ } $basic_label_color: var(--dark_basic_text_color); -$loading_label_color: var(--dark_500_color); +$pending_label_color: var(--dark_500_color); .switch_label { font-size: 1.4rem; color: $basic_label_color; &.is_compact_mode { display: none; } - &.is_loading { - color: $loading_label_color; + &.is_pending { + color: $pending_label_color; } } .switch_svg { width: 1.8rem; color: $basic_label_color; - &.is_loading { - color: $loading_label_color; + &.is_pending { + color: $pending_label_color; } &:not(.is_compact_mode) { width: 1.6rem; diff --git a/src-ui/logics/main/useIsMainPageCompactMode.js b/src-ui/logics/main/useIsMainPageCompactMode.js new file mode 100644 index 00000000..8cf40ddc --- /dev/null +++ b/src-ui/logics/main/useIsMainPageCompactMode.js @@ -0,0 +1,26 @@ +import { useStore_IsMainPageCompactMode } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useIsMainPageCompactMode = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentIsMainPageCompactMode, updateIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + + const getIsMainPageCompactMode = () => { + asyncStdoutToPython("/get/main_window_sidebar_compact_mode"); + }; + + const toggleIsMainPageCompactMode = () => { + if (currentIsMainPageCompactMode.data) { + asyncStdoutToPython("/set/disable_main_window_sidebar_compact_mode"); + } else { + asyncStdoutToPython("/set/enable_main_window_sidebar_compact_mode"); + } + }; + + return { + currentIsMainPageCompactMode, + getIsMainPageCompactMode, + toggleIsMainPageCompactMode, + updateIsMainPageCompactMode, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/main/useLanguageSettings.js b/src-ui/logics/main/useLanguageSettings.js index 003275fc..fdd3b668 100644 --- a/src-ui/logics/main/useLanguageSettings.js +++ b/src-ui/logics/main/useLanguageSettings.js @@ -104,6 +104,12 @@ export const useLanguageSettings = () => { asyncStdoutToPython("/set/data/selected_translator_engines", send_obj); }; + const runLanguageSwap = () => { + pendingSelectedYourLanguages(); + pendingSelectedTargetLanguages(); + asyncStdoutToPython("/run/swap_your_language_and_target_language"); + }; + return { currentSelectedPresetTabNumber, @@ -134,5 +140,7 @@ export const useLanguageSettings = () => { getSelectedTranslationEngines, updateSelectedTranslationEngines, setSelectedTranslationEngines, + + runLanguageSwap, }; }; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 5eb3b574..d41b188d 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -5,8 +5,10 @@ import { useMainFunction } from "@logics_main/useMainFunction"; import { useMessage } from "@logics_common/useMessage"; import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList"; import { useLanguageSettings } from "@logics_main/useLanguageSettings"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { useVolume } from "@logics_common/useVolume"; + import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion"; import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect"; import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect"; @@ -24,6 +26,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy import { useUiLanguage } from "@logics_configs/useUiLanguage"; export const useReceiveRoutes = () => { + const { updateIsMainPageCompactMode } = useIsMainPageCompactMode(); const { updateTranslationStatus, updateTranscriptionSendStatus, @@ -66,6 +69,10 @@ export const useReceiveRoutes = () => { const routes = { // Main Page + // Page Controls + "/get/main_window_sidebar_compact_mode": updateIsMainPageCompactMode, + "/set/enable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode, + "/set/disable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode, // Main Functions "/set/enable/translation": updateTranslationStatus, "/set/disable/translation": updateTranslationStatus, @@ -97,6 +104,11 @@ export const useReceiveRoutes = () => { "/get/data/selected_translation_engines": updateSelectedTranslationEngines, "/set/data/selected_translator_engines": updateSelectedTranslationEngines, + "/run/swap_your_language_and_target_language": (payload) => { + updateSelectedYourLanguages(payload.your); + updateSelectedTargetLanguages(payload.target); + }, + // Language Selector "/get/data/selectable_language_list": updateSelectableLanguageList, diff --git a/src-ui/store.js b/src-ui/store.js index 5173dc62..56e1f9ea 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -16,20 +16,20 @@ export const store = { log_box_ref: null, }; -const generatePropertyNames = (base_ame) => ({ - error: `error${base_ame}`, - pending: `pending${base_ame}`, - current: `current${base_ame}`, - update: `update${base_ame}`, - updatePart: `updatePart${base_ame}`, - async_update: `asyncUpdate${base_ame}`, - add: `add${base_ame}`, - async_add: `asyncAdd${base_ame}`, +const generatePropertyNames = (base_name) => ({ + error: `error${base_name}`, + pending: `pending${base_name}`, + current: `current${base_name}`, + update: `update${base_name}`, + updatePart: `updatePart${base_name}`, + async_update: `asyncUpdate${base_name}`, + add: `add${base_name}`, + async_add: `asyncAdd${base_name}`, }); -const createAtomWithHook_WIP = (initialValue, base_ame, options) => { - const property_names = generatePropertyNames(base_ame); +const createAtomWithHook = (initialValue, base_name, options) => { + const property_names = generatePropertyNames(base_name); const atomInstance = atom({ state: (options?.is_state_ok) ? "ok" : "pending", data: initialValue, @@ -99,76 +99,76 @@ const createAtomWithHook_WIP = (initialValue, base_ame, options) => { -export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook_WIP("-", "SoftwareVersion"); +export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion"); -export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook_WIP(false, "TranslationStatus", {is_state_ok: true}); -export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook_WIP(false, "TranscriptionSendStatus", {is_state_ok: true}); -export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook_WIP(false, "TranscriptionReceiveStatus", {is_state_ok: true}); -export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook_WIP(false, "ForegroundStatus", {is_state_ok: true}); +export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook(false, "TranslationStatus", {is_state_ok: true}); +export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook(false, "TranscriptionSendStatus", {is_state_ok: true}); +export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook(false, "TranscriptionReceiveStatus", {is_state_ok: true}); +export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook(false, "ForegroundStatus", {is_state_ok: true}); -export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook_WIP(generateTestData(20), "MessageLogs"); -export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook_WIP(false, "IsMainPageCompactMode"); +export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs"); +export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode"); -export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook_WIP( +export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook( { your_language: false, target_language: false }, "IsOpenedLanguageSelector" ); -export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook_WIP([], "SelectableLanguageList"); +export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList"); -export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook_WIP("", "SelectedPresetTabNumber"); -export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook_WIP(false, "EnableMultiTranslation"); -export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook_WIP({}, "SelectedYourLanguages"); -export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook_WIP({}, "SelectedTargetLanguages"); +export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook("", "SelectedPresetTabNumber"); +export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook(false, "EnableMultiTranslation"); +export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook({}, "SelectedYourLanguages"); +export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook({}, "SelectedTargetLanguages"); -export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook_WIP(translator_status, "TranslationEngines"); -export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook_WIP({}, "SelectedTranslationEngines"); +export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook(translator_status, "TranslationEngines"); +export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook({}, "SelectedTranslationEngines"); -export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook_WIP(false, "IsOpenedConfigPage"); -export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook_WIP("device", "SelectedConfigTabId"); -export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook_WIP("", "IsOpenedDropdownMenu"); +export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage"); +export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId"); +export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu"); // Config Page -export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook_WIP(true, "EnableAutoMicSelect"); -export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook_WIP(true, "EnableAutoSpeakerSelect"); +export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook(true, "EnableAutoMicSelect"); +export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook(true, "EnableAutoSpeakerSelect"); -export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook_WIP({}, "MicHostList"); -export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicHost"); -export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook_WIP({}, "MicDeviceList"); -export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicDevice"); +export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook({}, "MicHostList"); +export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook("Nothing Selected", "SelectedMicHost"); +export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook({}, "MicDeviceList"); +export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook("Nothing Selected", "SelectedMicDevice"); -export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook_WIP({}, "SpeakerDeviceList"); -export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedSpeakerDevice"); +export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook({}, "SpeakerDeviceList"); +export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook("Nothing Selected", "SelectedSpeakerDevice"); -export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook_WIP(0, "MicVolume"); -export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook_WIP(0, "SpeakerVolume"); +export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook(0, "MicVolume"); +export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook(0, "SpeakerVolume"); -export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook_WIP(false, "MicThresholdCheckStatus", {is_state_ok: true}); -export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook_WIP(false, "SpeakerThresholdCheckStatus", {is_state_ok: true}); +export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook(false, "MicThresholdCheckStatus", {is_state_ok: true}); +export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook(false, "SpeakerThresholdCheckStatus", {is_state_ok: true}); -export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook_WIP(0, "MicThreshold"); -export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook_WIP(0, "SpeakerThreshold"); +export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold"); +export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold"); -export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticMicThreshold"); -export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticSpeakerThreshold"); +export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook(false, "EnableAutomaticMicThreshold"); +export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook(false, "EnableAutomaticSpeakerThreshold"); // Appearance -export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook_WIP("en", "UiLanguage"); +export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage"); -export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook_WIP(false, "IsOpenedWordFilterList"); -export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook_WIP(word_filter_list, "WordFilterList"); +export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList"); +export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList"); // Others -export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook_WIP(true, "EnableAutoClearMessageBox"); -export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook_WIP("show", "SendMessageButtonType"); +export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook(true, "EnableAutoClearMessageBox"); +export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType"); -export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook_WIP(false, "IsOpenedTranslatorSelector"); +export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector"); -export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook_WIP(0, "VrctPosterIndex"); -export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook_WIP(0, "PosterShowcaseWorldPageIndex"); \ No newline at end of file +export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex"); +export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex"); \ No newline at end of file diff --git a/src-ui/utils/mixins.scss b/src-ui/utils/mixins.scss index 72420f7f..4e563960 100644 --- a/src-ui/utils/mixins.scss +++ b/src-ui/utils/mixins.scss @@ -76,7 +76,7 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2); background: $toggle_control_color; transition: left $toggle_control_speed $toggle_control_ease; } - &.is_loading:after{ + &.is_pending:after{ background-color: var(--dark_600_color); } &.is_hovered {