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

Resolve #5978

Browse Source
This commit is contained in:
syuilo
2020-02-19 06:16:49 +09:00
parent 98a87ee75f
commit d1e9e74cb8
7 changed files with 114 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,17 @@
<template>
<div class="mk-notifications">
<div class="contents">
<x-list class="notifications" :items="items" v-slot="{ item: notification, i }">
<x-notification :notification="notification" :with-time="true" :full="true" class="notification" :key="notification.id"/>
</x-list>
<div class="mk-notifications" :class="{ page }">
<x-list class="notifications" :items="items" v-slot="{ item: notification }">
<x-notification :notification="notification" :with-time="true" :full="true" class="notification" :class="{ _panel: page }" :key="notification.id"/>
</x-list>
<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
</button>
<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
</button>
<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
<mk-error v-if="error" @retry="init()"/>
</div>
<mk-error v-if="error" @retry="init()"/>
</div>
</template>
@@ -42,7 +40,7 @@ export default Vue.extend({
type: String,
required: false
},
wide: {
page: {
type: Boolean,
required: false,
default: false
@@ -93,11 +91,15 @@ export default Vue.extend({
<style lang="scss" scoped>
.mk-notifications {
> .contents {
overflow: auto;
height: 100%;
padding: 8px 8px 0 8px;
&.page {
> .notifications {
> ::v-deep * {
margin-bottom: var(--margin);
}
}
}
&:not(.page) {
> .notifications {
> ::v-deep * {
margin-bottom: 8px;
@@ -109,28 +111,28 @@ export default Vue.extend({
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
}
> .more {
display: block;
width: 100%;
padding: 16px;
> .more {
display: block;
width: 100%;
padding: 16px;
> [data-icon] {
margin-right: 4px;
}
> [data-icon] {
margin-right: 4px;
}
}
> .empty {
margin: 0;
padding: 16px;
text-align: center;
color: var(--fg);
}
> .empty {
margin: 0;
padding: 16px;
text-align: center;
color: var(--fg);
}
> .placeholder {
padding: 32px;
opacity: 0.3;
}
> .placeholder {
padding: 32px;
opacity: 0.3;
}
}
</style>