From c6353f3502842382a001a8a61ebe9e27885a6658 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 21 May 2019 06:53:18 +0900
Subject: [PATCH] Improve usability
---
.../app/common/views/components/messaging.vue | 58 +++++--------------
1 file changed, 14 insertions(+), 44 deletions(-)
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index c7c70a4ce5..cdd35ee8ab 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -21,42 +21,23 @@
</div>
</div>
<div class="history" v-if="messages.length > 0">
- <div class="title">{{ $t('user') }}</div>
<a v-for="message in messages"
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-read="message.isRead"
- @click.prevent="navigate(isMe(message) ? message.recipient : message.user)"
+ :data-is-read="message.groupId ? message.reads.includes($store.state.i.id) : message.isRead"
+ @click.prevent="message.groupId ? navigateGroup(message.group) : navigate(isMe(message) ? message.recipient : message.user)"
:key="message.id"
>
<div>
- <mk-avatar class="avatar" :user="isMe(message) ? message.recipient : message.user"/>
- <header>
- <span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span>
- <span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
+ <mk-avatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
+ <header v-if="message.groupId">
+ <span class="name">{{ message.group.name }}</span>
<mk-time :time="message.createdAt"/>
</header>
- <div class="body">
- <p class="text"><span class="me" v-if="isMe(message)">{{ $t('you') }}:</span>{{ message.text }}</p>
- </div>
- </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>
+ <header v-else>
+ <span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span>
+ <span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
<mk-time :time="message.createdAt"/>
</header>
<div class="body">
@@ -97,7 +78,6 @@ export default Vue.extend({
fetching: true,
moreFetching: false,
messages: [],
- groupMessages: [],
q: null,
result: [],
connection: null,
@@ -110,10 +90,11 @@ export default Vue.extend({
this.connection.on('message', this.onMessage);
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 => {
+ const messages = userMessages.concat(groupMessages);
+ messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
this.messages = messages;
- this.groupMessages = groupMessages;
this.fetching = false;
});
});
@@ -134,8 +115,8 @@ export default Vue.extend({
this.messages.unshift(message);
} else if (message.groupId) {
- this.groupMessages = this.groupMessages.filter(m => m.groupId !== message.groupId);
- this.groupMessages.unshift(message);
+ this.messages = this.messages.filter(m => m.groupId !== message.groupId);
+ this.messages.unshift(message);
}
},
onRead(ids) {
@@ -243,9 +224,6 @@ export default Vue.extend({
font-size 0.8em
> .history
- > .title
- padding 8px
-
> a
&:last-child
border-bottom none
@@ -384,14 +362,6 @@ export default Vue.extend({
color rgba(#000, 0.3)
> .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
display block
text-decoration none