diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx index caf89d43..c35a240c 100644 --- a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import styles from "./UpdateModal.module.scss"; import { useTranslation } from "react-i18next"; import { useStore_OpenedQuickSetting } from "@store"; @@ -9,7 +10,7 @@ import { useSoftwareVersion, } from "@logics_common"; -import clsx from "clsx"; +import { PluginCompatibilityList } from "./plugins_compatibility_list/PluginCompatibilityList"; export const UpdateModal = () => { const { t } = useTranslation(); @@ -44,31 +45,34 @@ export const UpdateModal = () => { return (
- {isAnyPluginEnabled() && } -
-
-
- - {is_cpu_version ? : null} +
+ {isAnyPluginEnabled() && } +
+
+
+ + {is_cpu_version ? : null} +
+
+ +
-
- +
+
+ + {!is_cpu_version ? : null} +
+
+ + + +
-
-
-
- - {!is_cpu_version ? : null} -
-
- - - -
-
-

{t("update_modal.download_latest_and_restart")}

+

{t("update_modal.download_latest_and_restart")}

+
+
@@ -93,23 +97,4 @@ const CurrentVersionLabel = (props) => { return

{t("update_modal.is_latest_version_already")}

; } return

{t("update_modal.is_current_compute_device")}

; -}; - -const PluginUpdateNotification = () => { - const { enabledPluginsList } = usePlugins(); - - // ダウンロード済みのもの or プラグイン最新版が、VRCT最新版(VRCTアプデ後)に非対応のもの - const incompatible_plugins_list = enabledPluginsList().filter(plugin => { - if (!plugin.is_downloaded) return false; - if (!plugin.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !plugin.latest_plugin_info.is_plugin_supported_latest_vrct) return true; - }); - - return ( -
- {incompatible_plugins_list.map(plugin => { - const target_data = plugin.downloaded_plugin_info; - return

{target_data.title}

- })} -
- ); }; \ 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 57881896..4fe27802 100644 --- a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss @@ -3,7 +3,7 @@ height: 100%; display: flex; flex-direction: column; - justify-content: center; + justify-content: safe center; align-items: center; gap: 2.4rem; } @@ -16,6 +16,14 @@ gap: 8rem; } +.update_section_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4rem; +} + .update_section { border: 0.1rem solid var(--dark_600_color); border-radius: 0.4rem; diff --git a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx new file mode 100644 index 00000000..96e1054a --- /dev/null +++ b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx @@ -0,0 +1,61 @@ +import styles from "./PluginCompatibilityList.module.scss"; +import { usePlugins } from "@logics_configs"; +import CheckMarkSvg from "@images/check_mark.svg?react"; +import XSvg from "@images/x_mark.svg?react"; +import WarningSvg from "@images/warning.svg?react"; + +export const PluginCompatibilityList = () => { + const { enabledPluginsList } = usePlugins(); + + // ダウンロード済みのもの + const downloaded_plugin = enabledPluginsList().filter(p => p.is_downloaded); + + // プラグイン最新版が、VRCT最新版(VRCTアプデ後)に非対応のもの + const compatible_plugins_list = []; + const incompatible_plugins_list = []; + for (const p of downloaded_plugin) { + if (!p.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !p.latest_plugin_info?.is_plugin_supported_latest_vrct) { + incompatible_plugins_list.push(p); + } else { + compatible_plugins_list.push(p); + } + } + + const is_any_compatible_plugin = incompatible_plugins_list.length > 0; + + return ( +
+

使用中プラグインの互換性チェック

+
+ {incompatible_plugins_list.map(plugin => { + const target_data = plugin.downloaded_plugin_info; + return ; + })} + {compatible_plugins_list.map(plugin => { + const target_data = plugin.downloaded_plugin_info; + return ; + })} +
+ {is_any_compatible_plugin && +
+ +

VRCT最新バージョンで互換性のないプラグインはアップデート後に無効化されます。引き続き使用したい場合は、各プラグインの更新を待ってください。

+
+ } +
+ ); +}; + +const PluginContainer = ({ target_data, is_compatible }) => { + console.log(target_data.plugin_id); + + return ( +
+

{target_data.title}

+ {is_compatible + ? + : + } +
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss new file mode 100644 index 00000000..0b439619 --- /dev/null +++ b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss @@ -0,0 +1,63 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 1rem; +} + +.title { + font-size: 1.6rem; +} + +.plugins_compatibility_container { + display: flex; + justify-content: center; + align-items: center; + gap: 0.2rem 1rem; + flex-wrap: wrap; +} + +.plugin_box { + display: flex; + justify-content: center; + align-items: center; + padding: 0.4rem 0.6rem; + gap: 0.6rem; +} + +.plugin_label { + font-size: 1.4rem; + color: var(--error_bc_color); + &.is_compatible { + color: var(--primary_300_color); + } +} + + +.check_mark_svg { + width: 1.8rem; + color: var(--primary_300_color); +} +.x_svg { + width: 1.8rem; + color: var(--error_bc_color); +} + +.warning_container { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.warning_svg { + padding-bottom: 0.4rem; + width: 2.4rem; + color: var(--waring_color); + flex-shrink: 0; +} + +.warning_text { + font-size: 1.2rem; +} \ No newline at end of file diff --git a/src-ui/assets/x_mark.svg b/src-ui/assets/x_mark.svg new file mode 100644 index 00000000..e4a0922e --- /dev/null +++ b/src-ui/assets/x_mark.svg @@ -0,0 +1 @@ + \ No newline at end of file