sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak UI

Browse Source
This commit is contained in:
syuilo
2021-04-17 00:12:50 +09:00
parent e62d7bc1ba
commit 27c373ddf4
9 changed files with 89 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/client/components/notifications.vue
View File

@@ -1,21 +1,23 @@
<template>
<div class="mfcuwfyp _noGap_ _magnetParent">
<transition name="fade" mode="out-in">
<MkLoading v-if="fetching"/>
<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
</XList>
<MkError v-else-if="error" @retry="init()"/>
<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</button>
<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
<p class="empty" v-if="empty">{{ $ts.noNotifications }}</p>
<div v-else class="_magnetParent">
<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }" :no-gap="true">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
</XList>
<MkError v-if="error" @retry="init()"/>
</div>
<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</button>
</div>
</transition>
</template>
<script lang="ts">
@@ -122,17 +124,19 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.mfcuwfyp {
> .empty {
margin: 0;
padding: 16px;
text-align: center;
color: var(--fg);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
> .placeholder {
padding: 32px;
opacity: 0.3;
}
.mfcuwfyp {
margin: 0;
padding: 16px;
text-align: center;
color: var(--fg);
}
</style>