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

[Refactor] Implement _OpenWebpageButton component and integrate it into DeeplAuthKeyContainer.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-13 12:17:18 +09:00
parent ddcf49e243
commit ef4a19d0bb
6 changed files with 49 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.jsx Normal file
View File

@@ -0,0 +1,13 @@
import styles from "./_OpenWebpageButton.module.scss";
import ExternalLink from "@images/external_link.svg?react";
export const _OpenWebpageButton = (props) => {
return (
<div className={styles.open_webpage_button_wrapper}>
<a className={styles.open_webpage_button} href={props.webpage_url} target="_blank" rel="noreferrer" >
<p className={styles.open_webpage_text}>{props.open_webpage_label}</p>
<ExternalLink className={styles.external_link_svg} />
</a>
</div>
);
};

32
src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss Normal file
View File

@@ -0,0 +1,32 @@
.open_webpage_button_wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.open_webpage_button {
padding: 0.6rem 2.8rem;
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
border-radius: 0.4rem;
cursor: pointer;
flex-shrink: 0;
&:hover {
background-color: var(--dark_825_color);
}
&:active {
background-color: var(--dark_900_color);
}
}
.open_webpage_text {
font-size: 1.2rem;
}
.external_link_svg {
color: var(--dark_500_color);
width: 1.6rem;
flex-shrink: 0;
}

13
src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
View File

@@ -2,7 +2,6 @@ import styles from "./DeeplAuthKey.module.scss";
import { useI18n } from "@useI18n";
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";
import { useEffect } from "react";
@@ -57,15 +56,3 @@ export const DeeplAuthKey = (props) => {
</div>
);
};
export const OpenWebpage_DeeplAuthKey = (props) => {
return (
<div className={styles.open_webpage_button_wrapper}>
<a className={styles.open_webpage_button} href={props.webpage_url} target="_blank" rel="noreferrer" >
<p className={styles.open_webpage_text}>{props.open_webpage_label}</p>
<ExternalLink className={styles.external_link_svg} />
</a>
</div>
);
};

33
src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
View File

@@ -63,36 +63,3 @@
.save_button_label {
font-size: 1.4rem;
}
.open_webpage_button_wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.open_webpage_button {
padding: 0.6rem 2.8rem;
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
border-radius: 0.4rem;
cursor: pointer;
flex-shrink: 0;
&:hover {
background-color: var(--dark_825_color);
}
&:active {
background-color: var(--dark_900_color);
}
}
.open_webpage_text {
font-size: 1.2rem;
}
.external_link_svg {
color: var(--dark_500_color);
width: 1.6rem;
flex-shrink: 0;
}

2
src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
View File

@@ -1,6 +1,6 @@
export { ActionButton } from "./action_button/ActionButton";
export { ComputeDevice } from "./compute_device/ComputeDevice";
export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
export { DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
export { DropdownMenu, MultiDropdownMenu } from "./dropdown_menu/DropdownMenu";
export { Entry } from "./entry/Entry";
export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";

5
src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
View File

@@ -12,7 +12,6 @@ import {
EntryWithSaveButton,
HotkeysEntry,
RadioButton,
OpenWebpage_DeeplAuthKey,
DeeplAuthKey,
ActionButton,
ComputeDevice,
@@ -23,6 +22,8 @@ import {
} from "../_components";
import { Checkbox } from "@common_components";
import { _OpenWebpageButton } from "../_components/_atoms/_open_webpage_button/_OpenWebpageButton";
export const useOnMouseLeaveDropdownMenu = () => {
const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
@@ -148,7 +149,7 @@ export const DeeplAuthKeyContainer = (props) => {
<TemplatesContainerWrapper>
<div className={styles.deepl_auth_key_label_section}>
<LabelComponent label={props.label} desc={props.desc} />
<OpenWebpage_DeeplAuthKey {...props} />
<_OpenWebpageButton {...props} />
</div>
<DeeplAuthKey {...props} />
</TemplatesContainerWrapper>