diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx index dc6f4309..e8bba371 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import React, { useRef, forwardRef, useImperativeHandle } from "react"; import styles from "./_Entry.module.scss"; @@ -9,6 +10,9 @@ const _Entry = forwardRef((props, ref) => { inputRef.current.focus(); } })); + const input_class_names = clsx(styles.entry_input_area, { + [styles.is_disabled]: props.is_disabled + }); return (
@@ -18,7 +22,7 @@ const _Entry = forwardRef((props, ref) => { > props.onChange(e)} /> diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss index dc2ac749..c9744de6 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss @@ -16,4 +16,9 @@ height: 100%; font-size: 1.4rem; resize: none; + color: var(--dark_basic_text_color); + &.is_disabled { + color: var(--dark_500_color); + pointer-events: none; + } } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx index 00e56333..42401b7a 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx @@ -1,6 +1,7 @@ import styles from "./DeeplAuthKey.module.scss"; import { useTranslation } from "react-i18next"; import clsx from "clsx"; +import CircularProgress from "@mui/material/CircularProgress"; import ExternalLink from "@images/external_link.svg?react"; import { _Entry } from "../_atoms/_entry/_Entry"; import { useState, useRef } from "react"; @@ -29,11 +30,22 @@ export const DeeplAuthKey = (props) => { } }, [props.variable]); + const is_disabled = props.state === "pending"; + + const save_button_class_names = clsx(styles.save_button, { + [styles.is_disabled]: is_disabled + }); + return (
- <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable}/> - + <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/> + {is_editable ? null : diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss index 6e5a3411..575ec8bc 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss @@ -44,17 +44,25 @@ .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; text-align: center; flex-shrink: 0; + min-width: 5.4rem; &:hover { background-color: var(--primary_500_color); } &:active { background-color: var(--primary_700_color); } + &.is_disabled { + pointer-events: none; + background-color: var(--primary_800_color); + } +} + +.save_button_label { + color: var(--dark_basic_text_color); + font-size: 1.4rem; } .open_webpage_button_wrapper { diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss index d2378d03..929f8975 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss @@ -1,4 +1,5 @@ .container { + } .entry_wrapper { diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx index 7ff8a104..724e73b3 100644 --- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx @@ -124,6 +124,7 @@ const DeeplAuthKey_Box = () => { {translator: t("main_page.translator")} )} variable={input_value} + state={currentDeepLAuthKey.state} onChangeFunction={onChangeFunction} saveFunction={saveFunction} />