+
+);
+
export const useOnMouseLeaveDropdownMenu = () => {
const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
@@ -29,7 +37,6 @@ export const useOnMouseLeaveDropdownMenu = () => {
export const DropdownMenuContainer = (props) => {
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-
return (
-
+
+export const CheckboxContainer = (props) => (
+
+);
-export const EntryContainer = (props) => {
- return (
-
+
+);
-export const SwitchBoxContainer = (props) => {
- return (
-
-
- );
-};
+export const ActionButtonContainer = (props) => (
+
-
- );
-};
-
-export const RadioButtonContainer = (props) => {
- return (
-
-
- );
-};
-
-export const DeeplAuthKeyContainer = (props) => {
- return (
-
-
+export const WordFilterContainer = (props) => (
+
Date: Fri, 6 Dec 2024 13:07:00 +0900
Subject: [PATCH 5/5] [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 (
<>
+
+);
-export const ActionButtonContainer = (props) => {
- return (
-
+
- );
-};
+
+
+
-
- );
-};
-
-export const WordFilterContainer = (props) => {
- return (
-
-
- );
-};
-
-export const DownloadModelsContainer = (props) => {
- return (
-
-
-
-
-
-
-
-
-
- );
-};
\ No newline at end of file
+export const DownloadModelsContainer = (props) => (
+ {t("main_page.confirmation_message.update_software")}
-
+
+
+ );
+};
\ 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
+ 
+
+
+
+ {t("main_page.confirmation_message.updating")}
+