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

[Update] Config Window: DeeplAuthKey. put edit and save button and move open webpage button to label section.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-08-05 06:40:42 +09:00
parent 0d7eb9eb8c
commit 19ef8d3226
6 changed files with 118 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,9 @@
import { useTranslation } from "react-i18next";
import { useSettingBox } from "../components/useSettingBox";
import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
export const Appearance = () => {
const { t } = useTranslation();
const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
const { currentMicDeviceListStatus } = useMicDeviceListStatus();
const {
@@ -40,7 +43,7 @@ export const Appearance = () => {
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
<DeeplAuthKeyContainer label="Transparent" desc="description"/>
<DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
</>
);
};

42
src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
View File

@@ -1,18 +1,52 @@
import styles from "./DeeplAuthKey.module.scss";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import ExternalLink from "@images/external_link.svg?react";
import { _Entry } from "../_atoms/_Entry";
import { useState } from "react";
export const DeeplAuthKey = () => {
const { t } = useTranslation();
const [is_editable, seIsEditable] = useState(false);
const [input_value, seInputValue] = useState("");
const revealEditAuthKey = () => {
seIsEditable(true);
};
const onchangeEntryAuthKey = (e) => {
seInputValue(e.target.value);
};
const saveAuthKey = () => {
console.log(input_value);
};
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 className={styles.entry_section_wrapper}>
<_Entry width="32rem" onChange={onchangeEntryAuthKey}/>
<button className={styles.save_button} onClick={saveAuthKey}>Save</button>
{is_editable
? null
:
<div className={styles.entry_edit_cover} onClick={revealEditAuthKey}>
<button className={styles.edit_button}>Edit</button>
</div>
}
</div>
</div>
);
};
export const OpenWebpage_DeeplAuthKey = () => {
return (
<div className={styles.open_webpage_button_wrapper}>
<a className={styles.open_webpage_button} href="https://translate.google.com/?hl=ja&tab=TT&sl=en&tl=ja&op=translate" target="_blank" rel="noreferrer" >
<p className={styles.open_webpage_text}>Open DeepL Account Webpage</p>
<ExternalLink className={styles.external_link_svg} />
</a>
</div>
);
};

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

@@ -6,8 +6,63 @@
gap: 1rem;
}
.entry_section_wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
position: relative;
}
.entry_edit_cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 0.4rem;
background-color: (#00000044);
backdrop-filter: blur(4rem);
border: solid 0.1rem var(--dark_700_color);
&:hover {
background-color: (#00000088);
}
&:active {
backdrop-filter: blur(1.4rem);
}
}
.edit_button {
padding: 0.8rem 1.2rem;
color: var(--dark_basic_text_color);
height: 100%;
width: 100%;
font-size: 1.4rem;
text-align: center;
}
.save_button {
padding: 0.8rem 1.2rem;
background-color: var(--primary_600_color);
color: var(--dark_basic_text_color);
font-size: 1.4rem;
border-radius: 0.4rem;
&:hover {
background-color: var(--primary_500_color);
}
&:active {
background-color: var(--primary_700_color);
}
}
.open_webpage_button_wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.open_webpage_button {
padding: 0.6rem 1.2rem;
padding: 0.6rem 3.2rem;
display: flex;
gap: 1rem;
justify-content: center;
@@ -23,11 +78,11 @@
}
.open_webpage_text {
font-size: 1.4rem;
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}
.external_link_svg {
color: var(--dark_500_color);
width: 1.8rem;
width: 1.6rem;
}

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

@@ -9,7 +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";
import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
export const useSettingBox = () => {
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -89,7 +89,10 @@ export const useSettingBox = () => {
const DeeplAuthKeyContainer = (props) => {
return (
<div className={styles.container}>
<LabelComponent label={props.label} desc={props.desc} />
<div className={styles.deepl_auth_key_label_section}>
<LabelComponent label={props.label} desc={props.desc} />
<OpenWebpage_DeeplAuthKey />
</div>
<DeeplAuthKey {...props}/>
</div>
);

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

@@ -5,6 +5,9 @@
align-items: center;
background-color: var(--dark_888_color);
padding: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.threshold_container {
@@ -27,4 +30,13 @@
.threshold_section {
width: 100%;
}
.deepl_auth_key_label_section {
max-width: 34rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1.4rem;
}