natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-02-13 12:21:02 +09:00
parent b62f01b2f7
commit 1136457fb8
1 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/web/app/common/views/components/messaging.vue
View File

@ -6,38 +6,45 @@
<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:common.tags.mk-messaging.search-user%"/> <input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
</div> </div>
<div class="result"> <div class="result">
<ol class="users" v-if="searchResult.length > 0" ref="searchResult"> <ol class="users" v-if="result.length > 0" ref="searchResult">
<li each={ user, i in searchResult } <li v-for="(user, i) in result"
@keydown.enter="navigate(user)" @keydown.enter="navigate(user)"
onkeydown={ parent.onSearchResultKeydown.bind(null, i) } @keydown="onSearchResultKeydown(i)"
@click="user._click" @click="navigate(user)"
tabindex="-1" tabindex="-1"
:key="user.id"
> >
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/> <img class="avatar" :src="`${user.avatar_url}?thumbnail&size=32`" alt=""/>
<span class="name">{ user.name }</span> <span class="name">{{ user.name }}</span>
<span class="username">@{ user.username }</span> <span class="username">@{{ user.username }}</span>
</li> </li>
</ol> </ol>
</div> </div>
</div> </div>
<div class="history" v-if="history.length > 0"> <div class="history" v-if="messages.length > 0">
<template each={ history }> <template >
<a class="user" data-is-me={ is_me } data-is-read={ is_read } @click="navigate(isMe(message) ? message.recipient : message.user)"> <a v-for="message in messages"
class="user"
:data-is-me="isMe(message)"
:data-is-read="message.is_read"
@click="navigate(isMe(message) ? message.recipient : message.user)"
:key="message.id"
>
<div> <div>
<img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/> <img class="avatar" :src="`${isMe(message) ? message.recipient.avatar_url : message.user.avatar_url}?thumbnail&size=64`" alt=""/>
<header> <header>
<span class="name">{ is_me ? recipient.name : user.name }</span> <span class="name">{{ isMe(message) ? message.recipient.name : message.user.name }}</span>
<span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span> <span class="username">@{{ isMe(message) ? message.recipient.username : message.user.username }}</span>
<mk-time time={ created_at }/> <mk-time :time="message.created_at"/>
</header> </header>
<div class="body"> <div class="body">
<p class="text"><span class="me" v-if="is_me">%i18n:common.tags.mk-messaging.you%:</span>{ text }</p> <p class="text"><span class="me" v-if="isMe(message)">%i18n:common.tags.mk-messaging.you%:</span>{{ text }}</p>
</div> </div>
</div> </div>
</a> </a>
</template> </template>
</div> </div>
<p class="no-history" v-if="!fetching && history.length == 0">%i18n:common.tags.mk-messaging.no-history%</p> <p class="no-history" v-if="!fetching && messages.length == 0">%i18n:common.tags.mk-messaging.no-history%</p>
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
</div> </div>
</template> </template>
@ -123,26 +130,29 @@ export default Vue.extend({
} }
}, },
onSearchResultKeydown(i, e) { onSearchResultKeydown(i, e) {
const list = this.$refs.searchResult as any;
const cancel = () => { const cancel = () => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}; };
switch (true) { switch (true) {
case e.which == 27: // [ESC] case e.which == 27: // [ESC]
cancel(); cancel();
this.$refs.search.focus(); (this.$refs.search as any).focus();
break; break;
case e.which == 9 && e.shiftKey: // [TAB] + [Shift] case e.which == 9 && e.shiftKey: // [TAB] + [Shift]
case e.which == 38: // [↑] case e.which == 38: // [↑]
cancel(); cancel();
(this.$refs.searchResult.childNodes[i].previousElementSibling || this.$refs.searchResult.childNodes[this.searchResult.length - 1]).focus(); (list.childNodes[i].previousElementSibling || list.childNodes[this.result.length - 1]).focus();
break; break;
case e.which == 9: // [TAB] case e.which == 9: // [TAB]
case e.which == 40: // [↓] case e.which == 40: // [↓]
cancel(); cancel();
(this.$refs.searchResult.childNodes[i].nextElementSibling || this.$refs.searchResult.childNodes[0]).focus(); (list.childNodes[i].nextElementSibling || list.childNodes[0]).focus();
break; break;
} }
} }
@ -150,7 +160,6 @@ export default Vue.extend({
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-messaging .mk-messaging