Implement #2736
This commit is contained in:
		| @@ -50,6 +50,30 @@ export class HomeStream extends Stream { | ||||
| 			}); | ||||
| 		}); | ||||
|  | ||||
| 		this.on('unreadMention', () => { | ||||
| 			os.store.dispatch('mergeMe', { | ||||
| 				hasUnreadMentions: true | ||||
| 			}); | ||||
| 		}); | ||||
|  | ||||
| 		this.on('readAllUnreadMentions', () => { | ||||
| 			os.store.dispatch('mergeMe', { | ||||
| 				hasUnreadMentions: false | ||||
| 			}); | ||||
| 		}); | ||||
|  | ||||
| 		this.on('unreadSpecifiedNote', () => { | ||||
| 			os.store.dispatch('mergeMe', { | ||||
| 				hasUnreadSpecifiedNotes: true | ||||
| 			}); | ||||
| 		}); | ||||
|  | ||||
| 		this.on('readAllUnreadSpecifiedNotes', () => { | ||||
| 			os.store.dispatch('mergeMe', { | ||||
| 				hasUnreadSpecifiedNotes: false | ||||
| 			}); | ||||
| 		}); | ||||
|  | ||||
| 		this.on('clientSettingUpdated', x => { | ||||
| 			os.store.commit('settings/set', { | ||||
| 				key: x.key, | ||||
|   | ||||
| @@ -213,10 +213,14 @@ export default Vue.extend({ | ||||
| 	methods: { | ||||
| 		capture(withHandler = false) { | ||||
| 			if (this.$store.getters.isSignedIn) { | ||||
| 				this.connection.send({ | ||||
| 				const data = { | ||||
| 					type: 'capture', | ||||
| 					id: this.p.id | ||||
| 				}); | ||||
| 				} as any; | ||||
| 				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) { | ||||
| 					data.read = true; | ||||
| 				} | ||||
| 				this.connection.send(data); | ||||
| 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated); | ||||
| 			} | ||||
| 		}, | ||||
|   | ||||
| @@ -8,8 +8,8 @@ | ||||
| 		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span> | ||||
| 		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span> | ||||
| 		<div class="buttons"> | ||||
| 			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%</button> | ||||
| 			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%</button> | ||||
| 			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></button> | ||||
| 			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></button> | ||||
| 			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button> | ||||
| 			<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button> | ||||
| 		</div> | ||||
| @@ -202,6 +202,13 @@ root(isDark) | ||||
| 				line-height 42px | ||||
| 				color isDark ? #9baec8 : #ccc | ||||
|  | ||||
| 				> .badge | ||||
| 					position absolute | ||||
| 					top -4px | ||||
| 					right 4px | ||||
| 					font-size 10px | ||||
| 					color $theme-color | ||||
|  | ||||
| 				&:hover | ||||
| 					color isDark ? #b2c1d5 : #aaa | ||||
|  | ||||
|   | ||||
| @@ -147,10 +147,14 @@ export default Vue.extend({ | ||||
| 	methods: { | ||||
| 		capture(withHandler = false) { | ||||
| 			if (this.$store.getters.isSignedIn) { | ||||
| 				this.connection.send({ | ||||
| 				const data = { | ||||
| 					type: 'capture', | ||||
| 					id: this.p.id | ||||
| 				}); | ||||
| 				} as any; | ||||
| 				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) { | ||||
| 					data.read = true; | ||||
| 				} | ||||
| 				this.connection.send(data); | ||||
| 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated); | ||||
| 			} | ||||
| 		}, | ||||
|   | ||||
| @@ -160,10 +160,14 @@ export default Vue.extend({ | ||||
| 	methods: { | ||||
| 		capture(withHandler = false) { | ||||
| 			if (this.$store.getters.isSignedIn) { | ||||
| 				this.connection.send({ | ||||
| 				const data = { | ||||
| 					type: 'capture', | ||||
| 					id: this.p.id | ||||
| 				}); | ||||
| 				} as any; | ||||
| 				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) { | ||||
| 					data.read = true; | ||||
| 				} | ||||
| 				this.connection.send(data); | ||||
| 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated); | ||||
| 			} | ||||
| 		}, | ||||
|   | ||||
| @@ -188,9 +188,6 @@ root(isDark) | ||||
| 				overflow hidden | ||||
| 				text-overflow ellipsis | ||||
|  | ||||
| 				[data-fa], [data-icon] | ||||
| 					margin-right 4px | ||||
|  | ||||
| 				> img | ||||
| 					display inline-block | ||||
| 					vertical-align bottom | ||||
|   | ||||
| @@ -1,9 +1,9 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header"> | ||||
| 		<template v-if="folder">%fa:R folder-open%{{ folder.name }}</template> | ||||
| 		<template v-if="file"><mk-file-type-icon data-icon :type="file.type"/>{{ file.name }}</template> | ||||
| 		<template v-if="!folder && !file">%fa:cloud%%i18n:@drive%</template> | ||||
| 		<template v-if="folder"><span style="margin-right:4px;">%fa:R folder-open%</span>{{ folder.name }}</template> | ||||
| 		<template v-if="file"><mk-file-type-icon data-icon :type="file.type" style="margin-right:4px;"/>{{ file.name }}</template> | ||||
| 		<template v-if="!folder && !file"><span style="margin-right:4px;">%fa:cloud%</span>%i18n:@drive%</template> | ||||
| 	</span> | ||||
| 	<template slot="func"><button @click="fn">%fa:ellipsis-h%</button></template> | ||||
| 	<mk-drive | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:star%%i18n:@title%</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:star%</span>%i18n:@title%</span> | ||||
|  | ||||
| 	<main> | ||||
| 		<template v-for="favorite in favorites"> | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:gamepad%%i18n:@reversi%</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:gamepad%</span>%i18n:@reversi%</span> | ||||
| 	<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/> | ||||
| </mk-ui> | ||||
| </template> | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header" @click="showNav = true"> | ||||
| 		<span> | ||||
| 		<span :class="$style.title"> | ||||
| 			<span v-if="src == 'home'">%fa:home%%i18n:@home%</span> | ||||
| 			<span v-if="src == 'local'">%fa:R comments%%i18n:@local%</span> | ||||
| 			<span v-if="src == 'hybrid'">%fa:share-alt%%i18n:@hybrid%</span> | ||||
| @@ -15,6 +15,7 @@ | ||||
| 			<template v-if="!showNav">%fa:angle-down%</template> | ||||
| 			<template v-else>%fa:angle-up%</template> | ||||
| 		</span> | ||||
| 		<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i> | ||||
| 	</span> | ||||
|  | ||||
| 	<template slot="func"> | ||||
| @@ -32,8 +33,8 @@ | ||||
| 					<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span> | ||||
| 					<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span> | ||||
| 					<div class="hr"></div> | ||||
| 					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span> | ||||
| 					<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%</span> | ||||
| 					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></span> | ||||
| 					<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></span> | ||||
| 					<template v-if="lists"> | ||||
| 						<div class="hr" v-if="lists.length > 0"></div> | ||||
| 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span> | ||||
| @@ -220,6 +221,11 @@ root(isDark) | ||||
| 					&:not([data-active]):hover | ||||
| 						background isDark ? #353e4a : #eee | ||||
|  | ||||
| 					> .badge | ||||
| 						margin-left 6px | ||||
| 						font-size 10px | ||||
| 						color $theme-color | ||||
|  | ||||
| 	> .tl | ||||
| 		max-width 680px | ||||
| 		margin 0 auto | ||||
| @@ -238,3 +244,18 @@ main:not([data-darkmode]) | ||||
| 	root(false) | ||||
|  | ||||
| </style> | ||||
|  | ||||
| <style lang="stylus" module> | ||||
| @import '~const.styl' | ||||
|  | ||||
| .title | ||||
| 	i | ||||
| 		margin-right 4px | ||||
|  | ||||
| .badge | ||||
| 	margin-left 6px | ||||
| 	font-size 10px | ||||
| 	color $theme-color | ||||
| 	vertical-align middle | ||||
|  | ||||
| </style> | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header"> | ||||
| 		<template v-if="user">%fa:R comments%{{ user | userName }}</template> | ||||
| 		<template v-if="user"><span style="margin-right:4px;">%fa:R comments%</span>{{ user | userName }}</template> | ||||
| 		<template v-else><mk-ellipsis/></template> | ||||
| 	</span> | ||||
| 	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/> | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:R comments%%i18n:@messaging%</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:R comments%</span>%i18n:@messaging%</span> | ||||
| 	<mk-messaging @navigate="navigate" :header-top="48"/> | ||||
| </mk-ui> | ||||
| </template> | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:R sticky-note%%i18n:@title%</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:R sticky-note%</span>%i18n:@title%</span> | ||||
| 	<main v-if="!fetching"> | ||||
| 		<div> | ||||
| 			<mk-note-detail :note="note"/> | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:R bell%%i18n:@notifications%</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:R bell%</span>%i18n:@notifications%</span> | ||||
| 	<template slot="func"><button @click="fn">%fa:check%</button></template> | ||||
|  | ||||
| 	<main> | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:cog%%i18n:@settings%</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span> | ||||
| 	<main :data-darkmode="$store.state.device.darkmode"> | ||||
| 		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div> | ||||
|  | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:hashtag%{{ $route.params.tag }}</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:hashtag%</span>{{ $route.params.tag }}</span> | ||||
|  | ||||
| 	<main> | ||||
| 		<p v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p> | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
| <mk-ui> | ||||
| 	<span slot="header">%fa:home%%i18n:@dashboard%</span> | ||||
| 	<span slot="header"><span style="margin-right:4px;">%fa:home%</span>%i18n:@dashboard%</span> | ||||
| 	<template slot="func"> | ||||
| 		<button @click="customizing = !customizing">%fa:cog%</button> | ||||
| 	</template> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo