From b88efcdf083c1ceb64b0e42c7f1b775ac2a49c8b Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sat, 30 Nov 2024 20:41:53 +0900 Subject: [PATCH] [Update] Add update software UI(modal). --- src-ui/app/_index_css/variables.css | 1 + .../RightSideComponents.jsx | 4 +- .../app/modal_controller/ModalController.jsx | 3 + .../update_modal/UpdateModal.jsx | 20 +++++++ .../update_modal/UpdateModal.module.scss | 55 +++++++++++++++++++ src-ui/logics/common/index.js | 1 + src-ui/logics/common/useUpdateSoftware.js | 12 ++++ 7 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 src-ui/app/modal_controller/update_modal/UpdateModal.jsx create mode 100644 src-ui/app/modal_controller/update_modal/UpdateModal.module.scss create mode 100644 src-ui/logics/common/useUpdateSoftware.js diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css index 7d9f52f9..652f1cd7 100644 --- a/src-ui/app/_index_css/variables.css +++ b/src-ui/app/_index_css/variables.css @@ -8,6 +8,7 @@ --primary_400_color: #48a495; --primary_450_color: #429c8c; --primary_500_color: #3b9483; + --primary_550_color: #398E7D; --primary_600_color: #368777; --primary_650_color: #347f6f; --primary_700_color: #317767; 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 e78d3ef6..1024888e 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 @@ -67,8 +67,10 @@ const SoftwareUpdateAvailableButton = () => { const { t } = useTranslation(); if (currentIsSoftwareUpdateAvailable.data === false) return null; + const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + return ( - diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx index 762f9fb6..24009a74 100644 --- a/src-ui/app/modal_controller/ModalController.jsx +++ b/src-ui/app/modal_controller/ModalController.jsx @@ -1,6 +1,7 @@ import styles from "./ModalController.module.scss"; import { useStore_OpenedQuickSetting } from "@store"; import { Vr, VrcMicMuteSyncContainer } from "@setting_box"; +import { UpdateModal } from "./update_modal/UpdateModal"; export const ModalController = () => { const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); if (currentOpenedQuickSetting.data === "") return null; @@ -22,6 +23,8 @@ const QuickSettingsController = () => { return ; case "vrc_mic_mute_sync": return ; + case "update_software": + return ; default: return null; } diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx new file mode 100644 index 00000000..e158a65f --- /dev/null +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx @@ -0,0 +1,20 @@ +import styles from "./UpdateModal.module.scss"; +import { useTranslation } from "react-i18next"; +import { useStore_OpenedQuickSetting } from "@store"; +import { useUpdateSoftware } from "@logics_common"; + +export const UpdateModal = () => { + const { t } = useTranslation(); + const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + const { updateSoftware } = useUpdateSoftware(); + + return ( +
+

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

+
+ + +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss new file mode 100644 index 00000000..99d69293 --- /dev/null +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss @@ -0,0 +1,55 @@ +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2.4rem; +} + +.label { + font-size: 2rem; + max-width: 48rem; + text-align: center; + color: var(--dark_basic_text_color); +} +.button_wrapper { + display: flex; + width: 100%; + max-width: 48rem; + justify-content: space-between; +} +.deny_button, .accept_button { + font-size: 1.6rem; + padding: 1rem; + min-width: 10rem; + flex: 1; + max-width: 20rem; + text-align: center; + border-radius: 0.4rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--dark_basic_text_color); +} + +.accept_button { + background-color: var(--primary_550_color); + &:hover { + background-color: var(--primary_450_color); + } + &:active { + background-color: var(--primary_600_color); + } +} + +.deny_button { + background-color: var(--dark_750_color); + &:hover { + background-color: var(--dark_700_color); + } + &:active { + background-color: var(--dark_800_color); + } +} diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index de903104..692b65df 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -5,4 +5,5 @@ export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage"; export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable"; export { useOpenFolder } from "./useOpenFolder"; export { useMessage } from "./useMessage"; +export { useUpdateSoftware } from "./useUpdateSoftware"; export { useVolume } from "./useVolume"; \ No newline at end of file diff --git a/src-ui/logics/common/useUpdateSoftware.js b/src-ui/logics/common/useUpdateSoftware.js new file mode 100644 index 00000000..c033b878 --- /dev/null +++ b/src-ui/logics/common/useUpdateSoftware.js @@ -0,0 +1,12 @@ +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useUpdateSoftware = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const updateSoftware = () => { + asyncStdoutToPython("/run/update_software"); + }; + + return { + updateSoftware, + }; +}; \ No newline at end of file