monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

モバイル版のメニューにお知らせを表示するように

Browse source
This commit is contained in:
syuilo 2018-09-05 17:43:31 +09:00
parent 8b490b9b94
commit ff8d300ea8
1 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/client/app/mobile/views/components/ui.nav.vue
View file

@ -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