diff --git a/CHANGELOG.md b/CHANGELOG.md index 923e8680f8..f6cbcb9af6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ You should also include the user name that made the change. - ユーザーごとにRenoteをミュートできるように - ノートごとに絵文字リアクションを受け取るか設定できるように - enhance(client): DM作成時にメンションも含むように +- enhance(client): フォロー申請のボタンのデザインを改善 ### Bugfixes - diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index 38bf416ea8..b60967de02 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -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; diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue index 835dd0b54c..a51d1c78a4 100644 --- a/packages/frontend/src/pages/follow-requests.vue +++ b/packages/frontend/src/pages/follow-requests.vue @@ -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;