フォローリクエストのUI改善 (#10275)

* フォローリクエストのUI改善

* Update CHANGELOG.md
This commit is contained in:
Ebise Lutica 2023-03-09 12:17:34 +09:00 committed by GitHub
parent 965433bea9
commit 9d1a874ddc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 13 deletions

View File

@ -16,6 +16,7 @@ You should also include the user name that made the change.
- ユーザーごとにRenoteをミュートできるように
- ノートごとに絵文字リアクションを受け取るか設定できるように
- enhance(client): DM作成時にメンションも含むように
- enhance(client): フォロー申請のボタンのデザインを改善
### Bugfixes
-

View File

@ -69,8 +69,9 @@
<span v-else-if="notification.type === 'followRequestAccepted'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
<template v-else-if="notification.type === 'receiveFollowRequest'">
<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}</span>
<div v-if="full && !followRequestDone">
<button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button>
<div v-if="full && !followRequestDone" :class="$style.followRequestCommands">
<MkButton :class="$style.followRequestCommandButton" rounded primary @click="acceptFollowRequest()"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
<MkButton :class="$style.followRequestCommandButton" rounded danger @click="rejectFollowRequest()"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
</div>
</template>
<span v-else-if="notification.type === 'app'" :class="$style.text">
@ -87,6 +88,7 @@ import * as misskey from 'misskey-js';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
import XReactionTooltip from '@/components/MkReactionTooltip.vue';
import MkButton from '@/components/MkButton.vue';
import { getNoteSummary } from '@/scripts/get-note-summary';
import { notePage } from '@/filters/note';
import { userPage } from '@/filters/user';
@ -294,6 +296,16 @@ useTooltip(reactionRef, (showing) => {
margin-left: 4px;
}
.followRequestCommands {
display: flex;
gap: 8px;
max-width: 300px;
margin-top: 8px;
}
.followRequestCommandButton {
flex: 1;
}
@container (max-width: 600px) {
.root {
padding: 16px;

View File

@ -18,12 +18,9 @@
<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
<p class="acct">@{{ acct(req.follower) }}</p>
</div>
<div v-if="req.follower.description" class="description" :title="req.follower.description">
<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :plain="true" :nowrap="true"/>
</div>
<div class="actions">
<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
<button class="_button" @click="reject(req.follower)"><i class="ti ti-x"></i></button>
<div class="commands">
<MkButton class="command" rounded primary @click="accept(req.follower)"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
<MkButton class="command" rounded danger @click="reject(req.follower)"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
</div>
</div>
</div>
@ -37,6 +34,7 @@
<script lang="ts" setup>
import { shallowRef, computed } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import { userPage, acct } from '@/filters/user';
import * as os from '@/os';
import { i18n } from '@/i18n';
@ -90,13 +88,11 @@ definePageMetadata(computed(() => ({
display: flex;
width: calc(100% - 54px);
position: relative;
flex-wrap: wrap;
gap: 8px;
> .name {
width: 45%;
@media (max-width: 500px) {
width: 100%;
}
flex: 1 1 50%;
> .name,
> .acct {
@ -136,6 +132,11 @@ definePageMetadata(computed(() => ({
}
}
> .commands {
display: flex;
gap: 8px;
}
> .actions {
position: absolute;
top: 0;