Improve mobile notifications view

3 files changed, 55 insertions, 5 deletions

diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 448d22cbe6..300a46e52a 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -100,6 +100,27 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-notification
+
+	&.wide
+		> .notification
+			@media (min-width 350px)
+				font-size 14px
+
+			@media (min-width 500px)
+				font-size 16px
+
+			@media (min-width 600px)
+				padding 24px 32px
+
+			> .avatar
+				@media (min-width 500px)
+					width 42px
+					height 42px
+
+			> div
+				@media (min-width 500px)
+					width calc(100% - 42px)
+
 	> .notification
 		padding 16px
 		font-size 12px
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index f793f5d685..ca6a8beca3 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -9,7 +9,7 @@
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications" tag="div">
 		<template v-for="(notification, i) in _notifications">
-			<mk-notification :notification="notification" :key="notification.id"/>
+			<mk-notification :notification="notification" :key="notification.id" :class="{ wide: wide }"/>
 			<p class="date" :key="notification.id + '_date'" v-if="i != items.length - 1 && notification._date != _notifications[i + 1]._date">
 				<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
 				<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
@@ -37,15 +37,37 @@ export default Vue.extend({
 	i18n: i18n('mobile/views/components/notifications.vue'),
 
 	mixins: [
-		paging({}),
+		paging({
+			beforeInit: (self) => {
+				self.$emit('beforeInit');
+			},
+			onInited: (self) => {
+				self.$emit('inited');
+			}
+		}),
 	],
 
+	props: {
+		type: {
+			type: String,
+			required: false
+		},
+		wide: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
 	data() {
 		return {
 			connection: null,
 			pagination: {
 				endpoint: 'i/notifications',
 				limit: 15,
+				params: () => ({
+					includeTypes: this.type ? [this.type] : undefined
+				})
 			}
 		};
 	},
@@ -62,6 +84,12 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		type() {
+			this.reload();
+		}
+	},
+
 	mounted() {
 		this.connection = this.$root.stream.useSharedConnection('main');
 		this.connection.on('notification', this.onNotification);
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 26a388914a..db250ec6f8 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -17,7 +17,8 @@
 				<div class="links">
 					<ul>
 						<li><router-link to="/" :data-active="$route.name == 'index'"><i><fa icon="home" fixed-width/></i>{{ $t('timeline') }}<i><fa icon="angle-right"/></i></router-link></li>
-						<li><p @click="showNotifications = true"><i><fa :icon="['far', 'bell']" fixed-width/></i>{{ $t('notifications') }}<i v-if="hasUnreadNotification" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></p></li>
+						<li v-if="$store.state.device.enableMobileQuickNotificationView"><p @click="showNotifications = true"><i><fa :icon="faBell" fixed-width/></i>{{ $t('notifications') }}<i v-if="hasUnreadNotification" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></p></li>
+						<li v-else><router-link to="/i/notifications" :data-active="$route.name == 'notifications'"><i><fa :icon="faBell" fixed-width/></i>{{ $t('notifications') }}<i v-if="hasUnreadNotification" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 						<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'"><i><fa :icon="['far', 'comments']" fixed-width/></i>{{ $t('@.messaging') }}<i v-if="hasUnreadMessagingMessage" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 						<li v-if="$store.getters.isSignedIn && ($store.state.i.isLocked || $store.state.i.carefulBot)"><router-link to="/i/follow-requests" :data-active="$route.name == 'follow-requests'"><i><fa :icon="['far', 'envelope']" fixed-width/></i>{{ $t('follow-requests') }}<i v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 						<li><router-link to="/featured" :data-active="$route.name == 'featured'"><i><fa :icon="faNewspaper" fixed-width/></i>{{ $t('@.featured-notes') }}<i><fa icon="angle-right"/></i></router-link></li>
@@ -68,7 +69,7 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 import { lang } from '../../../config';
 import { faNewspaper, faHashtag, faHome, faColumns, faUsers } from '@fortawesome/free-solid-svg-icons';
-import { faMoon, faSun, faStickyNote } from '@fortawesome/free-regular-svg-icons';
+import { faMoon, faSun, faStickyNote, faBell } from '@fortawesome/free-regular-svg-icons';
 import { search } from '../../../common/scripts/search';
 
 export default Vue.extend({
@@ -88,7 +89,7 @@ export default Vue.extend({
 			announcements: [],
 			searching: false,
 			showNotifications: false,
-			faNewspaper, faHashtag, faMoon, faSun, faHome, faColumns, faStickyNote, faUsers
+			faNewspaper, faHashtag, faMoon, faSun, faHome, faColumns, faStickyNote, faUsers, faBell,
 		};
 	},