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

[Update] Config Window: Add MessageFormat component.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-08-05 11:56:17 +09:00
parent 524f4d79a4
commit eb38d6a2b1
7 changed files with 179 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src-ui/assets/swap_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

5
src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -15,6 +15,7 @@ export const Appearance = () => {
ThresholdContainer,
RadioButtonContainer,
DeeplAuthKeyContainer,
MessageFormatContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -44,6 +45,10 @@ export const Appearance = () => {
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
<DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
<MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)}/>
<MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} with_t={true}/>
</>
);
};

4
src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.module.scss
View File

@@ -1,3 +1,7 @@
.entry_container {
width: 100%;
}
.entry_wrapper {
width: 10rem;
height: 100%;

76
src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx Normal file
View File

@@ -0,0 +1,76 @@
import styles from "./MessageFormat.module.scss";
import { useTranslation } from "react-i18next";
export const MessageFormat = (props) => {
return (
<div className={styles.container}>
<ExampleComponent {...props}/>
<InputComponent {...props}/>
{
props.with_t
? <SwapButton/>
: null
}
</div>
);
};
const ExampleComponent = (props) => {
const { t } = useTranslation();
const createExampleMessage = () => {
return t("config_window.send_message_format.example_text");
};
return (
<div className={styles.example_container}>
<p className={styles.example_text}>{createExampleMessage()}</p>
</div>
);
};
import { _Entry } from "../_atoms/_Entry";
const InputComponent = (props) => {
const { t } = useTranslation();
const onChangeInput = (e) => {
console.log(e.target.value);
};
return (
<div className={styles.input_wrapper}>
<_Entry width="100%" onChange={onChangeInput} />
<p className={styles.preset_text}>[message]</p>
<_Entry width="100%" onChange={onChangeInput} />
{
props.with_t
? (<>
<p className={styles.preset_text}>[translation]</p>
<_Entry width="100%" onChange={onChangeInput} />
</>)
: null
}
</div>
);
};
import SwapImg from "@images/swap_icon.png";
const SwapButton = () => {
const swapMessageAndTranslate = () => {
};
return (
<div className={styles.swap_button_container}>
<div className={styles.swap_button_wrapper} onClick={swapMessageAndTranslate}>
<p className={styles.swap_text}>[message]</p>
<img className={styles.swap_img} src={SwapImg} />
<p className={styles.swap_text}>[translate]</p>
</div>
</div>
);
};

65
src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss Normal file
View File

@@ -0,0 +1,65 @@
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 1.6rem;
}
.example_container {
padding: 1rem;
background-color: #3A4554;
border-radius: 1.4rem;
max-width: 30rem;
text-align: center;
}
.example_text {
font-size: 1.4rem;
}
.input_wrapper {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.preset_text {
font-size: 1.6rem;
width: 100%;
text-align: center;
}
.swap_button_container {
width: 100%;
display: flex;
justify-content: end;
}
.swap_button_wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 0.8rem;
padding: 0.6rem 1.2rem;
border-radius: 0.4rem;
background-color: var(--dark_850_color);
cursor: pointer;
&:hover {
background-color: var(--dark_800_color);
}
&:active {
background-color: var(--dark_900_color);
}
}
.swap_text {
font-size: 1.4rem;
}
.swap_img {
width: 2rem;
}

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

@@ -1,5 +1,6 @@
import styles from "./useSettingBox.module.scss";
import { useIsOpenedDropdownMenu } from "@store";
import clsx from "clsx";
import { LabelComponent } from "./label_component/LabelComponent";
import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
@@ -10,6 +11,7 @@ import { Entry } from "./entry/Entry";
import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
import { RadioButton } from "./radio_button/RadioButton";
import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
import { MessageFormat } from "./message_format/MessageFormat";
export const useSettingBox = () => {
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -98,6 +100,20 @@ export const useSettingBox = () => {
);
};
const MessageFormatContainer = (props) => {
return (
<div className={clsx(styles.container, styles.flex_column)}>
<div className={styles.label_only_section}>
<LabelComponent label={props.label} desc={props.desc} />
</div>
<div className={styles.message_format_section}>
<MessageFormat {...props}/>
</div>
</div>
);
};
return {
DropdownMenuContainer,
SliderContainer,
@@ -107,5 +123,6 @@ export const useSettingBox = () => {
ThresholdContainer,
RadioButtonContainer,
DeeplAuthKeyContainer,
MessageFormatContainer,
};
};

12
src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss
View File

@@ -8,6 +8,14 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
&.flex_column {
flex-direction: column;
}
}
.label_only_section {
width: 100%;
}
.threshold_container {
@@ -39,4 +47,8 @@
justify-content: space-between;
align-items: center;
gap: 1.4rem;
}
.message_format_section {
width: 100%;
}