From bb0450cb317b53566a17eacaf12ffb567872b09e Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Fri, 13 Jul 2018 13:43:11 +0300 Subject: [PATCH] Move history logic to MessageList, fix previews not keeping scroll --- client/components/Chat.vue | 109 +------------- client/components/ChatInput.vue | 22 ++- client/components/LinkPreview.vue | 30 ++-- client/components/Message.vue | 14 +- client/components/MessageList.vue | 172 +++++++++++++++++----- client/components/MessageTypes/action.vue | 30 ---- client/js/socket-events/msg_preview.js | 3 - 7 files changed, 181 insertions(+), 199 deletions(-) delete mode 100644 client/components/MessageTypes/action.vue diff --git a/client/components/Chat.vue b/client/components/Chat.vue index 14df581d..e42cfa0b 100644 --- a/client/components/Chat.vue +++ b/client/components/Chat.vue @@ -54,25 +54,7 @@
-
-
- -
- -
+ @@ -87,8 +69,6 @@ diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue index fe52bf70..2c5cd524 100644 --- a/client/components/ChatInput.vue +++ b/client/components/ChatInput.vue @@ -67,20 +67,18 @@ export default { channel: Object, }, watch: { - "channel.pendingMessage": { - handler: function() { - const style = window.getComputedStyle(this.$refs.input); - const lineHeight = parseFloat(style.lineHeight, 10) || 1; + "channel.pendingMessage"() { + const style = window.getComputedStyle(this.$refs.input); + const lineHeight = parseFloat(style.lineHeight, 10) || 1; - // Start by resetting height before computing as scrollHeight does not - // decrease when deleting characters - resetInputHeight(this); + // Start by resetting height before computing as scrollHeight does not + // decrease when deleting characters + resetInputHeight(this); - // Use scrollHeight to calculate how many lines there are in input, and ceil the value - // because some browsers tend to incorrently round the values when using high density - // displays or using page zoom feature - this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px"; - }, + // Use scrollHeight to calculate how many lines there are in input, and ceil the value + // because some browsers tend to incorrently round the values when using high density + // displays or using page zoom feature + this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px"; }, }, mounted() { diff --git a/client/components/LinkPreview.vue b/client/components/LinkPreview.vue index 058714ee..ad730b46 100644 --- a/client/components/LinkPreview.vue +++ b/client/components/LinkPreview.vue @@ -125,6 +125,7 @@ export default { name: "LinkPreview", props: { link: Object, + keepScrollPosition: Function, }, data() { return { @@ -137,29 +138,36 @@ export default { return this.isContentShown ? "Less" : "More"; }, }, + watch: { + "link.type"() { + this.onPreviewUpdate(); + }, + }, mounted() { // Don't display previews while they are loading on the server if (this.link.type === "loading") { return; } - // Error don't have any media to render - if (this.link.type === "error") { - this.onPreviewReady(); - } - - // If link doesn't have a thumbnail, render it - if (this.link.type === "link" && !this.link.thumb) { - this.onPreviewReady(); - } + this.onPreviewUpdate(); }, methods: { + onPreviewUpdate() { + // Error don't have any media to render + if (this.link.type === "error") { + this.onPreviewReady(); + } + + // If link doesn't have a thumbnail, render it + if (this.link.type === "link" && !this.link.thumb) { + this.onPreviewReady(); + } + }, onPreviewReady() { const options = require("../js/options"); this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type)); - // parent 1 - message - parent 2 - messagelist - this.$parent.$parent.$emit("keepScrollPosition"); + this.keepScrollPosition(); if (this.link.type !== "link") { return; diff --git a/client/components/Message.vue b/client/components/Message.vue index e673e373..097bc547 100644 --- a/client/components/Message.vue +++ b/client/components/Message.vue @@ -21,6 +21,17 @@ :is="messageComponent" :message="message"/> +