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…
	
	Add table
		Add a link
		
	
		Reference in a new issue