enhance(frontend): フォロワーへのメッセージ欄を改良 (#14656)
* enhance(frontend): フォロワーへのメッセージ欄を改良 * Update Changelog
This commit is contained in:
かっこかり
GitHub
parent
4f34a4e4d8
commit
ca8cc015b0
5 changed files with 123 additions and 5 deletions
|
|
@ -4,7 +4,7 @@
|
|||
-
|
||||
|
||||
### Client
|
||||
-
|
||||
- Enhance: フォロワーへのメッセージ欄のデザイン改良
|
||||
|
||||
### Server
|
||||
-
|
||||
|
|
|
|||
4
locales/index.d.ts
vendored
4
locales/index.d.ts
vendored
|
|
@ -5148,6 +5148,10 @@ export interface Locale extends ILocale {
|
|||
* パスキーの検証に成功しましたが、パスワードレスログインが無効になっています。
|
||||
*/
|
||||
"passkeyVerificationSucceededButPasswordlessLoginDisabled": string;
|
||||
/**
|
||||
* フォロワーへのメッセージ
|
||||
*/
|
||||
"messageToFollower": string;
|
||||
"_delivery": {
|
||||
/**
|
||||
* 配信状態
|
||||
|
|
|
|||
|
|
@ -1283,6 +1283,7 @@ signinWithPasskey: "パスキーでログイン"
|
|||
unknownWebAuthnKey: "登録されていないパスキーです。"
|
||||
passkeyVerificationFailed: "パスキーの検証に失敗しました。"
|
||||
passkeyVerificationSucceededButPasswordlessLoginDisabled: "パスキーの検証に成功しましたが、パスワードレスログインが無効になっています。"
|
||||
messageToFollower: "フォロワーへのメッセージ"
|
||||
|
||||
_delivery:
|
||||
status: "配信状態"
|
||||
|
|
|
|||
100
packages/frontend/src/components/MkFukidashi.vue
Normal file
100
packages/frontend/src/components/MkFukidashi.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
$style.root,
|
||||
tail === 'left' ? $style.left : $style.right,
|
||||
negativeMargin === true && $style.negativeMergin,
|
||||
shadow === true && $style.shadow,
|
||||
]"
|
||||
>
|
||||
<div :class="$style.bg">
|
||||
<svg v-if="tail !== 'none'" :class="$style.tail" version="1.1" viewBox="0 0 14.597 14.58" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-173.71 -87.184)">
|
||||
<path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div :class="$style.content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
withDefaults(defineProps<{
|
||||
tail?: 'left' | 'right' | 'none';
|
||||
negativeMargin?: boolean;
|
||||
shadow?: boolean;
|
||||
}>(), {
|
||||
tail: 'right',
|
||||
negativeMargin: false,
|
||||
shadow: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.root {
|
||||
--fukidashi-radius: var(--radius);
|
||||
--fukidashi-bg: var(--panel);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-height: calc(var(--fukidashi-radius) * 2);
|
||||
padding-top: calc(var(--fukidashi-radius) * .13);
|
||||
|
||||
&.shadow {
|
||||
filter: drop-shadow(0 4px 32px var(--shadow));
|
||||
}
|
||||
|
||||
&.left {
|
||||
padding-left: calc(var(--fukidashi-radius) * .13);
|
||||
|
||||
&.negativeMergin {
|
||||
margin-left: calc(calc(var(--fukidashi-radius) * .13) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
padding-right: calc(var(--fukidashi-radius) * .13);
|
||||
|
||||
&.negativeMergin {
|
||||
margin-right: calc(calc(var(--fukidashi-radius) * .13) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--fukidashi-bg);
|
||||
border-radius: var(--fukidashi-radius);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.tail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: calc(var(--fukidashi-radius) * 1.13);
|
||||
height: auto;
|
||||
fill: var(--fukidashi-bg);
|
||||
}
|
||||
|
||||
.left .tail {
|
||||
left: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.right .tail {
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -48,9 +48,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="user.followedMessage != null" class="followedMessage">
|
||||
<div style="border: solid 1px var(--love); border-radius: 6px; background: color-mix(in srgb, var(--love), transparent 90%); padding: 6px 8px;">
|
||||
<Mfm :text="user.followedMessage" :author="user"/>
|
||||
</div>
|
||||
<MkFukidashi class="fukidashi" :tail="narrow ? 'none' : 'left'" negativeMargin shadow>
|
||||
<div class="messageHeader">{{ i18n.ts.messageToFollower }}</div>
|
||||
<div><Mfm :text="user.followedMessage" :author="user"/></div>
|
||||
</MkFukidashi>
|
||||
</div>
|
||||
<div v-if="user.roles.length > 0" class="roles">
|
||||
<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color }">
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue