モバイル版のメニューにお知らせを表示するように
This commit is contained in:
		
							parent
							
								
									8b490b9b94
								
							
						
					
					
						commit
						ff8d300ea8
					
				
					 1 changed files with 32 additions and 1 deletions
				
			
		| 
						 | 
					@ -34,6 +34,12 @@
 | 
				
			||||||
					<li @click="dark"><p><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template><span>%i18n:@darkmode%</span></p></li>
 | 
										<li @click="dark"><p><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template><span>%i18n:@darkmode%</span></p></li>
 | 
				
			||||||
				</ul>
 | 
									</ul>
 | 
				
			||||||
			</div>
 | 
								</div>
 | 
				
			||||||
 | 
								<div class="announcements" v-if="announcements.length > 0">
 | 
				
			||||||
 | 
									<article v-for="announcement in announcements">
 | 
				
			||||||
 | 
										<span v-html="announcement.title" class="title"></span>
 | 
				
			||||||
 | 
										<div v-html="announcement.text"></div>
 | 
				
			||||||
 | 
									</article>
 | 
				
			||||||
 | 
								</div>
 | 
				
			||||||
			<a :href="aboutUrl"><p class="about">%i18n:@about%</p></a>
 | 
								<a :href="aboutUrl"><p class="about">%i18n:@about%</p></a>
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
	</transition>
 | 
						</transition>
 | 
				
			||||||
| 
						 | 
					@ -46,23 +52,32 @@ import { lang } from '../../../config';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default Vue.extend({
 | 
					export default Vue.extend({
 | 
				
			||||||
	props: ['isOpen'],
 | 
						props: ['isOpen'],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	data() {
 | 
						data() {
 | 
				
			||||||
		return {
 | 
							return {
 | 
				
			||||||
			hasGameInvitation: false,
 | 
								hasGameInvitation: false,
 | 
				
			||||||
			connection: null,
 | 
								connection: null,
 | 
				
			||||||
			connectionId: null,
 | 
								connectionId: null,
 | 
				
			||||||
			aboutUrl: `/docs/${lang}/about`
 | 
								aboutUrl: `/docs/${lang}/about`,
 | 
				
			||||||
 | 
								announcements: []
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	computed: {
 | 
						computed: {
 | 
				
			||||||
		hasUnreadNotification(): boolean {
 | 
							hasUnreadNotification(): boolean {
 | 
				
			||||||
			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
 | 
								return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		hasUnreadMessagingMessage(): boolean {
 | 
							hasUnreadMessagingMessage(): boolean {
 | 
				
			||||||
			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
 | 
								return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	mounted() {
 | 
						mounted() {
 | 
				
			||||||
 | 
							(this as any).os.getMeta().then(meta => {
 | 
				
			||||||
 | 
								this.announcements = meta.broadcasts;
 | 
				
			||||||
 | 
							});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		if (this.$store.getters.isSignedIn) {
 | 
							if (this.$store.getters.isSignedIn) {
 | 
				
			||||||
			this.connection = (this as any).os.stream.getConnection();
 | 
								this.connection = (this as any).os.stream.getConnection();
 | 
				
			||||||
			this.connectionId = (this as any).os.stream.use();
 | 
								this.connectionId = (this as any).os.stream.use();
 | 
				
			||||||
| 
						 | 
					@ -71,6 +86,7 @@ export default Vue.extend({
 | 
				
			||||||
			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 | 
								this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	beforeDestroy() {
 | 
						beforeDestroy() {
 | 
				
			||||||
		if (this.$store.getters.isSignedIn) {
 | 
							if (this.$store.getters.isSignedIn) {
 | 
				
			||||||
			this.connection.off('reversi_invited', this.onReversiInvited);
 | 
								this.connection.off('reversi_invited', this.onReversiInvited);
 | 
				
			||||||
| 
						 | 
					@ -78,18 +94,22 @@ export default Vue.extend({
 | 
				
			||||||
			(this as any).os.stream.dispose(this.connectionId);
 | 
								(this as any).os.stream.dispose(this.connectionId);
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	methods: {
 | 
						methods: {
 | 
				
			||||||
		search() {
 | 
							search() {
 | 
				
			||||||
			const query = window.prompt('%i18n:@search%');
 | 
								const query = window.prompt('%i18n:@search%');
 | 
				
			||||||
			if (query == null || query == '') return;
 | 
								if (query == null || query == '') return;
 | 
				
			||||||
			this.$router.push(`/search?q=${encodeURIComponent(query)}`);
 | 
								this.$router.push(`/search?q=${encodeURIComponent(query)}`);
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		onReversiInvited() {
 | 
							onReversiInvited() {
 | 
				
			||||||
			this.hasGameInvitation = true;
 | 
								this.hasGameInvitation = true;
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		onReversiNoInvites() {
 | 
							onReversiNoInvites() {
 | 
				
			||||||
			this.hasGameInvitation = false;
 | 
								this.hasGameInvitation = false;
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		dark() {
 | 
							dark() {
 | 
				
			||||||
			this.$store.commit('device/set', {
 | 
								this.$store.commit('device/set', {
 | 
				
			||||||
				key: 'darkmode',
 | 
									key: 'darkmode',
 | 
				
			||||||
| 
						 | 
					@ -204,6 +224,17 @@ root(isDark)
 | 
				
			||||||
					color $color
 | 
										color $color
 | 
				
			||||||
					opacity 0.5
 | 
										opacity 0.5
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						.announcements
 | 
				
			||||||
 | 
							> article
 | 
				
			||||||
 | 
								background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
 | 
				
			||||||
 | 
								color isDark ? #fff : #3f4967
 | 
				
			||||||
 | 
								padding 16px
 | 
				
			||||||
 | 
								margin 8px 0
 | 
				
			||||||
 | 
								font-size 12px
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								> .title
 | 
				
			||||||
 | 
									font-weight bold
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	.about
 | 
						.about
 | 
				
			||||||
		margin 0 0 8px 0
 | 
							margin 0 0 8px 0
 | 
				
			||||||
		padding 1em 0
 | 
							padding 1em 0
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue