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

[Update/Refactor] Config Window: Add DeeplAuthKey.

Browse Source 
Refactor: Separate entry component.
This commit is contained in:
Sakamoto Shiina
2024-08-04 09:12:39 +09:00
parent 1d2df69507
commit 88b911bfc2
10 changed files with 120 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src-ui/assets/external_link.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd"><path d="M14 4h-13v18h20v-11h1v12h-22v-20h14v1zm10 5h-1v-6.293l-11.646 11.647-.708-.708 11.647-11.646h-6.293v-1h8v8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 225 B

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

@@ -11,6 +11,7 @@ export const Appearance = () => {
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
DeeplAuthKeyContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -35,9 +36,11 @@ export const Appearance = () => {
<RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
<EntryContainer width="20rem" label="Transparent" desc="description" switchbox_id="entry_id_1"/>
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
<DeeplAuthKeyContainer label="Transparent" desc="description"/>
</>
);
};

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

@@ -11,6 +11,7 @@ export const Appearance = () => {
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
DeeplAuthKeyContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -35,9 +36,11 @@ export const Appearance = () => {
<RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="entry_id_1"/>
<EntryContainer width="20rem" label="Transparent" desc="description" switchbox_id="entry_id_1"/>
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
<DeeplAuthKeyContainer label="Transparent" desc="description"/>
</>
);
};

28
src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx Normal file
View File

@@ -0,0 +1,28 @@
import React, { useState } from "react";
import styles from "./_Entry.module.scss";
export const _Entry = ({ width, onChange, initialValue = "" }) => {
const [input_value, setInputValue] = useState(initialValue);
const onChangeFunction = (e) => {
setInputValue(e.currentTarget.value);
if (onChange) {
onChange(e);
}
};
return (
<div className={styles.entry_container}>
<div
className={styles.entry_wrapper}
style={{ width }}
>
<input
className={styles.entry_input_area}
value={input_value}
onChange={onChangeFunction}
/>
</div>
</div>
);
};

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

@@ -0,0 +1,15 @@
.entry_wrapper {
width: 10rem;
height: 100%;
padding: 0.6rem;
background-color: var(--dark_875_color);
border: 0.1rem solid var(--dark_750_color);
border-radius: 0.4rem;
}
.entry_input_area {
width: 100%;
height: 100%;
font-size: 1.4rem;
resize: none;
}

18
src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx Normal file
View File

@@ -0,0 +1,18 @@
import styles from "./DeeplAuthKey.module.scss";
import clsx from "clsx";
import ExternalLink from "@images/external_link.svg?react";
import { _Entry } from "../_atoms/_Entry";
export const DeeplAuthKey = () => {
return (
<div className={styles.container}>
<_Entry width="34rem"/>
<div className={styles.open_webpage_button}>
<p className={styles.open_webpage_text}>Open DeepL Account Webpage</p>
<ExternalLink className={styles.external_link_svg} />
</div>
</div>
);
};

33
src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss Normal file
View File

@@ -0,0 +1,33 @@
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
.open_webpage_button {
padding: 0.6rem 1.2rem;
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
border-radius: 0.4rem;
cursor: pointer;
&:hover {
background-color: var(--dark_825_color);
}
&:active {
background-color: var(--dark_900_color);
}
}
.open_webpage_text {
font-size: 1.4rem;
color: var(--dark_basic_text_color);
}
.external_link_svg {
color: var(--dark_500_color);
width: 1.8rem;
}

19
src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.jsx
View File

@@ -1,22 +1,15 @@
import { useState } from "react";
import styles from "./Entry.module.scss";
import { _Entry } from "../_atoms/_Entry";
export const Entry = (props) => {
const [input_value, setInputValue] = useState();
export const Entry = ({width}) => {
const onChangeFunction = (e) => {
setInputValue(e.currentTarget.value);
const handleInputChange = (e) => {
console.log(e.currentTarget.value);
};
return (
<div className={styles.entry_container}>
<div className={styles.entry_wrapper}>
<input
className={styles.entry_input_area}
onChange={onChangeFunction}
/>
</div>
<_Entry width={width} onChange={handleInputChange} initialValue="" />
</div>
);
};
};

15
src-ui/windows/config_window/setting_section/setting_box/components/entry/Entry.module.scss
View File

@@ -1,15 +0,0 @@
.entry_wrapper {
width: 10rem;
height: 100%;
padding: 0.6rem;
background-color: var(--dark_875_color);
border: 0.1rem solid var(--dark_750_color);
border-radius: 0.4rem;
}
.entry_input_area {
width: 100%;
height: 100%;
font-size: 1.4rem;
resize: none;
}

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

@@ -9,6 +9,7 @@ import { Switchbox } from "./switchbox/Switchbox";
import { Entry } from "./entry/Entry";
import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
import { RadioButton } from "./radio_button/RadioButton";
import { DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
export const useSettingBox = () => {
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -85,6 +86,15 @@ export const useSettingBox = () => {
);
};
const DeeplAuthKeyContainer = (props) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<DeeplAuthKey {...props}/>
</div>
);
};
return {
DropdownMenuContainer,
SliderContainer,
@@ -93,5 +103,6 @@ export const useSettingBox = () => {
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
DeeplAuthKeyContainer,
};
};