This commit is contained in:
parent
72b7c84139
commit
7466ec3b0f
|
@ -4,6 +4,7 @@
|
|||
<div class="backdrop"></div>
|
||||
<div class="content">
|
||||
<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>
|
||||
<button if={ func } onclick={ func }><i class="fa fa-{ funcIcon }"></i></button>
|
||||
</div>
|
||||
|
@ -74,6 +75,14 @@
|
|||
> i
|
||||
transition all 0.2s ease
|
||||
|
||||
> i
|
||||
position absolute
|
||||
top 8px
|
||||
left 8px
|
||||
pointer-events none
|
||||
font-size 10px
|
||||
color $theme-color
|
||||
|
||||
> button:last-child
|
||||
display block
|
||||
position absolute
|
||||
|
@ -90,14 +99,46 @@
|
|||
<script>
|
||||
import ui from '../scripts/ui-event';
|
||||
|
||||
this.mixin('api');
|
||||
this.mixin('stream');
|
||||
|
||||
this.func = 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.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
|
||||
this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
|
||||
|
||||
ui.off('title', this.setTitle);
|
||||
ui.off('func', this.setFunc);
|
||||
});
|
||||
|
||||
this.onReadAllMessagingMessages = () => {
|
||||
this.update({
|
||||
hasUnreadMessagingMessages: false
|
||||
});
|
||||
};
|
||||
|
||||
this.onUnreadMessagingMessage = () => {
|
||||
this.update({
|
||||
hasUnreadMessagingMessages: true
|
||||
});
|
||||
};
|
||||
|
||||
this.setTitle = title => {
|
||||
this.refs.title.innerHTML = title;
|
||||
};
|
||||
|
|
|
@ -7,18 +7,18 @@
|
|||
</a>
|
||||
<div class="links">
|
||||
<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 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 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 class="fa fa-home"></i>%i18n:mobile.tags.mk-ui-nav.home%<i class="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><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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<a href={ CONFIG.aboutUrl }><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a>
|
||||
|
@ -94,10 +94,16 @@
|
|||
color #777
|
||||
text-decoration none
|
||||
|
||||
> .icon
|
||||
> i:first-child
|
||||
margin-right 0.5em
|
||||
|
||||
> .angle
|
||||
> .i
|
||||
margin-left 6px
|
||||
vertical-align super
|
||||
font-size 10px
|
||||
color $theme-color
|
||||
|
||||
> i:last-child
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
|
@ -120,6 +126,39 @@
|
|||
<script>
|
||||
this.mixin('i');
|
||||
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 = () => {
|
||||
const query = window.prompt('%i18n:mobile.tags.mk-ui-nav.search%');
|
||||
|
|
Loading…
Reference in a new issue