fix setReply / add manageScrollBottom

dev
adb 3 years ago
parent 30a7e4da81
commit 8a9b5a478b

@ -29,10 +29,10 @@
:key="event.origin_server_ts" :key="event.origin_server_ts"
:class="groupTimeline?'indent event':'event'" :class="groupTimeline?'indent event':'event'"
:title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`" :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
@contextmenu.prevent="setReplyTo(event)" @contextmenu.prevent.native="setReplyTo(event)"
:type="event.sender === user?'send':'receive'" :type="event.sender === user?'send':'receive'"
:event="event" :event="event"
:on-update="()=>onUpdate()" :on-update="onUpdate"
/> />
</div> </div>
</div> </div>

@ -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);

Loading…
Cancel
Save