supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Keep condensed open when new messages arrive

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-09 16:21:14 +03:00 committed by Pavel Djundik
parent 9ab5b9d791
commit 8e64670b4e
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/components/MessageCondensed.vue
View File

@ -1,11 +1,15 @@
<template> <template>
<div class="msg condensed closed" ref="condensedContainer"> <div :class="[ 'msg', 'condensed', { closed: isCollapsed } ]">
<div class="condensed-summary"> <div
<span class="time"></span> class="condensed-summary"
<span class="from"></span> @click="isCollapsed = !isCollapsed">
<span class="time"/>
<span class="from"/>
<span class="content"> <span class="content">
{{condensedText}} {{ condensedText }}
<button class="toggle-button" aria-label="Toggle status messages" @click="onExpandClick"></button> <button
class="toggle-button"
aria-label="Toggle status messages"/>
</span> </span>
</div> </div>
<Message <Message
@ -22,11 +26,16 @@ import Message from "./Message.vue";
export default { export default {
name: "MessageCondensed", name: "MessageCondensed",
components: { components: {
Message Message,
}, },
props: { props: {
messages: Array, messages: Array,
}, },
data() {
return {
isCollapsed: true,
};
},
computed: { computed: {
condensedText() { condensedText() {
const obj = {}; const obj = {};
@ -83,10 +92,5 @@ export default {
return text; return text;
}, },
}, },
methods: {
onExpandClick() {
this.$refs.condensedContainer.classList.toggle("closed");
},
},
}; };
</script> </script>

7
client/components/MessageList.vue
View File

@ -27,7 +27,10 @@
<span class="unread-marker-text"/> <span class="unread-marker-text"/>
</div> </div>
<MessageCondensed v-if="message.type === 'condensed'" :key="message.id" :messages="message.messages"/> <MessageCondensed
v-if="message.type === 'condensed'"
:key="message.id"
:messages="message.messages"/>
<Message <Message
v-else v-else
:message="message" :message="message"
@ -72,6 +75,7 @@ export default {
if (lastCondensedContainer === null) { if (lastCondensedContainer === null) {
lastCondensedContainer = { lastCondensedContainer = {
id: message.id, // Use id of first message in the condensed container
type: "condensed", type: "condensed",
messages: [], messages: [],
}; };
@ -79,7 +83,6 @@ export default {
condensed.push(lastCondensedContainer); condensed.push(lastCondensedContainer);
} }
lastCondensedContainer.id = message.id; // TODO
lastCondensedContainer.messages.push(message); lastCondensedContainer.messages.push(message);
} }