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

[bugfix] Config Page: Appearance tab. Fix the deign where Ui language section that was not putted selected mark by adding name attribute to radio element.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-10-16 23:03:59 +09:00
parent e201cee24a
commit 3e88604fd7
4 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
View File

@@ -9,16 +9,18 @@ export const RadioButton = (props) => {
? <> ? <>
{ props.checked_variable.state === "pending" && <span className={styles.loader}></span> } { props.checked_variable.state === "pending" && <span className={styles.loader}></span> }
<input <input
className={styles.radio_button_input}
type="radio" type="radio"
name="radio" name={props.name}
value={option.radio_button_id} value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)} onChange={() => props.selectFunction(option.radio_button_id)}
checked checked
/> />
</> </>
: <input : <input
className={styles.radio_button_input}
type="radio" type="radio"
name="radio" name={props.name}
value={option.radio_button_id} value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)} onChange={() => props.selectFunction(option.radio_button_id)}
/> />

8
src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
View File

@@ -23,12 +23,12 @@
} }
} }
input[type="radio"] { .radio_button_input {
appearance: none; appearance: none;
margin: 0; margin: 0;
width: 2.4rem; width: 2rem;
height: 2.4rem; height: 2rem;
border: 0.3rem solid var(--dark_600_color); border: 0.2rem solid var(--dark_600_color);
border-radius: 50%; border-radius: 50%;
transition: border-color .1s ease, border-width .1s ease; transition: border-color .1s ease, border-width .1s ease;
cursor: inherit; cursor: inherit;

4
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -63,8 +63,9 @@ const UiLanguageContainer = () => {
{Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => ( {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
<label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}> <label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
<input <input
className={styles.radio_button_input}
type="radio" type="radio"
name="radio" name="ui_language"
value={key} value={key}
onChange={() => setUiLanguage(key)} onChange={() => setUiLanguage(key)}
checked={currentUiLanguage.data === key} checked={currentUiLanguage.data === key}
@@ -168,6 +169,7 @@ const SendMessageButtonTypeContainer = () => {
<RadioButtonContainer <RadioButtonContainer
label={t("config_page.send_message_button_type.label")} label={t("config_page.send_message_button_type.label")}
selectFunction={setSendMessageButtonType} selectFunction={setSendMessageButtonType}
name="send_message_button_type"
options={[ options={[
{ radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") }, { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
{ radio_button_id: "show", label: t("config_page.send_message_button_type.show") }, { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },

10
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss
View File

@@ -41,18 +41,18 @@
} }
} }
input[type="radio"] { .radio_button_input {
appearance: none; appearance: none;
margin: 0; margin: 0;
width: 1.6rem; width: 2rem;
height: 1.6rem; height: 2rem;
border: 0.2rem solid var(--dark_600_color); border: 0.3rem solid var(--dark_600_color);
border-radius: 50%; border-radius: 50%;
transition: border-color .1s ease, border-width .1s ease; transition: border-color .1s ease, border-width .1s ease;
cursor: inherit; cursor: inherit;
&:checked { &:checked {
border-color: var(--primary_400_color); border-color: var(--primary_400_color);
border-width: 0.4rem; border-width: 0.6rem;
} }
} }