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 { .dropdown_selected_text {
font-size: 1.4rem; font-size: 1.4rem;
padding-right: 2.8rem; padding-right: 2.8rem;
overflow: hidden;
text-overflow: ellipsis;
} }
.dropdown_content_wrapper { .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; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.2rem;
flex-shrink: 0;
} }
.label { .label {
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 400; font-weight: 400;
color: var(--dark_basic_text_color); color: var(--dark_basic_text_color);
white-space: nowrap;
} }
.desc { .desc {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 300; font-weight: 300;
color: var(--dark_500_color); 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; cursor: pointer;
padding: 2rem; padding: 2rem;
height: 100%; height: 100%;
flex-shrink: 0;
&.is_loading { &.is_loading {
pointer-events: none; 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>
<div className={styles.device_dropdown_wrapper}> <div className={styles.device_dropdown_wrapper}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_host")}</p> <div className={styles.device_dropdown}>
<DropdownMenu <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_host")}</p>
dropdown_id="mic_host" <DropdownMenu
selected_id={currentSelectedMicHost.data} dropdown_id="mic_host"
list={currentMicHostList.data} selected_id={currentSelectedMicHost.data}
selectFunction={selectFunction_host} list={currentMicHostList.data}
openListFunction={getMicHostList} selectFunction={selectFunction_host}
state={currentSelectedMicHost.state} openListFunction={getMicHostList}
style={{ maxWidth: "20rem", minWidth: "10rem" }} state={currentSelectedMicHost.state}
is_disabled={is_disabled_selector} style={{ maxWidth: "20rem", minWidth: "10rem" }}
/> is_disabled={is_disabled_selector}
</div> />
</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> <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu <DropdownMenu
dropdown_id="mic_device" dropdown_id="mic_device"
selected_id={currentSelectedMicDevice.data} selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data} list={currentMicDeviceList.data}
selectFunction={selectFunction_device} selectFunction={selectFunction_device}
openListFunction={getMicDeviceList} openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state} state={currentSelectedMicDevice.state}
is_disabled={is_disabled_selector} is_disabled={is_disabled_selector}
/> />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -172,7 +174,7 @@ const Speaker_Container = () => {
/> />
</div> </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> <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu <DropdownMenu
dropdown_id="speaker_device" 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; display: flex;
flex-direction: column; flex-direction: column;
border-bottom: solid 0.1rem var(--dark_800_color); border-bottom: solid 0.1rem var(--dark_800_color);
padding-bottom: 2rem; padding-bottom: 1rem;
} }
.speaker_container { .speaker_container {
padding-top: 2rem; padding-top: 0rem;
} }
.device_container { .device_container {
@@ -38,6 +38,7 @@
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0;
} }
.threshold_section { .threshold_section {
@@ -54,7 +55,10 @@
.device_contents { .device_contents {
display: flex; display: flex;
gap: 2.8rem; width: 100%;
justify-content: end;
padding-left: 2rem;
gap: 2rem;
} }
.device_auto_select_wrapper { .device_auto_select_wrapper {
@@ -64,10 +68,17 @@
} }
.device_dropdown_wrapper { .device_dropdown_wrapper {
display: flex;
flex-direction: row;
gap: 2.8rem;
}
.device_dropdown {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.6rem; gap: 0.6rem;
white-space: nowrap; white-space: nowrap;
max-width: 24rem;
&.is_disabled { &.is_disabled {
pointer-events: none; pointer-events: none;
} }
@@ -77,4 +88,5 @@
padding-left: 0.2rem; padding-left: 0.2rem;
font-size: 1.4rem; font-size: 1.4rem;
color: var(--dark_500_color); color: var(--dark_500_color);
white-space: nowrap;
} }