This commit is contained in:
parent
f51ad26fa1
commit
8f5bdd34a8
4 changed files with 107 additions and 13 deletions
|
@ -236,6 +236,9 @@ desktop:
|
|||
add-reaction: "Add your reaction"
|
||||
detail: "Show detail"
|
||||
|
||||
mk-notifications:
|
||||
more: "More"
|
||||
|
||||
mk-notifications-home-widget:
|
||||
title: "Notifications"
|
||||
settings: "Notification settings"
|
||||
|
@ -356,6 +359,7 @@ mobile:
|
|||
empty-timeline: "There is no posts"
|
||||
|
||||
mk-notifications:
|
||||
more: "More"
|
||||
empty: "No notifications"
|
||||
|
||||
mk-post-detail:
|
||||
|
|
|
@ -236,6 +236,9 @@ desktop:
|
|||
add-reaction: "リアクション"
|
||||
detail: "詳細"
|
||||
|
||||
mk-notifications:
|
||||
more: "もっと見る"
|
||||
|
||||
mk-notifications-home-widget:
|
||||
title: "通知"
|
||||
settings: "通知の設定"
|
||||
|
@ -356,6 +359,7 @@ mobile:
|
|||
empty-timeline: "表示する投稿がありません。誰かしらをフォローするなどしましょう。"
|
||||
|
||||
mk-notifications:
|
||||
more: "もっと見る"
|
||||
empty: "ありません!"
|
||||
|
||||
mk-post-detail:
|
||||
|
|
|
@ -63,8 +63,11 @@
|
|||
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
|
||||
</virtual>
|
||||
</div>
|
||||
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
||||
{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
|
||||
</button>
|
||||
<p class="empty" if={ notifications.length == 0 && !loading }>ありません!</p>
|
||||
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
|
||||
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
@ -168,6 +171,12 @@
|
|||
i
|
||||
margin-right 8px
|
||||
|
||||
> .more
|
||||
display block
|
||||
width 100%
|
||||
padding 16px
|
||||
color #555
|
||||
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
|
@ -197,7 +206,16 @@
|
|||
this.loading = true;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.api('i/notifications').then(notifications => {
|
||||
const max = 10;
|
||||
|
||||
this.api('i/notifications', {
|
||||
limit: max + 1
|
||||
}).then(notifications => {
|
||||
if (notifications.length == max + 1) {
|
||||
this.moreNotifications = true;
|
||||
notifications.pop();
|
||||
}
|
||||
|
||||
this.update({
|
||||
loading: false,
|
||||
notifications: notifications
|
||||
|
@ -211,11 +229,6 @@
|
|||
this.stream.off('notification', this.onNotification);
|
||||
});
|
||||
|
||||
this.onNotification = notification => {
|
||||
this.notifications.unshift(notification);
|
||||
this.update();
|
||||
};
|
||||
|
||||
this.on('update', () => {
|
||||
this.notifications.forEach(notification => {
|
||||
const date = new Date(notification.created_at).getDate();
|
||||
|
@ -224,5 +237,35 @@
|
|||
notification._datetext = `${month}月 ${date}日`;
|
||||
});
|
||||
});
|
||||
|
||||
this.onNotification = notification => {
|
||||
this.notifications.unshift(notification);
|
||||
this.update();
|
||||
};
|
||||
|
||||
this.fetchMoreNotifications = () => {
|
||||
this.update({
|
||||
fetchingMoreNotifications: true
|
||||
});
|
||||
|
||||
const max = 30;
|
||||
|
||||
this.api('i/notifications', {
|
||||
folder_id: this.folder ? this.folder.id : null,
|
||||
limit: max + 1,
|
||||
max_id: this.notifications[this.notifications.length - 1]._id
|
||||
}).then(notifications => {
|
||||
if (notifications.length == max + 1) {
|
||||
this.moreNotifications = true;
|
||||
notifications.pop();
|
||||
} else {
|
||||
this.moreNotifications = false;
|
||||
}
|
||||
this.update({
|
||||
notifications: this.notifications.concat(notifications),
|
||||
fetchingMoreNotifications: false
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-notifications>
|
||||
|
|
|
@ -5,6 +5,9 @@
|
|||
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
|
||||
</virtual>
|
||||
</div>
|
||||
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
||||
{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
|
||||
</button>
|
||||
<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
|
||||
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<style>
|
||||
|
@ -38,6 +41,12 @@
|
|||
i
|
||||
margin-right 8px
|
||||
|
||||
> .more
|
||||
display block
|
||||
width 100%
|
||||
padding 16px
|
||||
color #555
|
||||
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
|
@ -65,7 +74,16 @@
|
|||
this.loading = true;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.api('i/notifications').then(notifications => {
|
||||
const max = 10;
|
||||
|
||||
this.api('i/notifications', {
|
||||
limit: max + 1
|
||||
}).then(notifications => {
|
||||
if (notifications.length == max + 1) {
|
||||
this.moreNotifications = true;
|
||||
notifications.pop();
|
||||
}
|
||||
|
||||
this.update({
|
||||
loading: false,
|
||||
notifications: notifications
|
||||
|
@ -81,11 +99,6 @@
|
|||
this.stream.off('notification', this.onNotification);
|
||||
});
|
||||
|
||||
this.onNotification = notification => {
|
||||
this.notifications.unshift(notification);
|
||||
this.update();
|
||||
};
|
||||
|
||||
this.on('update', () => {
|
||||
this.notifications.forEach(notification => {
|
||||
const date = new Date(notification.created_at).getDate();
|
||||
|
@ -94,5 +107,35 @@
|
|||
notification._datetext = `${month}月 ${date}日`;
|
||||
});
|
||||
});
|
||||
|
||||
this.onNotification = notification => {
|
||||
this.notifications.unshift(notification);
|
||||
this.update();
|
||||
};
|
||||
|
||||
this.fetchMoreNotifications = () => {
|
||||
this.update({
|
||||
fetchingMoreNotifications: true
|
||||
});
|
||||
|
||||
const max = 30;
|
||||
|
||||
this.api('i/notifications', {
|
||||
folder_id: this.folder ? this.folder.id : null,
|
||||
limit: max + 1,
|
||||
max_id: this.notifications[this.notifications.length - 1]._id
|
||||
}).then(notifications => {
|
||||
if (notifications.length == max + 1) {
|
||||
this.moreNotifications = true;
|
||||
notifications.pop();
|
||||
} else {
|
||||
this.moreNotifications = false;
|
||||
}
|
||||
this.update({
|
||||
notifications: this.notifications.concat(notifications),
|
||||
fetchingMoreNotifications: false
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-notifications>
|
||||
|
|
Loading…
Reference in a new issue