From 37d78e1d87a8dcbf8e0b11516b8df54fd83a3ea3 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Tue, 6 May 2025 13:12:50 +0900 Subject: [PATCH] [Update] Plugins: Add homepage link button. --- src-ui/app/_index_css/variables.css | 4 +- .../advanced_settings/plugins/Plugins.jsx | 57 ++++++++++++++++++- .../plugins/Plugins.module.scss | 43 +++++++++++++- src-ui/logics/configs/plugins/usePlugins.js | 8 ++- 4 files changed, 107 insertions(+), 5 deletions(-) diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css index d212b415..6a3c48e4 100644 --- a/src-ui/app/_index_css/variables.css +++ b/src-ui/app/_index_css/variables.css @@ -19,6 +19,7 @@ --primary_600_color_44: #36877744; --sent_400_color: #6197b4; + --sent_300_color: #6197b4; --received_300_color: #a861b4; --error_bc_color: #bb4448; --error_bc_active_color: #9c3938; @@ -65,4 +66,5 @@ --config_page_topbar_height: 8rem; --font_family: "Yu Gothic UI"; -} \ No newline at end of file +} +/* https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */ \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.jsx index b19d48d7..2980ebab 100644 --- a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.jsx @@ -1,9 +1,10 @@ -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState, useCallback } from "react"; import { useTranslation } from "react-i18next"; import { usePlugins } from "@logics_configs"; import styles from "./Plugins.module.scss"; import { PluginsControlComponent } from "../../_components/plugins_control_component/PluginsControlComponent"; import { useNotificationStatus } from "@logics_common"; +import ExternalLink from "@images/external_link.svg?react"; export const Plugins = () => { const { @@ -87,6 +88,7 @@ const PluginDownloadContainer = () => { title: target_info.title, desc: target_info.desc || null, }; + const homepage_link = plugin.latest_plugin_info?.homepage_link; return (
@@ -98,6 +100,8 @@ const PluginDownloadContainer = () => { {target_locale.desc}

{/*

{plugin.plugin_id}

*/} + {homepage_link && + }
{plugin.is_error ? ( @@ -116,4 +120,55 @@ const PluginDownloadContainer = () => { })}
); +}; + +const HomepageLinkButton = ({ homepage_link, speed = 40 /* px/s */ }) => { + const containerRef = useRef(null); + const textRef = useRef(null); + const [inlineStyle, setInlineStyle] = useState({}); + + const handleMouseEnter = useCallback(() => { + const container = containerRef.current; + const text = textRef.current; + if (!container || !text) return; + const overflow = text.scrollWidth - container.clientWidth; + if (overflow > 0) { + const duration = overflow / speed; + setInlineStyle({ + transform: `translateX(-${overflow}px)`, + transition: `transform ${duration}s linear`, + }); + } + }, [speed]); + + const handleMouseLeave = useCallback(() => { + setInlineStyle({ + transform: 'translateX(0)', + transition: 'transform 0.3s ease-out', + }); + }, []); + + return ( +
+ +
+

+ {homepage_link} +

+
+ + +
+ ); }; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.module.scss b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.module.scss index af4bae9a..fbac276f 100644 --- a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/plugins/Plugins.module.scss @@ -55,4 +55,45 @@ // overflow: hidden; // white-space: nowrap; // text-overflow: ellipsis; -// } \ No newline at end of file +// } + +.open_homepage_button_wrapper { + width: 100%; +} + +.open_homepage_button { + padding: 0.6rem 0; + display: flex; + align-items: center; + gap: 1rem; + cursor: pointer; + text-decoration: none; + &:hover .external_link_svg { + color: var(--dark_200_color); + } + &:hover .open_homepage_text { + border-bottom: 0.1rem solid var(--dark_500_color); + } +} + +.text_container { + position: relative; + overflow: hidden; + flex: 1; /* テキスト部分をアイコンまで伸ばす */ +} + +.open_homepage_text { + margin: 0; /* pタグのデフォルトマージン除去 */ + font-size: 1.4rem; + color: var(--sent_400_color); + white-space: nowrap; + display: inline-block; + transform: translateX(0); + border-bottom: 0.1rem solid var(--sent_400_color); +} + +.external_link_svg { + flex-shrink: 0; + width: 1.6rem; + color: var(--dark_500_color); +} \ No newline at end of file diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js index bbeb8439..d4d398fa 100644 --- a/src-ui/logics/configs/plugins/usePlugins.js +++ b/src-ui/logics/configs/plugins/usePlugins.js @@ -227,7 +227,10 @@ export const usePlugins = () => { plugins_data.map(async (plugin_data) => { try { const plugin_info = await asyncFetchPluginInfo(plugin_data.url); - return plugin_info; + return { + ...plugin_info, + homepage_link: plugin_data.homepage_link, + }; } catch (error) { console.error("Error fetching plugin info for URL: ", plugin_data.url, error); return { @@ -235,7 +238,8 @@ export const usePlugins = () => { plugin_id: plugin_data.plugin_id || plugin_data.title, is_error: true, error_message: error.message, - url: plugin_data.url + url: plugin_data.url, + homepage_link: plugin_data.homepage_link, }; } })