Improve mobile notifications view
This commit is contained in:
syuilo
parent
4277e53433
commit
c3003cb363
@ -225,6 +225,7 @@ common:
|
||||
use-avatar-reversi-stones: "リバーシの石にアバターを使う"
|
||||
disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
|
||||
disable-showing-animated-images: "アニメーション画像を再生しない"
|
||||
enable-quick-notification-view: "通知のクイックビューを有効にする"
|
||||
suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
|
||||
always-show-nsfw: "常に閲覧注意のメディアを表示する"
|
||||
always-mark-nsfw: "常にメディアを閲覧注意として投稿"
|
||||
@ -1894,6 +1895,9 @@ mobile/views/pages/search.vue:
|
||||
mobile/views/pages/selectdrive.vue:
|
||||
select-file: "ファイルを選択"
|
||||
|
||||
mobile/views/pages/notifications.vue:
|
||||
notifications: "通知"
|
||||
|
||||
mobile/views/pages/settings.vue:
|
||||
signed-in-as: "{}としてサインイン中"
|
||||
|
||||
|
||||
@ -67,6 +67,7 @@ export default (opts) => ({
|
||||
|
||||
async init() {
|
||||
this.fetching = true;
|
||||
if (opts.beforeInit) opts.beforeInit(this);
|
||||
let params = typeof this.pagination.params === 'function' ? this.pagination.params(true) : this.pagination.params;
|
||||
if (params && params.then) params = await params;
|
||||
await this.$root.api(this.pagination.endpoint, {
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
<ui-switch v-model="disableAnimatedMfm">{{ $t('@._settings.disable-animated-mfm') }}</ui-switch>
|
||||
<ui-switch v-model="disableShowingAnimatedImages">{{ $t('@._settings.disable-showing-animated-images') }}</ui-switch>
|
||||
<ui-switch v-model="remainDeletedNote">{{ $t('@._settings.remain-deleted-note') }}</ui-switch>
|
||||
<ui-switch v-model="enableMobileQuickNotificationView">{{ $t('@._settings.enable-quick-notification-view') }}</ui-switch>
|
||||
</section>
|
||||
<section>
|
||||
<header>{{ $t('@._settings.line-width') }}</header>
|
||||
@ -532,6 +533,11 @@ export default Vue.extend({
|
||||
set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
|
||||
},
|
||||
|
||||
enableMobileQuickNotificationView: {
|
||||
get() { return this.$store.state.device.enableMobileQuickNotificationView; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'enableMobileQuickNotificationView', value }); }
|
||||
},
|
||||
|
||||
homeProfile: {
|
||||
get() { return this.$store.state.device.homeProfile; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'homeProfile', value }); }
|
||||
|
||||
@ -14,6 +14,7 @@ import MkIndex from './views/pages/index.vue';
|
||||
import MkSignup from './views/pages/signup.vue';
|
||||
import MkSelectDrive from './views/pages/selectdrive.vue';
|
||||
import MkDrive from './views/pages/drive.vue';
|
||||
import MkNotifications from './views/pages/notifications.vue';
|
||||
import MkMessaging from './views/pages/messaging.vue';
|
||||
import MkMessagingRoom from './views/pages/messaging-room.vue';
|
||||
import MkNote from './views/pages/note.vue';
|
||||
@ -144,6 +145,7 @@ init((launch, os) => {
|
||||
{ path: '/i/groups/:group', component: UI, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.group }) },
|
||||
{ path: '/i/follow-requests', name: 'follow-requests', component: UI, props: route => ({ component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }) },
|
||||
{ path: '/i/widgets', name: 'widgets', component: () => import('./views/pages/widgets.vue').then(m => m.default) },
|
||||
{ path: '/i/notifications', name: 'notifications', component: MkNotifications },
|
||||
{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
|
||||
{ path: '/i/messaging/group/:group', component: MkMessagingRoom },
|
||||
{ path: '/i/messaging/:user', component: MkMessagingRoom },
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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,
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
68
src/client/app/mobile/views/pages/notifications.vue
Normal file
68
src/client/app/mobile/views/pages/notifications.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<mk-ui>
|
||||
<template #header><fa :icon="faBell"/> {{ $t('notifications') }}</template>
|
||||
<template #func>
|
||||
<button @click="filter()"><fa icon="cog"/></button>
|
||||
</template>
|
||||
|
||||
<main>
|
||||
<mk-notifications @before-init="beforeInit()" @inited="inited()" :type="type === 'all' ? null : type" :wide="true" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }"/>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { faBell } from '@fortawesome/free-regular-svg-icons';
|
||||
import i18n from '../../../i18n';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/pages/notifications.vue'),
|
||||
data() {
|
||||
return {
|
||||
type: 'all',
|
||||
faBell,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
beforeInit() {
|
||||
Progress.start();
|
||||
},
|
||||
inited() {
|
||||
Progress.done();
|
||||
},
|
||||
filter() {
|
||||
this.$root.dialog({
|
||||
title: this.$t('@.notification-type'),
|
||||
type: null,
|
||||
select: {
|
||||
items: ['all', 'follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest'].map(x => ({
|
||||
value: x, text: this.$t('@.notification-types.' + x)
|
||||
}))
|
||||
default: this.type,
|
||||
},
|
||||
showCancelButton: true
|
||||
}).then(({ canceled, result: type }) => {
|
||||
if (canceled) return;
|
||||
this.type = type;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
main > *
|
||||
overflow hidden
|
||||
background var(--face)
|
||||
|
||||
&.round
|
||||
border-radius 8px
|
||||
|
||||
&.shadow
|
||||
box-shadow 0 4px 16px rgba(#000, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||
</style>
|
||||
@ -75,6 +75,7 @@ const defaultDeviceSettings = {
|
||||
disableShowingAnimatedImages: false,
|
||||
expandUsersPhotos: true,
|
||||
expandUsersActivity: true,
|
||||
enableMobileQuickNotificationView: false,
|
||||
};
|
||||
|
||||
export default (os: MiOS) => new Vuex.Store({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user