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

[Update/bugfix] Config Page: Device Tab. Adjust design and fix styles.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-16 01:37:43 +09:00
parent 17ecab50f4
commit a439f7e3da
5 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,6 +31,8 @@
.dropdown_selected_text {
font-size: 1.4rem;
padding-right: 2.8rem;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown_content_wrapper {

4
src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss
View File

@@ -2,16 +2,20 @@
display: flex;
flex-direction: column;
gap: 0.2rem;
flex-shrink: 0;
}
.label {
font-size: 1.6rem;
font-weight: 400;
color: var(--dark_basic_text_color);
white-space: nowrap;
}
.desc {
font-size: 1.4rem;
font-weight: 300;
color: var(--dark_500_color);
max-width: 38rem;
overflow-wrap: break-word;
}

1
src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss
View File

@@ -15,6 +15,7 @@
cursor: pointer;
padding: 2rem;
height: 100%;
flex-shrink: 0;
&.is_loading {
pointer-events: none;
}

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

@@ -77,30 +77,32 @@ const Mic_Container = () => {
</div>
<div className={styles.device_dropdown_wrapper}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_host")}</p>
<DropdownMenu
dropdown_id="mic_host"
selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction_host}
openListFunction={getMicHostList}
state={currentSelectedMicHost.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
/>
</div>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_host")}</p>
<DropdownMenu
dropdown_id="mic_host"
selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction_host}
openListFunction={getMicHostList}
state={currentSelectedMicHost.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
/>
</div>
<div className={styles.device_dropdown_wrapper}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu
dropdown_id="mic_device"
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction_device}
openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state}
is_disabled={is_disabled_selector}
/>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu
dropdown_id="mic_device"
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction_device}
openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>
</div>
</div>
@@ -172,7 +174,7 @@ const Speaker_Container = () => {
/>
</div>
<div className={styles.device_dropdown_wrapper}>
<div className={styles.device_dropdown}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu
dropdown_id="speaker_device"

18
src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
View File

@@ -2,11 +2,11 @@
display: flex;
flex-direction: column;
border-bottom: solid 0.1rem var(--dark_800_color);
padding-bottom: 2rem;
padding-bottom: 1rem;
}
.speaker_container {
padding-top: 2rem;
padding-top: 0rem;
}
.device_container {
@@ -38,6 +38,7 @@
width: 100%;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.threshold_section {
@@ -54,7 +55,10 @@
.device_contents {
display: flex;
gap: 2.8rem;
width: 100%;
justify-content: end;
padding-left: 2rem;
gap: 2rem;
}
.device_auto_select_wrapper {
@@ -64,10 +68,17 @@
}
.device_dropdown_wrapper {
display: flex;
flex-direction: row;
gap: 2.8rem;
}
.device_dropdown {
display: flex;
flex-direction: column;
gap: 0.6rem;
white-space: nowrap;
max-width: 24rem;
&.is_disabled {
pointer-events: none;
}
@@ -77,4 +88,5 @@
padding-left: 0.2rem;
font-size: 1.4rem;
color: var(--dark_500_color);
white-space: nowrap;
}