From 4b92c210d6a53d0f53515f81a78b467b5dad615e Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:07:09 +0900 Subject: [PATCH] [Update] Main Page: Add the software update available button. --- .../RightSideComponents.jsx | 16 ++++++++++++ .../RightSideComponents.module.scss | 25 +++++++++++++++++++ src-ui/assets/refresh.svg | 1 + src-ui/logics/common/index.js | 1 + .../common/useIsSoftwareUpdateAvailable.js | 10 ++++++++ src-ui/logics/useReceiveRoutes.js | 3 +++ src-ui/store.js | 1 + 7 files changed, 57 insertions(+) create mode 100644 src-ui/assets/refresh.svg create mode 100644 src-ui/logics/common/useIsSoftwareUpdateAvailable.js diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx index c16cd4f1..e78d3ef6 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx @@ -1,8 +1,10 @@ import { useTranslation } from "react-i18next"; import styles from "./RightSideComponents.module.scss"; +import RefreshSvg from "@images/refresh.svg?react"; import HelpSvg from "@images/help.svg?react"; import { useStore_OpenedQuickSetting } from "@store"; +import { useIsSoftwareUpdateAvailable } from "@logics_common"; import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs"; import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton"; @@ -11,6 +13,7 @@ export const RightSideComponents = () => {
+ { onClickFunction={onClickFunction} /> ); +}; + +const SoftwareUpdateAvailableButton = () => { + const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable(); + const { t } = useTranslation(); + if (currentIsSoftwareUpdateAvailable.data === false) return null; + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss index 80f64219..e0295e73 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss @@ -21,4 +21,29 @@ .help_svg { width: 2.4rem; color: var(--dark_400_color); +} + +.software_update_button { + display: flex; + justify-content: center; + align-items: center; + gap: 0.4rem; + color: var(--primary_300_color); + padding: 1rem 0.4rem; + cursor: pointer; + &:hover { + background-color: var(--dark_800_color); + } + &:active { + background-color: var(--dark_900_color); + } +} + +.refresh_svg { + width: 1.8rem; + transform: rotate(-30deg); +} + +.software_update_label { + font-size: 1.2rem; } \ No newline at end of file diff --git a/src-ui/assets/refresh.svg b/src-ui/assets/refresh.svg new file mode 100644 index 00000000..42841d22 --- /dev/null +++ b/src-ui/assets/refresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index 1895d8df..cd14847f 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -1,5 +1,6 @@ export { useWindow } from "./useWindow"; export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage"; +export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable"; export { useOpenFolder } from "./useOpenFolder"; export { useMessage } from "./useMessage"; export { useVolume } from "./useVolume"; \ No newline at end of file diff --git a/src-ui/logics/common/useIsSoftwareUpdateAvailable.js b/src-ui/logics/common/useIsSoftwareUpdateAvailable.js new file mode 100644 index 00000000..569a3949 --- /dev/null +++ b/src-ui/logics/common/useIsSoftwareUpdateAvailable.js @@ -0,0 +1,10 @@ +import { useStore_IsSoftwareUpdateAvailable } from "@store"; + +export const useIsSoftwareUpdateAvailable = () => { + const { currentIsSoftwareUpdateAvailable, updateIsSoftwareUpdateAvailable } = useStore_IsSoftwareUpdateAvailable(); + + return { + currentIsSoftwareUpdateAvailable, + updateIsSoftwareUpdateAvailable, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 30b9b2d6..977e98b0 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -5,6 +5,7 @@ import { useWindow, useMessage, useVolume, + useIsSoftwareUpdateAvailable, } from "@logics_common"; import { @@ -81,6 +82,7 @@ export const useReceiveRoutes = () => { addSentMessageLog, addReceivedMessageLog, } = useMessage(); + const { updateIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable(); const { updateSoftwareVersion } = useSoftwareVersion(); const { updateEnableAutoMicSelect } = useEnableAutoMicSelect(); const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect(); @@ -154,6 +156,7 @@ export const useReceiveRoutes = () => { "/set/data/main_window_geometry": () => {}, "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"), "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"), + "/run/update_software_flag": updateIsSoftwareUpdateAvailable, // Main Page // Page Controls diff --git a/src-ui/store.js b/src-ui/store.js index 4af181d3..8a7f3c98 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -108,6 +108,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma transcription_receive: false, }, "MainFunctionsStateMemory"); export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting"); +export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable"); // Main Page // Functions