Keep condensed open when new messages arrive

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

View file

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

View file

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