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> }
<input
className={styles.radio_button_input}
type="radio"
name="radio"
name={props.name}
value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)}
checked
/>
</>
: <input
className={styles.radio_button_input}
type="radio"
name="radio"
name={props.name}
value={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;
margin: 0;
width: 2.4rem;
height: 2.4rem;
border: 0.3rem solid var(--dark_600_color);
width: 2rem;
height: 2rem;
border: 0.2rem solid var(--dark_600_color);
border-radius: 50%;
transition: border-color .1s ease, border-width .1s ease;
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]) => (
<label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
<input
className={styles.radio_button_input}
type="radio"
name="radio"
name="ui_language"
value={key}
onChange={() => setUiLanguage(key)}
checked={currentUiLanguage.data === key}
@@ -168,6 +169,7 @@ const SendMessageButtonTypeContainer = () => {
<RadioButtonContainer
label={t("config_page.send_message_button_type.label")}
selectFunction={setSendMessageButtonType}
name="send_message_button_type"
options={[
{ 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") },

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;
margin: 0;
width: 1.6rem;
height: 1.6rem;
border: 0.2rem solid var(--dark_600_color);
width: 2rem;
height: 2rem;
border: 0.3rem solid var(--dark_600_color);
border-radius: 50%;
transition: border-color .1s ease, border-width .1s ease;
cursor: inherit;
&:checked {
border-color: var(--primary_400_color);
border-width: 0.4rem;
border-width: 0.6rem;
}
}