From 5a498fc98c0695f7fe4451171d99a17fb2297158 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 20 Dec 2024 03:48:33 +0900 Subject: [PATCH 1/2] [Update] Main Page: Add headphones icon to every language select open button when Speaker2Log is turned on. --- .../LanguageSelectorOpenButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx index 967c51f8..eacbf8f4 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx @@ -60,7 +60,7 @@ export const LanguageSelectorOpenButton = ({ TurnedOnSvgComponent, is_turned_on, return (
- { target_key === "1" ? : null } +

{title}

From 798a4a87fc3d7213092c370d323b2938de54a527 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 20 Dec 2024 19:05:30 +0900 Subject: [PATCH 2/2] [Update] Change the design. Update/Switch CPU/GPU version. --- locales/en.yml | 20 ++-- locales/ja.yml | 24 ++-- .../advanced_settings/AdvancedSettings.jsx | 2 +- .../app/modal_controller/ModalController.jsx | 4 +- .../SwitchComputeDeviceModal.jsx | 47 -------- .../SwitchComputeDeviceModal.module.scss | 69 ----------- .../update_modal/UpdateModal.jsx | 78 ++++++++++--- .../update_modal/UpdateModal.module.scss | 107 ++++++++++++++++-- 8 files changed, 181 insertions(+), 170 deletions(-) delete mode 100644 src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx delete mode 100644 src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss diff --git a/locales/en.yml b/locales/en.yml index f139788d..40ed70f8 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -59,19 +59,15 @@ main_page: updating: Now updating... update_modal: - update_software_desc: |- - Download the new version and automatically restart the app. - It'll take a while. Do it now? - deny_update_software: Do it later - accept_update_software: Update and Restart - -switch_compute_device_modal: + cpu_desc: Use CPU only as the compute device + cuda_desc: Selectable between CPU and GPU as compute devices + cuda_disk_space_desc: Requires approximately {{size}} of disk space close_modal: Close - switch_to_cpu_desc: Download and replace with the CPU version. The GPU will no longer be selectable as the compute device, and only the CPU will be used. - switch_to_cuda_desc: Download and replace with the CUDA (GPU-selectable) version. It will be able to select both the CPU and GPU, but it will require approximately 5GB of disk space. - switch_to_cpu_button: Switch to CPU version - switch_to_cuda_button: Switch to CUDA (GPU) version - restart_desc: The app will automatically restart. + download_latest_and_restart: |- + The latest version will be downloaded, + and the app will automatically restart. + is_latest_version_already: Already using the latest version + is_current_compute_device: Currently using this version config_page: version: version {{version}} diff --git a/locales/ja.yml b/locales/ja.yml index bdac7184..0b6eb496 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -58,23 +58,15 @@ main_page: updating: アップデート中... update_modal: - update_software_desc: |- - 新しいバージョンをダウンロードしてアプリを再起動します。 - 少し時間がかかります。今すぐ行いますか？ - deny_update_software: 後でする - accept_update_software: アップデートして再起動 - -switch_compute_device_modal: + cpu_desc: 処理デバイスとしてCPUのみを使用 + cuda_desc: 処理デバイスとしてCPUとGPUの両方を選択可能 + cuda_disk_space_desc: 約{{size}}のディスク容量が必要 close_modal: 閉じる - switch_to_cpu_desc: |- - CPUバージョンをダウンロードして置き換えます。 - 処理デバイスとしてGPUを選択できなくなり、CPUのみを使用するようになります。 - switch_to_cuda_desc: |- - CUDA（GPU選択可能）バージョンをダウンロードして置き換えます。 - CPUとGPUの両方を選択できるようになりますが、約5GBのディスク容量が必要になります。 - switch_to_cpu_button: CPUバージョンに切り替える - switch_to_cuda_button: CUDA（GPU）バージョンに切り替える - restart_desc: アプリが自動的に再起動します。 + download_latest_and_restart: |- + 最新版がダウンロードされ、 + アプリは自動的に再起動します。 + is_latest_version_already: すでに最新版を使用中 + is_current_compute_device: 現在使用中のバージョン config_page: version: バージョン {{version}} diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx index 3193edc9..9c1ab116 100644 --- a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx @@ -101,7 +101,7 @@ const OpenSwitchComputeDeviceModalContainer = () => { const { t } = useTranslation(); const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); const onClickFunction = () => { - updateOpenedQuickSetting("switch_compute_device"); + updateOpenedQuickSetting("update_software"); }; return ( diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx index 293f6aad..022d1271 100644 --- a/src-ui/app/modal_controller/ModalController.jsx +++ b/src-ui/app/modal_controller/ModalController.jsx @@ -2,7 +2,7 @@ import styles from "./ModalController.module.scss"; import { useStore_OpenedQuickSetting } from "@store"; import { Vr, VrcMicMuteSyncContainer } from "@setting_box"; import { UpdateModal } from "./update_modal/UpdateModal"; -import { SwitchComputeDeviceModal } from "./switch_compute_device_modal/SwitchComputeDeviceModal"; + export const ModalController = () => { const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); if (currentOpenedQuickSetting.data === "") return null; @@ -26,8 +26,6 @@ const QuickSettingsController = () => { return ; case "update_software": return ; - case "switch_compute_device": - return ; default: return null; } diff --git a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx b/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx deleted file mode 100644 index 47f0c3b2..00000000 --- a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import styles from "./SwitchComputeDeviceModal.module.scss"; -import { useTranslation } from "react-i18next"; -import { useStore_OpenedQuickSetting } from "@store"; -import { useComputeMode, useUpdateSoftware } from "@logics_common"; -import { useIsSoftwareUpdating } from "@logics_common"; - -export const SwitchComputeDeviceModal = () => { - const { t } = useTranslation(); - const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); - const { updateSoftware, updateSoftware_CUDA } = useUpdateSoftware(); - const { updateIsSoftwareUpdating } = useIsSoftwareUpdating(); - const { currentComputeMode } = useComputeMode(); - - - const is_cpu_version = currentComputeMode.data === "cpu"; - - const switch_compute_device_desc = is_cpu_version - ? t("switch_compute_device_modal.switch_to_cuda_desc") - : t("switch_compute_device_modal.switch_to_cpu_desc"); - - const accept_button_label = is_cpu_version - ? t("switch_compute_device_modal.switch_to_cuda_button") // to CUDA - : t("switch_compute_device_modal.switch_to_cpu_button"); // to CPU - - - const onClickUpdateSoftware = () => { - updateIsSoftwareUpdating(true); - if (is_cpu_version === true) { - updateSoftware_CUDA(); - } else { - updateSoftware(); - } - }; - - return ( -
-

{switch_compute_device_desc}

-
- - -
-
- ); -}; \ No newline at end of file diff --git a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss b/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss deleted file mode 100644 index 2a5d1b30..00000000 --- a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss +++ /dev/null @@ -1,69 +0,0 @@ -.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%; - gap: 2rem; - 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); - position: relative; - &: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); - } -} - -.restart_desc { - position: absolute; - top: 100%; - left: 50%; - margin-top: 1rem; - transform: translate(-50%); - color: var(--dark_basic_text_color); - font-size: 1.4rem; - width: max-content; - pointer-events: none; -} \ No newline at end of file diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx index 5da29b6a..e78235e9 100644 --- a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx @@ -2,34 +2,86 @@ import styles from "./UpdateModal.module.scss"; import { useTranslation } from "react-i18next"; import { useStore_OpenedQuickSetting } from "@store"; import { useComputeMode, useUpdateSoftware } from "@logics_common"; -import { useIsSoftwareUpdating } from "@logics_common"; +import { useIsSoftwareUpdating, useIsSoftwareUpdateAvailable } from "@logics_common"; +import clsx from "clsx"; export const UpdateModal = () => { const { t } = useTranslation(); const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); - const { updateSoftware } = useUpdateSoftware(); + const { updateSoftware, updateSoftware_CUDA } = useUpdateSoftware(); const { updateIsSoftwareUpdating } = useIsSoftwareUpdating(); const { currentComputeMode } = useComputeMode(); + const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable(); + const is_latest_version_already = currentIsSoftwareUpdateAvailable.data === false; const is_cpu_version = currentComputeMode.data === "cpu"; const onClickUpdateSoftware = () => { updateIsSoftwareUpdating(true); - // Update to the same as now compute device - if (is_cpu_version === true) { - updateSoftware(); - } else { - updateSoftware_CUDA(); - } - }; + updateSoftware(); + } + const onClickUpdateSoftware_CUDA = () => { + updateIsSoftwareUpdating(true); + updateSoftware_CUDA(); + } + + const cpu_accept_button_class_name = clsx(styles.accept_button, { + [styles.current_compute_version]: is_cpu_version, + [styles.is_latest_version_already]: is_latest_version_already, + }) + const cuda_accept_button_class_name = clsx(styles.accept_button, { + [styles.current_compute_version]: !is_cpu_version, + [styles.is_latest_version_already]: is_latest_version_already, + }) return (
-

{t("update_modal.update_software_desc")}

-
- - +
+
+
+
+ + {is_cpu_version ? : null} +
+
+ +
+
+
+
+ + {!is_cpu_version ? : null} +
+
+ + +
+
+ +

{t("update_modal.download_latest_and_restart")}

+
+
+ +
); +}; + +const VersionDescComponent = (props) => { + return ( +
+
+

{props.desc}

+
+ ); +}; + +const CurrentVersionLabel = (props) => { + const { t } = useTranslation(); + + if (props.is_latest_version_already) { + return

{t("update_modal.is_latest_version_already")}

; + } + return

{t("update_modal.is_current_compute_device")}

; }; \ 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 index 99d69293..2c253a9a 100644 --- a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss @@ -8,18 +8,52 @@ gap: 2.4rem; } -.label { - font-size: 2rem; - max-width: 48rem; - text-align: center; - color: var(--dark_basic_text_color); +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8rem; } + +.update_section { + border: 0.1rem solid var(--dark_600_color); + border-radius: 0.4rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 4rem; + padding: 6rem 2rem; + position: relative; +} +.update_desc { + position: absolute; + top: 100%; + transform: translateY(-50%); + font-size: 1.4rem; + background-color: var(--dark_900_color); + padding: 0 2.8rem; + text-align: center; + font-weight: 400; +} + + +.cpu_section, .cuda_section { + width: 100%; + display: flex; + justify-content: start; + align-items: center; + gap: 3rem; +} + .button_wrapper { display: flex; - width: 100%; - max-width: 48rem; + width: 16rem; justify-content: space-between; + position: relative; } + .deny_button, .accept_button { font-size: 1.6rem; padding: 1rem; @@ -35,17 +69,35 @@ } .accept_button { - background-color: var(--primary_550_color); + background-color: var(--primary_700_color); + position: relative; + overflow: visible; &:hover { background-color: var(--primary_450_color); } &:active { background-color: var(--primary_600_color); } + &.current_compute_version { + &::after { + content: ""; + position: absolute; + top: -1rem; + right: -1rem; + bottom: -1rem; + left: -1rem; + border: 0.1rem solid var(--primary_400_color); + border-radius: 0.4rem; + } + &.is_latest_version_already { + background-color: var(--dark_800_color); + pointer-events: none; + } + } } .deny_button { - background-color: var(--dark_750_color); + background-color: var(--dark_800_color); &:hover { background-color: var(--dark_700_color); } @@ -53,3 +105,40 @@ background-color: var(--dark_800_color); } } + +.current_version_label { + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin: 0 0 0.4rem 0; + font-size: 1.2rem; + width: max-content; + height: max-content; + background-color: var(--dark_900_color); + padding: 0 1rem; + font-weight: 300; + &.is_cuda { + top: 100%; + margin: 0.4rem 0 0 0; + } +} + +.version_desc_wrapper { + display: flex; + align-items: center; + gap: 0.6rem; +} +.version_desc_point { + background-color: var(--dark_basic_text_color); + width: 0.3rem; + border-radius: 50%; + aspect-ratio: 1 / 1; +} +.version_desc { + font-size: 1.4rem; + max-width: 48rem; + // text-align: center; + font-weight: 300; + color: var(--dark_basic_text_color); +} \ No newline at end of file