diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue index e10a5ec..163013b 100644 --- a/src/components/app/MessagePanel.vue +++ b/src/components/app/MessagePanel.vue @@ -9,7 +9,7 @@
-
+
import("@/components/app/EmojiPanels/emojiPanel.vue"); const EditPanel = () => import("@/components/app/EditPanel.vue"); @@ -247,7 +248,7 @@ export default { } }, 2000) }, - resize(event) { + resize() { let input = this.$refs["input-box"]; if (input.scrollHeight < 50) { @@ -255,6 +256,8 @@ export default { } else { input.style.height = "auto"; input.style.height = `calc(${input.scrollHeight}px - 1em)`; + this.scrollDown(false, undefined, input.scrollHeight); + } }, emojiSwitchKey(event) { @@ -308,7 +311,6 @@ export default { this.$store.dispatch("setEmojiArray", searchArr); }, async onInput(event) { - this.resize(event); this.messageLength = this.message.length; const value = event.target.value.trim(); if (value && this.postTimerID == null) { @@ -317,7 +319,7 @@ export default { } }, keyUp(event) { - this.resize(event); + this.resize(); this.showEmojiPopout(event); }, enterEmojiSuggestion() { @@ -388,17 +390,6 @@ export default { } }, - invertScroll(event) { - if (event.deltaY) { - event.preventDefault(); - event.currentTarget.scrollTop -= - parseFloat( - getComputedStyle(event.currentTarget).getPropertyValue("font-size") - ) * - (event.deltaY < 0 ? -1 : 1) * - 2; - } - }, hideTypingStatus(data) { if (this.user.uniqueID === data.message.creator.uniqueID) return; if (!this.typingRecipients[data.channelID] || !this.typingRecipients[data.channelID][data.message.creator.uniqueID]) return; @@ -452,7 +443,7 @@ export default { } bus.$emit("title:change", "Nertivia"); if (!this.$store.getters.selectedChannelID) return; - //dismiss notification on focus + //dismiss notification on focus const find = this.$store.getters.notifications.find(notification => { return notification.channelID === this.$store.getters.selectedChannelID; }); @@ -461,6 +452,18 @@ export default { channelID: this.$store.getters.selectedChannelID }); } + }, + scrollDown(ignoreScrolledDown, el, minScroll = 100) { + const element = el || this.$refs['msg-logs']; + if (!element) return; + const currentScroll = element.scrollHeight - element.scrollTop; + const total = element.clientHeight; + if ( ignoreScrolledDown || ( currentScroll <= total + minScroll ) ){ + element.scrollTop = element.scrollHeight; + } + }, + onResize(dimentions) { + this.scrollDown(); } }, mounted() { @@ -515,12 +518,38 @@ export default { delete this.$options.sockets.typingStatus; }, watch: { + selectedChannelMessages(newMessages, oldMessages){ + let element = this.$refs['msg-logs']; + let currentScroll; + let total; + if (element) { + currentScroll = element.scrollHeight - element.scrollTop + total = element.clientHeight + } + + this.$nextTick(function () { + if (oldMessages === undefined) { + this.scrollDown(true); + } else { + if (currentScroll === total) { + this.scrollDown(true); + } + } + }) + }, editMessage(editMessage) { if (!editMessage) { this.message = "" } else { this.message = emojiParser.emojiToShortcode(editMessage.message) } + this.$nextTick(() => { + this.resize(); + this.scrollDown(); + }) + }, + getWindowWidth(dimentions) { + this.onResize(dimentions) } }, computed: { @@ -584,7 +613,10 @@ export default { let editMessage = this.$store.getters.popouts.editMessage; if (!editMessage) return null; return editMessage; - } + }, + getWindowWidth() { + return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight}; + }, } }; @@ -641,7 +673,7 @@ export default { } .message-logs, .message-logs .scroll { - transform: scale(1, -1) translate3d(0,0,0); + /* transform: scale(1, -1) translate3d(0,0,0); */ margin-right: 5px; } diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue index d7ba871..3db0510 100644 --- a/src/components/app/MessageTemplate.vue +++ b/src/components/app/MessageTemplate.vue @@ -48,9 +48,7 @@
-
+
= max ? max : num; + }, + calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { + let ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight); + return { width: srcWidth*ratio, height: srcHeight*ratio }; + }, + imageSize() { + const messageLog = document.querySelector('.scroll'); + const w = messageLog.offsetWidth; + const h = messageLog.offsetHeight; + + const minWidth = w / 2; + const minHeight = h / 2; + + const files = this.$props.files; + if (!files || files.length === 0 || !files[0].dimensions) + return undefined; + const dimensions = this.$props.files[0].dimensions + const srcWidth = dimensions.width; + const srcHeight = dimensions.height; + + const newDimentions = this.calculateAspectRatioFit(srcWidth, srcHeight, minWidth, minHeight); + + const imageTag = this.$refs['image']; + + imageTag.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px" + imageTag.style.height = this.clamp(newDimentions.height, 0, srcHeight) + "px" + }, + onResize(dimentions) { + this.imageSize(); } }, + watch: { + getWindowWidth(dimentions) { + this.onResize(dimentions) + } + }, + mounted() { + const files = this.files; + if (!files || files.length === 0 || !files[0].dimensions) + return undefined; + this.imageSize(); + }, computed: { ...mapState("settingsModule", ["apperance"]), getImage() { @@ -194,7 +236,10 @@ export default { }, user() { return this.$store.getters.user; - } + }, + getWindowWidth() { + return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight}; + }, } }; @@ -203,7 +248,7 @@ export default { diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue index f5f32ec..51f9f37 100644 --- a/src/components/app/Tabs/Servers.vue +++ b/src/components/app/Tabs/Servers.vue @@ -96,6 +96,7 @@ export default { right: 0; bottom: 0; height: calc(100% - 40px); + z-index: 1; } } @@ -105,6 +106,7 @@ export default { background-color: rgba(39, 39, 39, 0.97); bottom: 0; height: calc(100% - 40px); + z-index: 2; } } diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue index 4f96ee7..a339f2f 100644 --- a/src/components/app/relationships/FriendsTemplate.vue +++ b/src/components/app/relationships/FriendsTemplate.vue @@ -1,7 +1,7 @@