Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

#271

Browse source
This commit is contained in:
syuilo 2017-06-13 03:42:24 +09:00
parent 72b7c84139
commit 7466ec3b0f
2 changed files with 88 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/web/app/mobile/tags/ui-header.tag
View file

@ -4,6 +4,7 @@
<div class="backdrop"></div> <div class="backdrop"></div>
<div class="content"> <div class="content">
<button class="nav" onclick={ parent.toggleDrawer }><i class="fa fa-bars"></i></button> <button class="nav" onclick={ parent.toggleDrawer }><i class="fa fa-bars"></i></button>
<i class="fa fa-circle" if={ hasUnreadMessagingMessages }></i>
<h1 ref="title">Misskey</h1> <h1 ref="title">Misskey</h1>
<button if={ func } onclick={ func }><i class="fa fa-{ funcIcon }"></i></button> <button if={ func } onclick={ func }><i class="fa fa-{ funcIcon }"></i></button>
</div> </div>
@ -74,6 +75,14 @@
> i > i
transition all 0.2s ease transition all 0.2s ease
> i
position absolute
top 8px
left 8px
pointer-events none
font-size 10px
color $theme-color
> button:last-child > button:last-child
display block display block
position absolute position absolute
@ -90,14 +99,46 @@
<script> <script>
import ui from '../scripts/ui-event'; import ui from '../scripts/ui-event';
this.mixin('api');
this.mixin('stream');
this.func = null; this.func = null;
this.funcIcon = null; this.funcIcon = null;
this.on('mount', () => {
this.stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.stream.on('unread_messaging_message', this.onUnreadMessagingMessage);
// Fetch count of unread messaging messages
this.api('messaging/unread').then(res => {
if (res.count > 0) {
this.update({
hasUnreadMessagingMessages: true
});
}
});
});
this.on('unmount', () => { this.on('unmount', () => {
this.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
ui.off('title', this.setTitle); ui.off('title', this.setTitle);
ui.off('func', this.setFunc); ui.off('func', this.setFunc);
}); });
this.onReadAllMessagingMessages = () => {
this.update({
hasUnreadMessagingMessages: false
});
};
this.onUnreadMessagingMessage = () => {
this.update({
hasUnreadMessagingMessages: true
});
};
this.setTitle = title => { this.setTitle = title => {
this.refs.title.innerHTML = title; this.refs.title.innerHTML = title;
}; };

55
src/web/app/mobile/tags/ui-nav.tag
View file

@ -7,18 +7,18 @@
</a> </a>
<div class="links"> <div class="links">
<ul> <ul>
<li class="home"><a href="/"><i class="icon fa fa-home"></i>%i18n:mobile.tags.mk-ui-nav.home%<i class="angle fa fa-angle-right"></i></a></li> <li><a href="/"><i class="fa fa-home"></i>%i18n:mobile.tags.mk-ui-nav.home%<i class="fa fa-angle-right"></i></a></li>
<li class="notifications"><a href="/i/notifications"><i class="icon fa fa-bell-o"></i>%i18n:mobile.tags.mk-ui-nav.notifications%<i class="angle fa fa-angle-right"></i></a></li> <li><a href="/i/notifications"><i class="fa fa-bell-o"></i>%i18n:mobile.tags.mk-ui-nav.notifications%<i class="fa fa-angle-right"></i></a></li>
<li class="messaging"><a href="/i/messaging"><i class="icon fa fa-comments-o"></i>%i18n:mobile.tags.mk-ui-nav.messaging%<i class="angle fa fa-angle-right"></i></a></li> <li><a href="/i/messaging"><i class="fa fa-comments-o"></i>%i18n:mobile.tags.mk-ui-nav.messaging%<i class="i fa fa-circle" if={ hasUnreadMessagingMessages }></i><i class="fa fa-angle-right"></i></a></li>
</ul> </ul>
<ul> <ul>
<li class="settings"><a onclick={ search }><i class="icon fa fa-search"></i>%i18n:mobile.tags.mk-ui-nav.search%<i class="angle fa fa-angle-right"></i></a></li> <li><a onclick={ search }><i class="fa fa-search"></i>%i18n:mobile.tags.mk-ui-nav.search%<i class="fa fa-angle-right"></i></a></li>
</ul> </ul>
<ul> <ul>
<li class="settings"><a href="/i/drive"><i class="icon fa fa-cloud"></i>%i18n:mobile.tags.mk-ui-nav.drive%<i class="angle fa fa-angle-right"></i></a></li> <li><a href="/i/drive"><i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-ui-nav.drive%<i class="fa fa-angle-right"></i></a></li>
</ul> </ul>
<ul> <ul>
<li class="settings"><a href="/i/settings"><i class="icon fa fa-cog"></i>%i18n:mobile.tags.mk-ui-nav.settings%<i class="angle fa fa-angle-right"></i></a></li> <li><a href="/i/settings"><i class="fa fa-cog"></i>%i18n:mobile.tags.mk-ui-nav.settings%<i class="fa fa-angle-right"></i></a></li>
</ul> </ul>
</div> </div>
<a href={ CONFIG.aboutUrl }><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a> <a href={ CONFIG.aboutUrl }><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a>
@ -94,10 +94,16 @@
color #777 color #777
text-decoration none text-decoration none
> .icon > i:first-child
margin-right 0.5em margin-right 0.5em
> .angle > .i
margin-left 6px
vertical-align super
font-size 10px
color $theme-color
> i:last-child
position absolute position absolute
top 0 top 0
right 0 right 0
@ -120,6 +126,39 @@
<script> <script>
this.mixin('i'); this.mixin('i');
this.mixin('page'); this.mixin('page');
this.mixin('api');
this.mixin('stream');
this.on('mount', () => {
this.stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.stream.on('unread_messaging_message', this.onUnreadMessagingMessage);
// Fetch count of unread messaging messages
this.api('messaging/unread').then(res => {
if (res.count > 0) {
this.update({
hasUnreadMessagingMessages: true
});
}
});
});
this.on('unmount', () => {
this.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
});
this.onReadAllMessagingMessages = () => {
this.update({
hasUnreadMessagingMessages: false
});
};
this.onUnreadMessagingMessage = () => {
this.update({
hasUnreadMessagingMessages: true
});
};
this.search = () => { this.search = () => {
const query = window.prompt('%i18n:mobile.tags.mk-ui-nav.search%'); const query = window.prompt('%i18n:mobile.tags.mk-ui-nav.search%');