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

[Update] Config Page: Others Tab. Add section, send message button type.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-08 23:13:18 +09:00
parent 6aa427baec
commit 2b9061d74d
7 changed files with 59 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
View File

@@ -1,27 +1,28 @@
import clsx from "clsx";
import { useState } from "react";
import styles from "./RadioButton.module.scss";
export const RadioButton = (props) => {
const options = [
{ radio_button_id: "1", label: "AAAAAAAA" },
{ radio_button_id: "2", label: "BBBBBB" }
];
const changeValue = (e) => {
console.log(e.target.value);
};
return (
<div className={styles.container}>
{options.map((option) => (
{props.options.map((option) => (
<label key={option.radio_button_id} className={styles.radio_button_wrapper}>
<input
type="radio"
name="radio"
value={option.radio_button_id}
onChange={changeValue}
/>
{props.checked_variable.data === option.radio_button_id
? <>
{ props.checked_variable.state === "loading" && <span className={styles.loader}></span> }
<input
type="radio"
name="radio"
value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)}
checked
/>
</>
: <input
type="radio"
name="radio"
value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)}
/>
}
<p className={styles.radio_button_label}>{option.label}</p>
</label>
))}

7
src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
View File

@@ -1,3 +1,5 @@
@import "@scss_mixins";
.container {
display: flex;
flex-direction: column;
@@ -12,6 +14,7 @@
gap: 1rem;
padding: 0.6rem 0.8rem;
border-radius: 0.4rem;
position: relative;
&:hover {
background-color: var(--dark_800_color);
}
@@ -38,4 +41,8 @@ input[type="radio"] {
.radio_button_label {
font-size: 1.4rem;
font-weight: 300;
}
.loader {
@include loader(2rem, 0.2rem, left, -1.6rem);
}

12
src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
View File

@@ -14,6 +14,7 @@ export const Others = () => {
} = useSettingBox();
const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig();
return (
@@ -24,7 +25,16 @@ export const Others = () => {
toggleFunction={toggleEnableAutoClearMessageBox}
/>
{/* <RadioButtonContainer label={t("config_page.send_message_button_type.label")} checkbox_id="checkbox_id_1"/> */}
<RadioButtonContainer
label={t("config_page.send_message_button_type.label")}
selectFunction={setSendMessageButtonType}
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") },
{ radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
]}
checked_variable={currentSendMessageButtonType}
/>
</>
);
};