rudeshark.net/src/client/app/desktop/views/components/ui.header.nav.vue

168 lines
3.5 KiB
Vue
Raw Normal View History

2018-02-12 13:10:16 +01:00
<template>
2018-02-20 14:53:34 +01:00
<div class="nav">
2018-02-12 13:10:16 +01:00
<ul>
2018-02-18 04:35:18 +01:00
<template v-if="os.isSignedIn">
2018-02-20 17:14:25 +01:00
<li class="home" :class="{ active: $route.name == 'index' }">
2018-02-19 06:29:42 +01:00
<router-link to="/">
2018-02-12 13:10:16 +01:00
%fa:home%
<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
2018-02-19 06:29:42 +01:00
</router-link>
2018-02-12 13:10:16 +01:00
</li>
<li class="messaging">
<a @click="messaging">
%fa:comments%
<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
</a>
</li>
2018-03-07 09:48:32 +01:00
<li class="game">
<a @click="game">
%fa:gamepad%
<p>ゲーム</p>
<template v-if="hasGameInvitations">%fa:circle%</template>
</a>
</li>
2018-02-12 13:10:16 +01:00
</template>
</ul>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-18 15:51:41 +01:00
import MkMessagingWindow from './messaging-window.vue';
2018-03-07 09:48:32 +01:00
import MkGameWindow from './game-window.vue';
2018-02-12 13:10:16 +01:00
export default Vue.extend({
data() {
return {
hasUnreadMessagingMessages: false,
2018-03-07 09:48:32 +01:00
hasGameInvitations: false,
2018-02-12 13:10:16 +01:00
connection: null,
2018-04-09 12:53:15 +02:00
connectionId: null
2018-02-12 13:10:16 +01:00
};
},
mounted() {
2018-02-18 04:35:18 +01:00
if ((this as any).os.isSignedIn) {
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
2018-02-12 13:10:16 +01:00
this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
2018-03-11 10:08:26 +01:00
this.connection.on('othello_invited', this.onOthelloInvited);
this.connection.on('othello_no_invites', this.onOthelloNoInvites);
2018-02-12 13:10:16 +01:00
// Fetch count of unread messaging messages
2018-02-18 04:35:18 +01:00
(this as any).api('messaging/unread').then(res => {
2018-02-12 13:10:16 +01:00
if (res.count > 0) {
this.hasUnreadMessagingMessages = true;
}
});
}
},
beforeDestroy() {
2018-02-18 04:35:18 +01:00
if ((this as any).os.isSignedIn) {
2018-02-12 13:10:16 +01:00
this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
2018-03-11 10:08:26 +01:00
this.connection.off('othello_invited', this.onOthelloInvited);
this.connection.off('othello_no_invites', this.onOthelloNoInvites);
2018-02-18 04:35:18 +01:00
(this as any).os.stream.dispose(this.connectionId);
2018-02-12 13:10:16 +01:00
}
},
methods: {
2018-03-11 10:08:26 +01:00
onUnreadMessagingMessage() {
this.hasUnreadMessagingMessages = true;
},
2018-02-12 13:10:16 +01:00
onReadAllMessagingMessages() {
this.hasUnreadMessagingMessages = false;
},
2018-03-11 10:08:26 +01:00
onOthelloInvited() {
this.hasGameInvitations = true;
},
onOthelloNoInvites() {
this.hasGameInvitations = false;
2018-02-12 13:10:16 +01:00
},
messaging() {
2018-02-22 15:53:07 +01:00
(this as any).os.new(MkMessagingWindow);
2018-03-07 09:48:32 +01:00
},
game() {
(this as any).os.new(MkGameWindow);
2018-02-12 13:10:16 +01:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-03-03 05:47:55 +01:00
@import '~const.styl'
2018-02-20 14:53:34 +01:00
.nav
2018-02-12 13:10:16 +01:00
display inline-block
margin 0
padding 0
line-height 3rem
vertical-align top
> ul
display inline-block
margin 0
padding 0
vertical-align top
line-height 3rem
list-style none
> li
display inline-block
vertical-align top
height 48px
line-height 48px
&.active
> a
border-bottom solid 3px $theme-color
> a
display inline-block
z-index 1
height 100%
padding 0 24px
font-size 13px
font-variant small-caps
color #9eaba8
text-decoration none
transition none
cursor pointer
*
pointer-events none
&:hover
color darken(#9eaba8, 20%)
text-decoration none
> [data-fa]:first-child
margin-right 8px
> [data-fa]:last-child
margin-left 5px
font-size 10px
color $theme-color
@media (max-width 1100px)
margin-left -5px
> p
display inline
margin 0
@media (max-width 1100px)
display none
@media (max-width 700px)
padding 0 12px
</style>