oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

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

Browse source 
* フォローリクエストの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
Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/components/MkNotification.vue
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;