+
From b12908f01f6d33c79273461367995472f8c2af50 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 12 Sep 2024 15:43:16 +0900
Subject: [PATCH 7/8] [Update] Config Page: Device Tab. Add dynamic energy
threshold functionally and sync slider and entry component.
---
src-ui/app/App.jsx | 6 +-
.../components/switchbox/Switchbox.jsx | 25 +++---
.../switchbox/Switchbox.module.scss | 7 ++
.../ThresholdComponent.jsx | 46 +++++++++--
.../slider_and_meter/SliderAndMeter.jsx | 49 +++++++-----
.../threshold_entry/ThresholdEntry.jsx | 13 ++-
.../ThresholdEntry.module.scss | 5 ++
.../setting_box/components/useSettingBox.jsx | 26 +++---
.../components/useSettingBox.module.scss | 34 ++++----
.../setting_box/device/Device.jsx | 80 +++++++++++++++----
.../setting_box/device/Device.module.scss | 25 ++++++
src-ui/logics/configs/useMicThreshold.js | 22 ++++-
src-ui/logics/configs/useSpeakerThreshold.js | 22 ++++-
src-ui/logics/useReceiveRoutes.js | 12 ++-
src-ui/store.js | 2 +
src-ui/utils/mixins.scss | 3 +
16 files changed, 282 insertions(+), 95 deletions(-)
diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 8cd46ab6..c085683f 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -35,8 +35,8 @@ const StartPythonFacadeComponent = () => {
const { getSelectedMicHost } = useSelectedMicHost();
const { getSelectedMicDevice } = useSelectedMicDevice();
const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
- const { getMicThreshold } = useMicThreshold();
- const { getSpeakerThreshold } = useSpeakerThreshold();
+ const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold();
+ const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { getSendMessageButtonType } = useSendMessageButtonType();
@@ -52,6 +52,8 @@ const StartPythonFacadeComponent = () => {
getMicThreshold();
getSpeakerThreshold();
+ getEnableAutomaticMicThreshold();
+ getEnableAutomaticSpeakerThreshold();
getEnableAutoClearMessageBox();
getSendMessageButtonType();
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 f8b16f1e..f9fc0977 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
@@ -3,14 +3,14 @@ import { useState } from "react";
import styles from "./Switchbox.module.scss";
export const Switchbox = (props) => {
-
- const [is_turned_on, setIsTurnedOn] = useState(false);
const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false);
- const getClassNames = (baseClass) => clsx(baseClass, {
- [styles.is_active]: (is_turned_on === true),
- // [styles.is_loading]: (currentState.state === "loading"),
+ const is_loading = (props.variable.state === "loading");
+
+ const getClassNames = (base_class) => clsx(base_class, {
+ [styles.is_active]: (props.variable.data === true),
+ [styles.is_loading]: is_loading,
[styles.is_hovered]: is_hovered,
[styles.is_mouse_down]: is_mouse_down,
});
@@ -21,21 +21,22 @@ export const Switchbox = (props) => {
const onMouseUp = () => setIsMouseDown(false);
const toggleFunction = () => {
- setIsTurnedOn(!is_turned_on);
+ props.toggleFunction();
};
return (
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 1f7f7c83..2c69fe8f 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
@@ -15,6 +15,9 @@
cursor: pointer;
padding: 2rem;
height: 100%;
+ &.is_loading {
+ pointer-events: none;
+ }
}
.toggle_control {
@@ -22,4 +25,8 @@
display: flex;
justify-content: center;
align-items: center;
+}
+
+.loader {
+ @include loader(2rem, 0.2rem, right, -4rem);
}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
index f10c114e..5c5d07e2 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
@@ -17,14 +17,26 @@ export const ThresholdComponent = (props) => {
import MicSvg from "@images/mic.svg?react";
import { useMicThreshold } from "@logics_configs/useMicThreshold";
const MicComponent = (props) => {
- const { currentMicThreshold, setMicThreshold } = useMicThreshold();
+ const {
+ currentMicThreshold,
+ setMicThreshold,
+ currentEnableAutomaticMicThreshold,
+ } = useMicThreshold();
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
- const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume();
+ const {
+ volumeCheckStart_Mic,
+ volumeCheckStop_Mic,
+ currentMicThresholdCheckStatus,
+ } = useVolume();
useEffect(() => {
- setUiThreshold(currentMicThreshold);
- }, [currentMicThreshold]);
+ if (currentEnableAutomaticMicThreshold.data === true) {
+ setUiThreshold("Auto");
+ } else {
+ setUiThreshold(currentMicThreshold);
+ }
+ }, [currentMicThreshold, currentEnableAutomaticMicThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);
@@ -33,6 +45,8 @@ const MicComponent = (props) => {
setMicThreshold(payload_threshold);
};
+ const is_disable = currentEnableAutomaticMicThreshold.data === true ? true : false;
+
return (
<>
{
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction}
+ is_disable={is_disable}
/>
);
@@ -60,13 +75,25 @@ const MicComponent = (props) => {
import HeadphonesSvg from "@images/headphones.svg?react";
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const SpeakerComponent = (props) => {
- const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
+ const {
+ currentSpeakerThreshold,
+ setSpeakerThreshold,
+ currentEnableAutomaticSpeakerThreshold,
+ } = useSpeakerThreshold();
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
- const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume();
+ const {
+ volumeCheckStart_Speaker,
+ volumeCheckStop_Speaker,
+ currentSpeakerThresholdCheckStatus,
+ } = useVolume();
useEffect(() => {
- setUiThreshold(currentSpeakerThreshold);
- }, [currentSpeakerThreshold]);
+ if (currentEnableAutomaticSpeakerThreshold.data === true) {
+ setUiThreshold("Auto");
+ } else {
+ setUiThreshold(currentSpeakerThreshold);
+ }
+ }, [currentSpeakerThreshold, currentEnableAutomaticSpeakerThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);
@@ -75,6 +102,8 @@ const SpeakerComponent = (props) => {
setSpeakerThreshold(payload_threshold);
};
+ const is_disable = currentEnableAutomaticSpeakerThreshold.data === true ? true : false;
+
return (
<>
{
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction}
+ is_disable={is_disable}
/>
);
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
index bb3e2dcf..6fbe0c1b 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
import styles from "./SliderAndMeter.module.scss";
import {
useStore_MicVolume,
@@ -18,48 +17,56 @@ export const SliderAndMeter = (props) => {
);
};
-
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
const ThresholdVolumeMeter_Mic = (props) => {
const { currentMicVolume } = useStore_MicVolume();
+ const { currentEnableAutomaticMicThreshold } = useMicThreshold();
+
const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
return (
<>
- props.setUiThresholdFunction(e.target.value)}
- onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
- className={styles.threshold_slider}
- />
+ {currentEnableAutomaticMicThreshold.data === false &&
+ props.setUiThresholdFunction(e.target.value)}
+ onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
+ className={styles.threshold_slider}
+ />
+ }
);
};
-
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const ThresholdVolumeMeter_Speaker = (props) => {
const { currentSpeakerVolume } = useStore_SpeakerVolume();
+ const { currentEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
+
const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
return (
<>
- props.setUiThresholdFunction(e.target.value)}
- onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
- className={styles.threshold_slider}
- />
+ {currentEnableAutomaticSpeakerThreshold.data === false &&
+ props.setUiThresholdFunction(e.target.value)}
+ onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
+ className={styles.threshold_slider}
+ />
+ }
);
};
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx
index 9b5b5e62..cb7b010c 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
import styles from "./ThresholdEntry.module.scss";
export const ThresholdEntry = (props) => {
@@ -22,9 +23,13 @@ const ThresholdEntry_Mic = (props) => {
}
};
+ const class_names = clsx(styles.entry_input_area, {
+ [styles.is_disable]: props.is_disable
+ });
+
return (
@@ -40,9 +45,13 @@ const ThresholdEntry_Speaker = (props) => {
}
};
+ const class_names = clsx(styles.entry_input_area, {
+ [styles.is_disable]: props.is_disable
+ });
+
return (
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss
index 2f6a2522..d2378d03 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss
@@ -15,4 +15,9 @@
height: 100%;
font-size: 1.4rem;
resize: none;
+ color: var(--dark_basic_text_color);
+ &.is_disable {
+ color: var(--dark_500_color);
+ pointer-events: none;
+ }
}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
index ad536482..5d6f0982 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
@@ -38,19 +38,19 @@ export const DropdownMenuContainer = (props) => {
};
-export const ThresholdContainer = (props) => {
- return (
-
- );
-};
+// export const ThresholdContainer = (props) => {
+// return (
+//
+//
+//
+//
+//
+//
+//
+//
+//
@@ -73,13 +89,20 @@ const Mic_Container = () => {
);
@@ -87,16 +110,34 @@ const Mic_Container = () => {
import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+
const Speaker_Container = () => {
const { t } = useTranslation();
const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+ const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const selectFunction = (selected_data) => {
setSelectedSpeakerDevice(selected_data.selected_id);
};
+ const getLabels = () => {
+ if (currentEnableAutomaticSpeakerThreshold.data === true) {
+ return {
+ label: t("config_page.speaker_dynamic_energy_threshold.label_for_automatic"),
+ desc: t("config_page.speaker_dynamic_energy_threshold.desc_for_automatic"),
+ };
+ } else {
+ return {
+ label: t("config_page.speaker_dynamic_energy_threshold.label_for_manual"),
+ desc: t("config_page.speaker_dynamic_energy_threshold.desc_for_manual"),
+ };
+ }
+
+ };
+
return (
@@ -116,13 +157,20 @@ const Speaker_Container = () => {
);
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
index 92155b7b..1e2f9117 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -22,6 +22,31 @@
padding: 2rem;
}
+
+
+.threshold_container {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+}
+
+.threshold_switch_section {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.threshold_section {
+ width: 100%;
+}
+
+
+
+
.device_label {
font-size: 1.8rem;
color: var(--dark_basic_text_color);
diff --git a/src-ui/logics/configs/useMicThreshold.js b/src-ui/logics/configs/useMicThreshold.js
index 14b2a91c..0a850f88 100644
--- a/src-ui/logics/configs/useMicThreshold.js
+++ b/src-ui/logics/configs/useMicThreshold.js
@@ -1,9 +1,10 @@
-import { useStore_MicThreshold } from "@store";
+import { useStore_MicThreshold, useStore_EnableAutomaticMicThreshold } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMicThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
+ const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
const getMicThreshold = () => {
asyncStdoutToPython("/config/input_mic_energy_threshold");
@@ -13,10 +14,29 @@ export const useMicThreshold = () => {
asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
};
+ const getEnableAutomaticMicThreshold = () => {
+ updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
+ asyncStdoutToPython("/config/input_mic_dynamic_energy_threshold");
+ };
+
+ const toggleEnableAutomaticMicThreshold = () => {
+ updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
+ if (currentEnableAutomaticMicThreshold.data) {
+ asyncStdoutToPython("/controller/callback_disable_mic_dynamic_energy_threshold");
+ } else {
+ asyncStdoutToPython("/controller/callback_enable_mic_dynamic_energy_threshold");
+ }
+ };
+
return {
currentMicThreshold,
getMicThreshold,
setMicThreshold,
updateMicThreshold,
+
+ currentEnableAutomaticMicThreshold,
+ getEnableAutomaticMicThreshold,
+ toggleEnableAutomaticMicThreshold,
+ updateEnableAutomaticMicThreshold,
};
};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSpeakerThreshold.js b/src-ui/logics/configs/useSpeakerThreshold.js
index f30c4382..74c2307b 100644
--- a/src-ui/logics/configs/useSpeakerThreshold.js
+++ b/src-ui/logics/configs/useSpeakerThreshold.js
@@ -1,9 +1,10 @@
-import { useStore_SpeakerThreshold } from "@store";
+import { useStore_SpeakerThreshold, useStore_EnableAutomaticSpeakerThreshold } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSpeakerThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
+ const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
const getSpeakerThreshold = () => {
asyncStdoutToPython("/config/input_speaker_energy_threshold");
@@ -13,10 +14,29 @@ export const useSpeakerThreshold = () => {
asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
};
+ const getEnableAutomaticSpeakerThreshold = () => {
+ updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
+ asyncStdoutToPython("/config/input_speaker_dynamic_energy_threshold");
+ };
+
+ const toggleEnableAutomaticSpeakerThreshold = () => {
+ updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
+ if (currentEnableAutomaticSpeakerThreshold.data) {
+ asyncStdoutToPython("/controller/callback_disable_speaker_dynamic_energy_threshold");
+ } else {
+ asyncStdoutToPython("/controller/callback_enable_speaker_dynamic_energy_threshold");
+ }
+ };
+
return {
currentSpeakerThreshold,
getSpeakerThreshold,
setSpeakerThreshold,
updateSpeakerThreshold,
+
+ currentEnableAutomaticSpeakerThreshold,
+ getEnableAutomaticSpeakerThreshold,
+ toggleEnableAutomaticSpeakerThreshold,
+ updateEnableAutomaticSpeakerThreshold,
};
};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index badd556b..fe05b0b1 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -36,8 +36,10 @@ export const useReceiveRoutes = () => {
const { updateSelectedMicDevice } = useSelectedMicDevice();
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
- const { updateMicThreshold } = useMicThreshold();
- const { updateSpeakerThreshold } = useSpeakerThreshold();
+
+ const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
+ const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
+
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { updateSendMessageButtonType } = useSendMessageButtonType();
@@ -94,6 +96,12 @@ export const useReceiveRoutes = () => {
"/config/input_speaker_energy_threshold": updateSpeakerThreshold,
"/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
+ "/config/input_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold,
+ "/controller/callback_enable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold,
+ "/controller/callback_disable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold,
+ "/config/input_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
+ "/controller/callback_enable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
+ "/controller/callback_disable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
"/controller/callback_messagebox_send": updateSentMessageLogById,
"/action/transcription_send_mic_message": addSentMessageLog,
diff --git a/src-ui/store.js b/src-ui/store.js
index 9a161d83..9fc296c1 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -133,6 +133,8 @@ export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore
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 } = createAsyncAtomWithHook(false, "EnableAutomaticMicThreshold");
+export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({
before: "",
diff --git a/src-ui/utils/mixins.scss b/src-ui/utils/mixins.scss
index c1776870..72420f7f 100644
--- a/src-ui/utils/mixins.scss
+++ b/src-ui/utils/mixins.scss
@@ -76,6 +76,9 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
background: $toggle_control_color;
transition: left $toggle_control_speed $toggle_control_ease;
}
+ &.is_loading:after{
+ background-color: var(--dark_600_color);
+ }
&.is_hovered {
background-color: var(--dark_725_color);
}
From 6b3ff1f3b2ff0eb1f3c04add6fc5cd72ddf6a551 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 12 Sep 2024 16:50:47 +0900
Subject: [PATCH 8/8] [Update] Main Page: Side bar scroll bar. Adjust scroll
bar color when language selector is opened.(For hiding in appearance)
---
.../app/main_page/sidebar_section/SidebarSection.jsx | 9 +++++++--
.../sidebar_section/SidebarSection.module.scss | 10 ++++++++++
2 files changed, 17 insertions(+), 2 deletions(-)
diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
index f42ab854..64e7c7ba 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
@@ -1,7 +1,7 @@
import clsx from "clsx";
import styles from "./SidebarSection.module.scss";
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store";
import { Logo } from "./logo/Logo";
import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -14,10 +14,15 @@ export const SidebarSection = () => {
[styles.is_compact_mode]: currentIsMainPageCompactMode
});
+ const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+ const scroll_container_class_names = clsx(styles.scroll_container, {
+ [styles.is_opened]: (currentIsOpenedLanguageSelector.your_language === true || currentIsOpenedLanguageSelector.target_language === true)
+ });
+
return (
-
+
{!currentIsMainPageCompactMode && }
diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
index 240b6a16..26096649 100644
--- a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
@@ -33,9 +33,19 @@
border-radius: 0.4rem;
}
+ &.is_opened {
+ &::-webkit-scrollbar-track {
+ background-color: var(--dark_875_color);
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--dark_875_color);
+ }
+ }
+
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--dark_800_color);
}
}
+
}