From c6353f3502842382a001a8a61ebe9e27885a6658 Mon Sep 17 00:00:00 2001 From: syuilo 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 @@
-
{{ $t('user') }}
- -
- - @{{ isMe(message) ? message.recipient : message.user | acct }} + +
+ {{ message.group.name }}
-
-

{{ $t('you') }}:{{ message.text }}

-
-
-
-
-
-
{{ $t('group') }}
- -
- -
- {{ message.group.name }} +
+ + @{{ isMe(message) ? message.recipient : message.user | acct }}
@@ -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