natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

#359

This commit is contained in:
syuilo 2017-06-07 01:59:02 +09:00
parent f51ad26fa1
commit 8f5bdd34a8
4 changed files with 107 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
locales/en.yml
View File

@ -236,6 +236,9 @@ desktop:
add-reaction: "Add your reaction" add-reaction: "Add your reaction"
detail: "Show detail" detail: "Show detail"
mk-notifications:
more: "More"
mk-notifications-home-widget: mk-notifications-home-widget:
title: "Notifications" title: "Notifications"
settings: "Notification settings" settings: "Notification settings"
@ -356,6 +359,7 @@ mobile:
empty-timeline: "There is no posts" empty-timeline: "There is no posts"
mk-notifications: mk-notifications:
more: "More"
empty: "No notifications" empty: "No notifications"
mk-post-detail: mk-post-detail:

4
locales/ja.yml
View File

@ -236,6 +236,9 @@ desktop:
add-reaction: "リアクション" add-reaction: "リアクション"
detail: "詳細" detail: "詳細"
mk-notifications:
more: "もっと見る"
mk-notifications-home-widget: mk-notifications-home-widget:
title: "通知" title: "通知"
settings: "通知の設定" settings: "通知の設定"
@ -356,6 +359,7 @@ mobile:
empty-timeline: "表示する投稿がありません。誰かしらをフォローするなどしましょう。" empty-timeline: "表示する投稿がありません。誰かしらをフォローするなどしましょう。"
mk-notifications: mk-notifications:
more: "もっと見る"
empty: "ありません！" empty: "ありません！"
mk-post-detail: mk-post-detail:

57
src/web/app/desktop/tags/notifications.tag
View File

@ -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> <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> </virtual>
</div> </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="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> <style>
:scope :scope
display block display block
@ -168,6 +171,12 @@
i i
margin-right 8px margin-right 8px
> .more
display block
width 100%
padding 16px
color #555
> .empty > .empty
margin 0 margin 0
padding 16px padding 16px
@ -197,7 +206,16 @@
this.loading = true; this.loading = true;
this.on('mount', () => { 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({ this.update({
loading: false, loading: false,
notifications: notifications notifications: notifications
@ -211,11 +229,6 @@
this.stream.off('notification', this.onNotification); this.stream.off('notification', this.onNotification);
}); });
this.onNotification = notification => {
this.notifications.unshift(notification);
this.update();
};
this.on('update', () => { this.on('update', () => {
this.notifications.forEach(notification => { this.notifications.forEach(notification => {
const date = new Date(notification.created_at).getDate(); const date = new Date(notification.created_at).getDate();
@ -224,5 +237,35 @@
notification._datetext = `${month}月 ${date}日`; 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> </script>
</mk-notifications> </mk-notifications>

55
src/web/app/mobile/tags/notifications.tag
View File

@ -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> <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> </virtual>
</div> </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="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> <p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
@ -38,6 +41,12 @@
i i
margin-right 8px margin-right 8px
> .more
display block
width 100%
padding 16px
color #555
> .empty > .empty
margin 0 margin 0
padding 16px padding 16px
@ -65,7 +74,16 @@
this.loading = true; this.loading = true;
this.on('mount', () => { 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({ this.update({
loading: false, loading: false,
notifications: notifications notifications: notifications
@ -81,11 +99,6 @@
this.stream.off('notification', this.onNotification); this.stream.off('notification', this.onNotification);
}); });
this.onNotification = notification => {
this.notifications.unshift(notification);
this.update();
};
this.on('update', () => { this.on('update', () => {
this.notifications.forEach(notification => { this.notifications.forEach(notification => {
const date = new Date(notification.created_at).getDate(); const date = new Date(notification.created_at).getDate();
@ -94,5 +107,35 @@
notification._datetext = `${month}月 ${date}日`; 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> </script>
</mk-notifications> </mk-notifications>