From 043208f58fa9e21f5fb7e07d6707f9d31159673a Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 6 Dec 2024 13:07:00 +0900 Subject: [PATCH] [Update] Add updating display. --- src-ui/app/App.jsx | 9 +++- .../update_modal/UpdateModal.jsx | 9 +++- .../updating_component/UpdatingComponent.jsx | 22 ++++++++ .../UpdatingComponent.module.scss | 52 +++++++++++++++++++ src-ui/logics/common/index.js | 1 + src-ui/logics/common/useIsSoftwareUpdating.js | 10 ++++ src-ui/store.js | 1 + 7 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 src-ui/app/updating_component/UpdatingComponent.jsx create mode 100644 src-ui/app/updating_component/UpdatingComponent.module.scss create mode 100644 src-ui/logics/common/useIsSoftwareUpdating.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 46edc86a..896cbb34 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -6,9 +6,10 @@ import { WindowTitleBar } from "./window_title_bar/WindowTitleBar"; import { MainPage } from "./main_page/MainPage"; import { ConfigPage } from "./config_page/ConfigPage"; import { SplashComponent } from "./splash_component/SplashComponent"; +import { UpdatingComponent } from "./updating_component/UpdatingComponent"; import { ModalController } from "./modal_controller/ModalController"; import styles from "./App.module.scss"; -import { useIsBackendReady } from "@logics_common"; +import { useIsBackendReady, useIsSoftwareUpdating } from "@logics_common"; export const App = () => { const { currentIsBackendReady } = useIsBackendReady(); @@ -34,14 +35,20 @@ export const App = () => { }; const Contents = () => { + const { currentIsSoftwareUpdating } = useIsSoftwareUpdating(); return ( <> + {currentIsSoftwareUpdating.data === false + ?
+ : + + } ); }; diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx index e158a65f..37f2fe0f 100644 --- a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx @@ -2,18 +2,25 @@ import styles from "./UpdateModal.module.scss"; import { useTranslation } from "react-i18next"; import { useStore_OpenedQuickSetting } from "@store"; import { useUpdateSoftware } from "@logics_common"; +import { useIsSoftwareUpdating } from "@logics_common"; export const UpdateModal = () => { const { t } = useTranslation(); const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); const { updateSoftware } = useUpdateSoftware(); + const { updateIsSoftwareUpdating } = useIsSoftwareUpdating(); + + const onClickUpdateSoftware = () => { + updateIsSoftwareUpdating(true); + updateSoftware(); + }; return (

{t("main_page.confirmation_message.update_software")}

- +
); diff --git a/src-ui/app/updating_component/UpdatingComponent.jsx b/src-ui/app/updating_component/UpdatingComponent.jsx new file mode 100644 index 00000000..97c774b1 --- /dev/null +++ b/src-ui/app/updating_component/UpdatingComponent.jsx @@ -0,0 +1,22 @@ +import styles from "./UpdatingComponent.module.scss"; +import { useTranslation } from "react-i18next"; +import CircularProgress from "@mui/material/CircularProgress"; +import chat_white_square from "@images/chato_white_square.png"; + +export const UpdatingComponent = () => { + const { t } = useTranslation(); + + return ( +
+
+ +
+
+ +
+

{t("main_page.confirmation_message.updating")}

+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/updating_component/UpdatingComponent.module.scss b/src-ui/app/updating_component/UpdatingComponent.module.scss new file mode 100644 index 00000000..87d7e39f --- /dev/null +++ b/src-ui/app/updating_component/UpdatingComponent.module.scss @@ -0,0 +1,52 @@ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 4rem; + position: relative; +} + +.label { + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 2rem; +} + +.circular_box { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.chato_box { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + overflow: hidden; +} + +.chato_img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 4.8rem; + animation: infinite-rotation 20s linear infinite 0.5s; +} +@keyframes infinite-rotation { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + to { + transform: translate(-50%, -50%) rotate(360deg); + } +} \ No newline at end of file diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index 33ef2251..8f1cd737 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -4,6 +4,7 @@ export { useIsBackendReady } from "./useIsBackendReady"; export { useWindow } from "./useWindow"; export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage"; export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable"; +export { useIsSoftwareUpdating } from "./useIsSoftwareUpdating"; export { useOpenFolder } from "./useOpenFolder"; export { useMessage } from "./useMessage"; export { useUpdateSoftware } from "./useUpdateSoftware"; diff --git a/src-ui/logics/common/useIsSoftwareUpdating.js b/src-ui/logics/common/useIsSoftwareUpdating.js new file mode 100644 index 00000000..04507514 --- /dev/null +++ b/src-ui/logics/common/useIsSoftwareUpdating.js @@ -0,0 +1,10 @@ +import { useStore_IsSoftwareUpdating } from "@store"; + +export const useIsSoftwareUpdating = () => { + const { currentIsSoftwareUpdating, updateIsSoftwareUpdating } = useStore_IsSoftwareUpdating(); + + return { + currentIsSoftwareUpdating, + updateIsSoftwareUpdating, + }; +}; \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index 404f6a13..cf63e236 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -114,6 +114,7 @@ export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQu export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable"); export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress"); export const { atomInstance: Atom_IsBreakPoint, useHook: useStore_IsBreakPoint } = createAtomWithHook(false, "IsBreakPoint"); +export const { atomInstance: Atom_IsSoftwareUpdating, useHook: useStore_IsSoftwareUpdating } = createAtomWithHook(false, "IsSoftwareUpdating"); // Main Page // Functions