diff --git a/CHANGELOG.md b/CHANGELOG.md index db969a63c261..cfc07476e015 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ - ### Client -- +- Enhance: フォロワーへのメッセージ欄のデザイン改良 ### Server - diff --git a/locales/index.d.ts b/locales/index.d.ts index 32c5a2164856..29c93453ff8c 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5148,6 +5148,10 @@ export interface Locale extends ILocale { * パスキーの検証に成功しましたが、パスワードレスログインが無効になっています。 */ "passkeyVerificationSucceededButPasswordlessLoginDisabled": string; + /** + * フォロワーへのメッセージ + */ + "messageToFollower": string; "_delivery": { /** * 配信状態 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index eebc4c995fc4..678af6987c82 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1283,6 +1283,7 @@ signinWithPasskey: "パスキーでログイン" unknownWebAuthnKey: "登録されていないパスキーです。" passkeyVerificationFailed: "パスキーの検証に失敗しました。" passkeyVerificationSucceededButPasswordlessLoginDisabled: "パスキーの検証に成功しましたが、パスワードレスログインが無効になっています。" +messageToFollower: "フォロワーへのメッセージ" _delivery: status: "配信状態" diff --git a/packages/frontend/src/components/MkFukidashi.vue b/packages/frontend/src/components/MkFukidashi.vue new file mode 100644 index 000000000000..ba82eb442fc6 --- /dev/null +++ b/packages/frontend/src/components/MkFukidashi.vue @@ -0,0 +1,100 @@ + + + + + + + diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index ae8ac88361e3..93af534a9bc1 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -48,9 +48,10 @@ SPDX-License-Identifier: AGPL-3.0-only
-
- -
+ +
{{ i18n.ts.messageToFollower }}
+
+
@@ -161,6 +162,7 @@ import * as Misskey from 'misskey-js'; import MkNote from '@/components/MkNote.vue'; import MkFollowButton from '@/components/MkFollowButton.vue'; import MkAccountMoved from '@/components/MkAccountMoved.vue'; +import MkFukidashi from '@/components/MkFukidashi.vue'; import MkRemoteCaution from '@/components/MkRemoteCaution.vue'; import MkTextarea from '@/components/MkTextarea.vue'; import MkOmit from '@/components/MkOmit.vue'; @@ -467,7 +469,18 @@ onUnmounted(() => { > .followedMessage { padding: 24px 24px 0 154px; - font-size: 0.9em; + + > .fukidashi { + display: block; + --fukidashi-bg: color-mix(in srgb, var(--love), var(--panel) 85%); + --fukidashi-radius: 16px; + font-size: 0.9em; + + .messageHeader { + opacity: 0.7; + font-size: 0.85em; + } + } } > .roles {