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

[Update] Config Page: Device Tab. dropdown component. Add onMouseLeave Function. The content's text size up.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-12 00:27:27 +09:00
parent c422a13df3
commit 166759075a
3 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
View File

@@ -32,7 +32,6 @@
position: absolute; position: absolute;
top: 100%; // Position it below the toggle button top: 100%; // Position it below the toggle button
right: 0; right: 0;
width: 100%;
min-width: 20rem; min-width: 20rem;
z-index: 1; z-index: 1;
&.is_opened { &.is_opened {
@@ -46,11 +45,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.1rem; gap: 0.1rem;
white-space: nowrap;
} }
.value_button { .value_button {
background-color: var(--dark_875_color); background-color: var(--dark_875_color);
padding: 0.8rem; padding: 1.2rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--dark_800_color); background-color: var(--dark_800_color);
@@ -61,7 +61,7 @@
} }
.value_text { .value_text {
font-size: 1.2rem; font-size: 1.4rem;
} }
.loader { .loader {

2
src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
View File

@@ -16,7 +16,7 @@ import { ActionButton } from "./action_button/ActionButton";
import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter"; import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
const useOnMouseLeaveDropdownMenu = () => { export const useOnMouseLeaveDropdownMenu = () => {
const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu(); const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
const onMouseLeaveFunction = () => { const onMouseLeaveFunction = () => {

9
src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
View File

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
import styles from "./Device.module.scss"; import styles from "./Device.module.scss";
import { import {
ThresholdContainer, ThresholdContainer,
useOnMouseLeaveDropdownMenu,
} from "../components/useSettingBox"; } from "../components/useSettingBox";
export const Device = () => { export const Device = () => {
return ( return (
@@ -25,6 +26,8 @@ const Mic_Container = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost(); const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
const { currentMicHostList, getMicHostList } = useMicHostList(); const { currentMicHostList, getMicHostList } = useMicHostList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const selectFunction_host = (selected_data) => { const selectFunction_host = (selected_data) => {
setSelectedMicHost(selected_data.selected_id); setSelectedMicHost(selected_data.selected_id);
@@ -40,7 +43,7 @@ const Mic_Container = () => {
return ( return (
<div className={styles.mic_container}> <div className={styles.mic_container}>
<div className={styles.device_container}> <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={t("config_page.mic_host_device.label")} /> <LabelComponent label={t("config_page.mic_host_device.label")} />
<div className={styles.device_contents}> <div className={styles.device_contents}>
<div className={styles.device_dropdown_wrapper}> <div className={styles.device_dropdown_wrapper}>
@@ -88,15 +91,15 @@ const Speaker_Container = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList(); const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const selectFunction = (selected_data) => { const selectFunction = (selected_data) => {
setSelectedSpeakerDevice(selected_data.selected_id); setSelectedSpeakerDevice(selected_data.selected_id);
}; };
return ( return (
<div className={styles.speaker_container}> <div className={styles.speaker_container}>
<div className={styles.device_container}> <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={t("config_page.speaker_device.label")} /> <LabelComponent label={t("config_page.speaker_device.label")} />
<div className={styles.device_contents}> <div className={styles.device_contents}>
<div className={styles.device_dropdown_wrapper}> <div className={styles.device_dropdown_wrapper}>