|
|
@ -7,16 +7,17 @@
|
|
|
|
<timeline
|
|
|
|
<timeline
|
|
|
|
:timeline="room.timeline" :group-timeline="isGroup()"
|
|
|
|
:timeline="room.timeline" :group-timeline="isGroup()"
|
|
|
|
:user="user" :roomId="room.roomId"
|
|
|
|
:user="user" :roomId="room.roomId"
|
|
|
|
:setReplyTo="event=>{replyTo=event; resize();}"
|
|
|
|
:setReplyTo="setReplyTo"
|
|
|
|
|
|
|
|
:on-update="()=>$nextTick(resize)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
|
|
|
|
<icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<newMessage
|
|
|
|
<newMessage
|
|
|
|
:onResize="height=>resize(height)" :roomId="room.roomId" ref="newMessage"
|
|
|
|
:onResize="resize" :roomId="room.roomId" ref="newMessage"
|
|
|
|
:replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
|
|
|
|
:replyTo="replyTo" :resetReplyTo="resetReplyTo"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
|
|
|
|
<topBanner :room="room" :close-chat="closeChat" :open-chat-info="openChatInfo"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
@ -28,6 +29,7 @@ import {matrix} from '@/main';
|
|
|
|
import splitArray from '@/lib/splitArray.js'
|
|
|
|
import splitArray from '@/lib/splitArray.js'
|
|
|
|
import timeline from '@/components/timeline';
|
|
|
|
import timeline from '@/components/timeline';
|
|
|
|
import scrollHandler from '@/lib/scrollHandler';
|
|
|
|
import scrollHandler from '@/lib/scrollHandler';
|
|
|
|
|
|
|
|
import {getUser} from "@/lib/matrixUtils";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'chat',
|
|
|
|
name: 'chat',
|
|
|
@ -48,8 +50,9 @@ export default {
|
|
|
|
if (this.$refs.timelineContainer.scrollTop < 400 && this.loadingStatus !== 'loading') this.loadEvents();
|
|
|
|
if (this.$refs.timelineContainer.scrollTop < 400 && this.loadingStatus !== 'loading') this.loadEvents();
|
|
|
|
this.showScrollBtn = this.scroll.getScrollBottom() > 500;
|
|
|
|
this.showScrollBtn = this.scroll.getScrollBottom() > 500;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
resize(height = this.$refs.newMessage.clientHeight){
|
|
|
|
resize(height = this.$refs.newMessage.$refs.newMessageBanner.clientHeight){
|
|
|
|
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
|
|
|
|
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
|
|
|
|
|
|
|
|
this.manageScrollBottom();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
isGroup(){
|
|
|
|
isGroup(){
|
|
|
|
return Object.keys(this.room.currentState.members).length > 2;
|
|
|
|
return Object.keys(this.room.currentState.members).length > 2;
|
|
|
@ -61,9 +64,19 @@ export default {
|
|
|
|
this.loadingStatus = 'load more';
|
|
|
|
this.loadingStatus = 'load more';
|
|
|
|
this.scroll.setScrollBottom(scrollBottom)
|
|
|
|
this.scroll.setScrollBottom(scrollBottom)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getUser(userId){
|
|
|
|
setReplyTo(event){
|
|
|
|
return matrix.client.getUser(userId);
|
|
|
|
this.replyTo=event;
|
|
|
|
|
|
|
|
this.$refs.newMessage.focusInput();
|
|
|
|
|
|
|
|
this.$nextTick(this.resize);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
resetReplyTo(){
|
|
|
|
|
|
|
|
this.replyTo=undefined;
|
|
|
|
|
|
|
|
this.$nextTick(this.resize);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
manageScrollBottom(){
|
|
|
|
|
|
|
|
if(this.scroll.getScrollBottom() < 400 && this.loadingStatus !== 'loading') this.scroll.scrollToBottom();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
getUser,
|
|
|
|
splitArray
|
|
|
|
splitArray
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data(){
|
|
|
|
data(){
|
|
|
@ -76,7 +89,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
updated(){
|
|
|
|
updated(){
|
|
|
|
if(this.scroll.getScrollBottom() < 400 && this.loadingStatus !== 'loading') this.scroll.scrollToBottom();
|
|
|
|
this.manageScrollBottom();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted(){
|
|
|
|
mounted(){
|
|
|
|
this.scroll = new scrollHandler(this.$refs.timelineContainer);
|
|
|
|
this.scroll = new scrollHandler(this.$refs.timelineContainer);
|
|
|
|