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

Improve usability

Browse source
This commit is contained in:
syuilo 2019-05-21 06:53:18 +09:00
parent f09b8a78a0
commit c6353f3502
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
1 changed files with 14 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/client/app/common/views/components/messaging.vue
View file

@ -21,42 +21,23 @@
</div> </div>
</div> </div>
<div class="history" v-if="messages.length > 0"> <div class="history" v-if="messages.length > 0">
<div class="title">{{ $t('user') }}</div>
<a v-for="message in messages" <a v-for="message in messages"
class="user" class="user"
:href="`/i/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`" :href="message.groupId ? `/i/messaging/group/${message.groupId}` : `/i/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-is-me="isMe(message)" :data-is-me="isMe(message)"
:data-is-read="message.isRead" :data-is-read="message.groupId ? message.reads.includes($store.state.i.id) : message.isRead"
@click.prevent="navigate(isMe(message) ? message.recipient : message.user)" @click.prevent="message.groupId ? navigateGroup(message.group) : navigate(isMe(message) ? message.recipient : message.user)"
:key="message.id" :key="message.id"
> >
<div> <div>
<mk-avatar class="avatar" :user="isMe(message) ? message.recipient : message.user"/> <mk-avatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
<header> <header v-if="message.groupId">
<span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span> <span class="name">{{ message.group.name }}</span>
<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
<mk-time :time="message.createdAt"/> <mk-time :time="message.createdAt"/>
</header> </header>
<div class="body"> <header v-else>
<p class="text"><span class="me" v-if="isMe(message)">{{ $t('you') }}:</span>{{ message.text }}</p> <span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span>
</div> <span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
</div>
</a>
</div>
<div class="history" v-if="groupMessages.length > 0">
<div class="title">{{ $t('group') }}</div>
<a v-for="message in groupMessages"
class="user"
:href="`/i/messaging/group/${message.groupId}`"
:data-is-me="isMe(message)"
:data-is-read="message.reads.includes($store.state.i.id)"
@click.prevent="navigateGroup(message.group)"
:key="message.id"
>
<div>
<mk-avatar class="avatar" :user="message.user"/>
<header>
<span class="name">{{ message.group.name }}</span>
<mk-time :time="message.createdAt"/> <mk-time :time="message.createdAt"/>
</header> </header>
<div class="body"> <div class="body">
@ -97,7 +78,6 @@ export default Vue.extend({
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,
messages: [], messages: [],
groupMessages: [],
q: null, q: null,
result: [], result: [],
connection: null, connection: null,
@ -110,10 +90,11 @@ export default Vue.extend({
this.connection.on('message', this.onMessage); this.connection.on('message', this.onMessage);
this.connection.on('read', this.onRead); this.connection.on('read', this.onRead);
this.$root.api('messaging/history', { group: false }).then(messages => { this.$root.api('messaging/history', { group: false }).then(userMessages => {
this.$root.api('messaging/history', { group: true }).then(groupMessages => { this.$root.api('messaging/history', { group: true }).then(groupMessages => {
const messages = userMessages.concat(groupMessages);
messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
this.messages = messages; this.messages = messages;
this.groupMessages = groupMessages;
this.fetching = false; this.fetching = false;
}); });
}); });
@ -134,8 +115,8 @@ export default Vue.extend({
this.messages.unshift(message); this.messages.unshift(message);
} else if (message.groupId) { } else if (message.groupId) {
this.groupMessages = this.groupMessages.filter(m => m.groupId !== message.groupId); this.messages = this.messages.filter(m => m.groupId !== message.groupId);
this.groupMessages.unshift(message); this.messages.unshift(message);
} }
}, },
onRead(ids) { onRead(ids) {
@ -243,9 +224,6 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
> .history > .history
> .title
padding 8px
> a > a
&:last-child &:last-child
border-bottom none border-bottom none
@ -384,14 +362,6 @@ export default Vue.extend({
color rgba(#000, 0.3) color rgba(#000, 0.3)
> .history > .history
> .title
padding 6px 16px
margin 0 auto
max-width 500px
background rgba(0, 0, 0, 0.05)
color var(--text)
font-size 85%
> a > a
display block display block
text-decoration none text-decoration none