diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/notes.vue | 14 | ||||
| -rw-r--r-- | src/client/components/notification.vue | 35 |
2 files changed, 23 insertions, 26 deletions
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index 65dda17575..0cf4dee2dd 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -1,6 +1,6 @@ <template> <div class="mk-notes" v-size="[{ max: 500 }]"> - <div class="empty" v-if="empty"> + <div class="_fullinfo" v-if="empty"> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> <div>{{ $t('noNotes') }}</div> </div> @@ -90,18 +90,6 @@ export default Vue.extend({ <style lang="scss" scoped> .mk-notes { - > .empty { - padding: 32px; - text-align: center; - - > img { - vertical-align: bottom; - height: 128px; - margin-bottom: 16px; - border-radius: 16px; - } - } - > .notes { > ::v-deep *:not(:last-child) { margin-bottom: var(--marginFull); diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue index d768c0b074..f415887e76 100644 --- a/src/client/components/notification.vue +++ b/src/client/components/notification.vue @@ -1,22 +1,24 @@ <template> <div class="mk-notification" :class="notification.type" v-size="[{ max: 500 }, { max: 600 }]"> <div class="head"> - <mk-avatar class="avatar" :user="notification.user"/> - <div class="icon" :class="notification.type"> + <mk-avatar v-if="notification.user" class="icon" :user="notification.user"/> + <img v-else class="icon" :src="notification.icon" alt=""/> + <div class="sub-icon" :class="notification.type"> <fa :icon="faPlus" v-if="notification.type === 'follow'"/> - <fa :icon="faClock" v-if="notification.type === 'receiveFollowRequest'"/> - <fa :icon="faCheck" v-if="notification.type === 'followRequestAccepted'"/> - <fa :icon="faIdCardAlt" v-if="notification.type === 'groupInvited'"/> - <fa :icon="faRetweet" v-if="notification.type === 'renote'"/> - <fa :icon="faReply" v-if="notification.type === 'reply'"/> - <fa :icon="faAt" v-if="notification.type === 'mention'"/> - <fa :icon="faQuoteLeft" v-if="notification.type === 'quote'"/> - <x-reaction-icon v-if="notification.type === 'reaction'" :reaction="notification.reaction" :no-style="true"/> + <fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/> + <fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/> + <fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/> + <fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/> + <fa :icon="faReply" v-else-if="notification.type === 'reply'"/> + <fa :icon="faAt" v-else-if="notification.type === 'mention'"/> + <fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/> + <x-reaction-icon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :no-style="true"/> </div> </div> <div class="tail"> <header> - <router-link class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link> + <router-link v-if="notification.user" class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link> + <span v-else>{{ notification.header }}</span> <mk-time :time="notification.createdAt" v-if="withTime"/> </header> <router-link v-if="notification.type === 'reaction'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)"> @@ -42,6 +44,9 @@ <span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span> <span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span> <span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $t('reject') }}</button></div></span> + <span v-if="notification.type === 'app'" class="text"> + <mfm :text="notification.body" :nowrap="!full"/> + </span> </div> </div> </template> @@ -142,14 +147,14 @@ export default Vue.extend({ height: 42px; margin-right: 8px; - > .avatar { + > .icon { display: block; width: 100%; height: 100%; border-radius: 6px; } - > .icon { + > .sub-icon { position: absolute; z-index: 1; bottom: -2px; @@ -163,6 +168,10 @@ export default Vue.extend({ font-size: 12px; pointer-events: none; + &:empty { + display: none; + } + > * { color: #fff; width: 100%; |