[Update] Plugins: Adjust designs.
Add localizations.
This commit is contained in:
Sakamoto Shiina
@@ -244,7 +244,19 @@ config_page:
|
||||
label: "Open Config File"
|
||||
switch_compute_device:
|
||||
label: "Switch VRCT To CPU/GPU Version"
|
||||
section_label_plugins: Plugins
|
||||
section_label_plugins: Plugins # Exception, It'll be moved later.
|
||||
|
||||
plugins:
|
||||
downloaded_version: "Downloaded version: {{downloaded_version}}"
|
||||
latest_version: "Latest version: {{latest_version}}"
|
||||
available_after_updating: "Available after updating to the latest version"
|
||||
unavailable_downloaded: "Currently unavailable due to incompatibility with the VRCT version in use"
|
||||
no_latest_info: "Unable to retrieve the latest information"
|
||||
using_latest_version: "Using the latest version"
|
||||
available_latest_version: "Latest version available"
|
||||
unavailable_latest_version: "Latest version currently unavailable"
|
||||
available_in_latest_vrct_version: "Available in the latest VRCT version"
|
||||
unavailable_not_downloaded: "Currently unavailable"
|
||||
|
||||
plugin_notifications:
|
||||
downloading: Downloading the plugin.
|
||||
|
||||
@@ -244,4 +244,30 @@ config_page:
|
||||
label: "設定ファイルを開く"
|
||||
switch_compute_device:
|
||||
label: "VRCT CPU/GPUバージョンの切り替え"
|
||||
section_label_plugins: プラグイン
|
||||
section_label_plugins: プラグイン # Exception, It'll be moved later.
|
||||
|
||||
plugins:
|
||||
downloaded_version: "ダウンロード済バージョン: {{downloaded_version}}"
|
||||
latest_version: "最新バージョン: {{latest_version}}"
|
||||
available_after_updating: 最新版にアップデート後 利用可能
|
||||
unavailable_downloaded: 現在利用不可 使用中VRCTバージョンとの互換性なし
|
||||
no_latest_info: 最新情報が取得できません
|
||||
using_latest_version: 最新版を使用中
|
||||
available_latest_version: 最新版を利用可能
|
||||
unavailable_latest_version: 最新版は現在利用不可
|
||||
available_in_latest_vrct_version: VRCT最新版で利用可能
|
||||
unavailable_not_downloaded: 現在利用不可
|
||||
|
||||
plugin_notifications:
|
||||
downloading: プラグインをダウンロード中。
|
||||
downloaded_success: プラグインのダウンロードが完了しました。
|
||||
downloaded_error: プラグインのダウンロードに失敗しました。
|
||||
|
||||
updating: プラグインをアップデート中。
|
||||
updated_success: プラグインのアップデートが完了しました。
|
||||
updated_error: プラグインのアップデートに失敗しました。
|
||||
|
||||
disabled_out_of_support: 現在のバージョンとの互換性がありません。プラグインを無効にしました。
|
||||
|
||||
is_enabled: プラグインを有効にしました。
|
||||
is_disabled: プラグインを無効にしました。
|
||||
@@ -2,6 +2,7 @@ import React from "react";
|
||||
import { SwitchBox } from "../index";
|
||||
import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton";
|
||||
import styles from "./PluginsControlComponent.module.scss";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const PluginsControlComponent = ({
|
||||
variable_state,
|
||||
@@ -9,6 +10,8 @@ export const PluginsControlComponent = ({
|
||||
toggleFunction,
|
||||
downloadStartFunction,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const option = {
|
||||
id: plugin_status.plugin_id,
|
||||
is_pending: plugin_status.is_pending,
|
||||
@@ -19,6 +22,16 @@ export const PluginsControlComponent = ({
|
||||
progress: null,
|
||||
};
|
||||
|
||||
const downloaded_version = plugin_status.downloaded_plugin_info?.plugin_version;
|
||||
const latest_version = plugin_status.latest_plugin_info?.plugin_version;
|
||||
|
||||
const downloaded_version_label = t("config_page.plugins.downloaded_version",
|
||||
{ downloaded_version: downloaded_version }
|
||||
);
|
||||
const latest_version_label = t("config_page.plugins.latest_version",
|
||||
{ latest_version: latest_version }
|
||||
);
|
||||
|
||||
if (plugin_status.is_downloaded) {
|
||||
return (
|
||||
<DownloadedPluginControl
|
||||
@@ -26,6 +39,8 @@ export const PluginsControlComponent = ({
|
||||
plugin_status={plugin_status}
|
||||
toggleFunction={toggleFunction}
|
||||
downloadStartFunction={downloadStartFunction}
|
||||
downloaded_version_label={downloaded_version_label}
|
||||
latest_version_label={latest_version_label}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
@@ -34,6 +49,8 @@ export const PluginsControlComponent = ({
|
||||
option={option}
|
||||
plugin_status={plugin_status}
|
||||
downloadStartFunction={downloadStartFunction}
|
||||
downloaded_version_label={downloaded_version_label}
|
||||
latest_version_label={latest_version_label}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -45,49 +62,51 @@ const DownloadedPluginControl = ({
|
||||
plugin_status,
|
||||
toggleFunction,
|
||||
downloadStartFunction,
|
||||
downloaded_version_label,
|
||||
latest_version_label,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const togglePlugin = () => {
|
||||
toggleFunction(plugin_status.plugin_id);
|
||||
};
|
||||
|
||||
const latest_version = plugin_status.latest_plugin_info?.plugin_version;
|
||||
|
||||
|
||||
if (!plugin_status.downloaded_plugin_info.is_plugin_supported) {
|
||||
if (plugin_status.is_latest_version_available) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新のバージョン: {latest_version}</p>
|
||||
<p>最新版にアップデート後 利用可能</p>
|
||||
<p>{downloaded_version_label}</p>
|
||||
<p>{latest_version_label}</p>
|
||||
<p>{t("config_page.plugins.available_after_updating")}</p>
|
||||
<_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>現在利用不可 使用中VRCTバージョンとの互換性なし</p>
|
||||
<p>{t("config_page.plugins.unavailable_downloaded")}</p>
|
||||
</div>
|
||||
);
|
||||
} else if (plugin_status.is_outdated) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新情報が取得できません</p>
|
||||
<p>{t("config_page.plugins.no_latest_info")}</p>
|
||||
<SwitchBox variable={option} toggleFunction={togglePlugin} />
|
||||
</div>
|
||||
);
|
||||
} else if (plugin_status.is_latest_version_already) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新のバージョン: {latest_version}</p>
|
||||
<p>最新版を使用中</p>
|
||||
<p>{latest_version_label}</p>
|
||||
<p>{t("config_page.plugins.using_latest_version")}</p>
|
||||
<SwitchBox variable={option} toggleFunction={togglePlugin} />
|
||||
</div>
|
||||
);
|
||||
} else if (plugin_status.is_latest_version_available) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新のバージョン: {latest_version}</p>
|
||||
<p>最新版を利用可能</p>
|
||||
<p>{latest_version_label}</p>
|
||||
<p>{t("config_page.plugins.available_latest_version")}</p>
|
||||
<_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
|
||||
<SwitchBox variable={option} toggleFunction={togglePlugin} />
|
||||
</div>
|
||||
@@ -95,7 +114,7 @@ const DownloadedPluginControl = ({
|
||||
} else {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新版は現在利用不可</p>
|
||||
<p>{t("config_page.plugins.available_latest_version")}</p>
|
||||
<SwitchBox variable={option} toggleFunction={togglePlugin} />
|
||||
</div>
|
||||
);
|
||||
@@ -103,28 +122,34 @@ const DownloadedPluginControl = ({
|
||||
};
|
||||
|
||||
|
||||
const NotDownloadedPluginControl = ({ option, plugin_status, downloadStartFunction }) => {
|
||||
const latest_version = plugin_status.latest_plugin_info?.plugin_version;
|
||||
const NotDownloadedPluginControl = ({
|
||||
option,
|
||||
plugin_status,
|
||||
downloadStartFunction,
|
||||
downloaded_version_label,
|
||||
latest_version_label,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (plugin_status.is_latest_version_available) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新バージョン: {latest_version}</p>
|
||||
<p>{latest_version_label}</p>
|
||||
<_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
|
||||
</div>
|
||||
);
|
||||
} else if (plugin_status.latest_plugin_info?.is_plugin_supported_latest_vrct) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新のバージョン: {latest_version}</p>
|
||||
<p>VRCT最新版で利用可能</p>
|
||||
<p>{latest_version_label}</p>
|
||||
<p>{t("config_page.plugins.available_in_latest_vrct_version")}</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p>最新バージョン: {latest_version}</p>
|
||||
<p>現在利用不可</p>
|
||||
<p>{latest_version_label}</p>
|
||||
<p>{t("config_page.plugins.unavailable_not_downloaded")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@import "@scss_mixins";
|
||||
|
||||
.switchbox_container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
@@ -61,14 +61,18 @@ const PluginDownloadContainer = () => {
|
||||
|
||||
const variable_state = currentSavedPluginsStatus.state;
|
||||
|
||||
const filtered_plugins_data = currentPluginsData.data.filter(plugin => !plugin.is_outdated)
|
||||
|
||||
// plugin_id で ABC 順にソート
|
||||
const sorted_plugins_data = [...currentPluginsData.data].sort((a, b) =>
|
||||
const sorted_plugins_data = filtered_plugins_data.sort((a, b) =>
|
||||
a.plugin_id.localeCompare(b.plugin_id)
|
||||
);
|
||||
|
||||
// Duplicate
|
||||
const is_failed_to_fetch = currentFetchedPluginsInfo.state === "error";
|
||||
const is_fetching = currentFetchedPluginsInfo.state === "pending";
|
||||
console.log(sorted_plugins_data);
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.plugins_list_container}>
|
||||
@@ -88,33 +92,28 @@ const PluginDownloadContainer = () => {
|
||||
|
||||
return (
|
||||
<div key={plugin.plugin_id} className={styles.plugin_wrapper}>
|
||||
<div className={styles.labels_wrapper}>
|
||||
<p className={styles.title}>
|
||||
{target_locale.title}
|
||||
</p>
|
||||
<p className={styles.plugin_id}>{plugin.plugin_id}</p>
|
||||
<p className={styles.desc}>
|
||||
{target_locale.desc}
|
||||
</p>
|
||||
{/* <p className={styles.plugin_id}>{plugin.plugin_id}</p> */}
|
||||
</div>
|
||||
<div className={styles.plugin_info_wrapper}>
|
||||
{plugin.is_error ? (
|
||||
<p style={{ color: "red" }}>Error: {plugin.error_message}</p>
|
||||
) : (
|
||||
<div className={styles.plugin_info_wrapper}>
|
||||
<div className={styles.plugin_info}>
|
||||
<p>
|
||||
{plugin.is_downloaded
|
||||
? `現在のバージョン: ${plugin.downloaded_plugin_info?.plugin_version}`
|
||||
: null}
|
||||
</p>
|
||||
</div>
|
||||
<PluginsControlComponent
|
||||
variable_state={variable_state}
|
||||
toggleFunction={toggleFunction}
|
||||
downloadStartFunction={downloadStartFunction}
|
||||
plugin_status={plugin}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -13,30 +13,45 @@
|
||||
.plugin_wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0.1rem solid var(--dark_750_color);
|
||||
}
|
||||
}
|
||||
|
||||
.labels_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.plugin_info_wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.plugin_id {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.download_button {
|
||||
background-color: var(--dark_750_color);
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 1.2rem;
|
||||
.desc {
|
||||
font-size: 1.4rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--dark_500_color);
|
||||
}
|
||||
// .plugin_id {
|
||||
// font-size: 1rem;
|
||||
// color: var(--dark_600_color);
|
||||
// width: 100%;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
Reference in New Issue
Block a user