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

[Update] Config Window: Setting Box: DropdownMenu: Adjust design. add arrow icon that can toggle and border-radius.

Browse Source 
Also change the open dropdown menu function to the toggle function.
This commit is contained in:
Sakamoto Shiina
2024-07-30 08:36:06 +09:00
parent 6bd5eba707
commit 14e033b2e9
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
View File

@@ -1,14 +1,18 @@
import styles from "./DropdownMenu.module.scss"; import styles from "./DropdownMenu.module.scss";
import clsx from "clsx"; import clsx from "clsx";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { useIsOpenedDropdownMenu } from "@store"; import { useIsOpenedDropdownMenu } from "@store";
export const DropdownMenu = (props) => { export const DropdownMenu = (props) => {
const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu(); const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const openDropdownMenu = () => { const toggleDropdownMenu = () => {
updateIsOpenedDropdownMenu(props.dropdown_id); if (currentIsOpenedDropdownMenu === props.dropdown_id) {
updateIsOpenedDropdownMenu("");
} else {
updateIsOpenedDropdownMenu(props.dropdown_id);
}
}; };
const selectValue = (key) => { const selectValue = (key) => {
@@ -27,17 +31,20 @@ export const DropdownMenu = (props) => {
[styles["is_loading"]]: (props.state === "loading") ? true : false [styles["is_loading"]]: (props.state === "loading") ? true : false
}); });
const arrow_class_names = clsx(styles["arrow_left_svg"], {
[styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
});
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={dropdown_toggle_button_class_name} onClick={openDropdownMenu}> <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}>
{(props.state === "loading") {(props.state === "loading")
? <p className={styles.dropdown_selected_text}>Loading...</p> ? <p className={styles.dropdown_selected_text}>Loading...</p>
: <p className={styles.dropdown_selected_text}>{props.list[props.selected_id]}</p> : <p className={styles.dropdown_selected_text}>{props.list[props.selected_id]}</p>
} }
{(props.state === "loading") {(props.state === "loading")
? <span className={styles.loader}></span> ? <span className={styles.loader}></span>
: null : <ArrowLeftSvg className={arrow_class_names} />
} }
</div> </div>
<div className={dropdown_content_wrapper_class_name}> <div className={dropdown_content_wrapper_class_name}>

16
src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
View File

@@ -8,7 +8,9 @@
position: relative; position: relative;
background-color: var(--dark_925_color); background-color: var(--dark_925_color);
min-width: 20rem; min-width: 20rem;
padding: 0.6rem 0.8rem; padding: 0.6rem 1rem;
cursor: pointer;
border-radius: 0.4rem;
&:hover { &:hover {
background-color: var(--dark_850_color); background-color: var(--dark_850_color);
} }
@@ -47,6 +49,7 @@
.value_button { .value_button {
background-color: var(--dark_875_color); background-color: var(--dark_875_color);
padding: 0.8rem; padding: 0.8rem;
cursor: pointer;
&:hover { &:hover {
background-color: var(--dark_800_color); background-color: var(--dark_800_color);
} }
@@ -62,3 +65,14 @@
.loader { .loader {
@include loader(2rem, 0.2rem, right, 0); @include loader(2rem, 0.2rem, right, 0);
} }
.arrow_left_svg {
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%) rotate(-90deg);
width: 1.4rem;
&.is_opened {
transform: translate(-50%, -50%) rotate(90deg);
}
}