From d6e85ffb596632892347b93661b7ddb9f66db6c6 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 18 Dec 2021 14:55:53 +0900 Subject: [PATCH] feat(client): improve toast component and show welcome message --- locales/ja-JP.yml | 1 + .../src/components/notification-toast.vue | 74 +++++++++++++++++++ packages/client/src/components/toast.vue | 71 +++++++++--------- packages/client/src/init.ts | 14 +++- packages/client/src/os.ts | 4 +- packages/client/src/ui/_common_/common.vue | 2 +- 6 files changed, 126 insertions(+), 40 deletions(-) create mode 100644 packages/client/src/components/notification-toast.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index daac05c66..084fd6448 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -816,6 +816,7 @@ hide: "隠す" leaveGroup: "グループから抜ける" leaveGroupConfirm: "「{name}」から抜けますか?" useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示" +welcomeBackWithName: "おかえりなさい、{name}さん" _emailUnavailable: used: "既に使用されています" diff --git a/packages/client/src/components/notification-toast.vue b/packages/client/src/components/notification-toast.vue new file mode 100644 index 000000000..5449409cc --- /dev/null +++ b/packages/client/src/components/notification-toast.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue index 02b61e5be..d9f0aa5ea 100644 --- a/packages/client/src/components/toast.vue +++ b/packages/client/src/components/toast.vue @@ -1,25 +1,25 @@ diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index f0368cc1d..82a1e169c 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -26,7 +26,7 @@ import { router } from '@/router'; import { applyTheme } from '@/scripts/theme'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; import { i18n } from '@/i18n'; -import { stream, confirm, alert, post, popup } from '@/os'; +import { stream, confirm, alert, post, popup, toast } from '@/os'; import * as sound from '@/scripts/sound'; import { $i, refreshAccount, login, updateAccount, signout } from '@/account'; import { defaultStore, ColdDeviceStorage } from '@/store'; @@ -342,6 +342,18 @@ if ($i) { }); } + const lastUsed = localStorage.getItem('lastUsed'); + if (lastUsed) { + const lastUsedDate = parseInt(lastUsed, 10); + // 二時間以上前なら + if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) { + toast(i18n.t('welcomeBackWithName', { + name: $i.name || $i.username, + })); + } + } + localStorage.setItem('lastUsed', Date.now().toString()); + if ('Notification' in window) { // 許可を得ていなかったらリクエスト if (Notification.permission === 'default') { diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts index 665151b01..4ed69e0ec 100644 --- a/packages/client/src/os.ts +++ b/packages/client/src/os.ts @@ -221,7 +221,9 @@ export function modalPageWindow(path: string) { } export function toast(message: string) { - // TODO + popup(import('@/components/toast.vue'), { + message + }, {}, 'closed'); } export function alert(props: { diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue index 68f5f779f..956ec556c 100644 --- a/packages/client/src/ui/_common_/common.vue +++ b/packages/client/src/ui/_common_/common.vue @@ -34,7 +34,7 @@ export default defineComponent({ id: notification.id }); - popup(import('@/components/toast.vue'), { + popup(import('@/components/notification-toast.vue'), { notification }, {}, 'closed'); }