diff --git a/locales/en.yml b/locales/en.yml index 24bb73a8..9e133bed 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -269,6 +269,9 @@ config_page: websocket_port: label: "WebSocket Port" + notifications: + save_success: "Settings have been saved" + plugin_notifications: downloading: Downloading the plugin. downloaded_success: Downloaded successfully. diff --git a/locales/ja.yml b/locales/ja.yml index bd0ffe60..b2ff2ad8 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -269,6 +269,9 @@ config_page: websocket_port: label: "WebSocket Port" + notifications: + save_success: "設定を保存しました。" + plugin_notifications: downloading: プラグインをダウンロード中。 downloaded_success: プラグインのダウンロードが完了しました。 diff --git a/src-ui/app/others/snackbar_controller/ReactToastifyOverrideClass.scss b/src-ui/app/others/snackbar_controller/ReactToastifyOverrideClass.scss index d8d3045e..5e0a2539 100644 --- a/src-ui/app/others/snackbar_controller/ReactToastifyOverrideClass.scss +++ b/src-ui/app/others/snackbar_controller/ReactToastifyOverrideClass.scss @@ -138,7 +138,7 @@ .fade_out { opacity: 1; animation-name: fade_out; - animation-duration: 0.2s; - animation-timing-function: ease-out; + animation-duration: 0.1s; + animation-timing-function: ease-in; animation-fill-mode: forwards; } \ No newline at end of file diff --git a/src-ui/app/others/snackbar_controller/SnackbarController.jsx b/src-ui/app/others/snackbar_controller/SnackbarController.jsx index b617b98a..fe692c10 100644 --- a/src-ui/app/others/snackbar_controller/SnackbarController.jsx +++ b/src-ui/app/others/snackbar_controller/SnackbarController.jsx @@ -35,14 +35,13 @@ export const SnackbarController = () => { } ); - let hideDuration = 5000; + let hide_duration = 5000; if (settings.options?.hide_duration === null) { - hideDuration = false; + hide_duration = false; } else if (Number(settings.options?.hide_duration)) { - hideDuration = Number(settings.options?.hide_duration); + hide_duration = Number(settings.options?.hide_duration); } - const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false; useEffect(() => { if (!settings.is_open) return; @@ -50,22 +49,29 @@ export const SnackbarController = () => { const message_text = settings.message; const category_id = settings.category_id ? settings.category_id : message_text; - setContainerKey(prevKey => prevKey + 1); + const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false; + + const asyncShowNotification = async () => { + setTimeout(() => { + toast(message_text, { + toastId: category_id, + type: settings.status, + autoClose: hide_duration, + transition: CustomTransition, + toastClassName: snackbar_classname, + hideProgressBar: to_hide_progress_bar, + progressClassName: styles.toast_progress, + closeButton: , + onClose: () => { + closeNotification(); + }, + }); + }, 100); + }; + + setContainerKey(prevKey => prevKey + 1); + asyncShowNotification(); - setTimeout(() => { - toast(message_text, { - toastId: category_id, - type: settings.status, - autoClose: hideDuration, - transition: CustomTransition, - toastClassName: snackbar_classname, - progressClassName: styles.toast_progress, - closeButton: , - onClose: () => { - closeNotification(); - }, - }); - }, 50); }, [settings]); return ( @@ -73,7 +79,7 @@ export const SnackbarController = () => { key={containerKey} position="bottom-left" transition={CustomTransition} - hideProgressBar={to_hide_progress_bar} + hideProgressBar={false} newestOnTop={false} closeOnClick={false} pauseOnFocusLoss={false} diff --git a/src-ui/logics/common/useNotificationStatus.js b/src-ui/logics/common/useNotificationStatus.js index 6c9614cd..9667aaba 100644 --- a/src-ui/logics/common/useNotificationStatus.js +++ b/src-ui/logics/common/useNotificationStatus.js @@ -1,7 +1,9 @@ import { useStore_NotificationStatus } from "@store"; +import { useI18n } from "@useI18n"; export const useNotificationStatus = () => { const { currentNotificationStatus, updateNotificationStatus } = useStore_NotificationStatus(); + const { t } = useI18n(); const showNotification_Warning = (message, options = {}) => { updateNotificationStatus({ @@ -34,12 +36,12 @@ export const useNotificationStatus = () => { }; const showNotification_SaveSuccess = (options = {}) => { - options = { hide_duration: 2000, to_hide_progress_bar: true, ...options }; + options = { hide_duration: 1000, to_hide_progress_bar: true, ...options }; updateNotificationStatus({ status: "success", is_open: true, - category_id: (options.category_id) ? options.category_id : null, - message: "設定の適用と、保存が完了しました。", + category_id: "save_success", + message: t("config_page.notifications.save_success"), options: options, }); }; diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js index 42f7d5a9..a467aeb7 100644 --- a/src-ui/logics/configs/plugins/usePlugins.js +++ b/src-ui/logics/configs/plugins/usePlugins.js @@ -283,6 +283,10 @@ export const usePlugins = () => { }; const toggleSavedPluginsStatus = (target_plugin_id) => { + const successPluginNotification = (message) => showNotification_Success(message, { + hide_duration: 1000, + category_id: "to_enable_plugin" + }); const is_exists = currentSavedPluginsStatus.data.some( (d) => d.plugin_id === target_plugin_id ); @@ -292,8 +296,8 @@ export const usePlugins = () => { if (d.plugin_id === target_plugin_id) { d.is_enabled = !d.is_enabled; (d.is_enabled) - ? showNotification_Success(t("plugin_notifications.is_enabled")) - : showNotification_Success(t("plugin_notifications.is_disabled")); + ? successPluginNotification(t("plugin_notifications.is_enabled")) + : successPluginNotification(t("plugin_notifications.is_disabled")); } return d; }); @@ -303,7 +307,7 @@ export const usePlugins = () => { plugin_id: target_plugin_id, is_enabled: true, }); - showNotification_Success(t("plugin_notifications.is_enabled")) + successPluginNotification(t("plugin_notifications.is_enabled")) } // 「currentPluginsData.data」でis_downloadedがtrueのものだけ残す