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

[Update] Config Page: Add Others Tab. Auto Clear Message Input Box, Send Message Button Type.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-10-16 21:09:14 +09:00
parent fd0cadab8c
commit 2c460bc8e5
10 changed files with 113 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
View File

@@ -3,7 +3,7 @@ import { useStore_SelectedConfigTabId } from "@store";
import { Device } from "./device/Device";
import { Appearance } from "./appearance/Appearance";
import { Transcription } from "./transcription/Transcription";
// import { Others } from "./others/Others";
import { Others } from "./others/Others";
// import { AboutVrct } from "./about_vrct/AboutVrct";
export const SettingBox = () => {
@@ -11,12 +11,12 @@ export const SettingBox = () => {
switch (currentSelectedConfigTabId.data) {
case "device":
return <Device />;
// case "others":
// return <Others />;
case "appearance":
return <Appearance />;
case "transcription":
return <Transcription />;
case "others":
return <Others />;
// case "about_vrct":
// return <AboutVrct />;

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

@@ -1,36 +1,52 @@
import { useTranslation } from "react-i18next";
import { useSettingBox } from "../_components/useSettingBox";
import { useConfig } from "@logics/useConfig";
import {
useEnableAutoClearMessageInputBox,
useSendMessageButtonType,
} from "@logics_configs";
import {
CheckboxContainer,
RadioButtonContainer,
} from "../_templates/Templates";
export const Others = () => {
const { t } = useTranslation();
const {
CheckboxContainer,
RadioButtonContainer,
} = useSettingBox();
const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig();
return (
<>
<CheckboxContainer
label={t("config_page.auto_clear_the_message_box.label")}
variable={currentEnableAutoClearMessageBox}
toggleFunction={toggleEnableAutoClearMessageBox}
/>
<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}
/>
<AutoClearMessageInputBoxContainer />
<SendMessageButtonTypeContainer />
</>
);
};
const AutoClearMessageInputBoxContainer = () => {
const { t } = useTranslation();
const { currentEnableAutoClearMessageInputBox, toggleEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
return (
<CheckboxContainer
label={t("config_page.auto_clear_the_message_box.label")}
variable={currentEnableAutoClearMessageInputBox}
toggleFunction={toggleEnableAutoClearMessageInputBox}
/>
);
};
const SendMessageButtonTypeContainer = () => {
const { t } = useTranslation();
const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
return (
<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}
/>
);
};