From 6f0257cd7df8eca257774a0c456af7218896946f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 23 Sep 2019 22:12:25 +0300
Subject: [PATCH] autoscroll post form on typing + some minor improvements
---
src/components/emoji_input/emoji_input.js | 4 +++-
.../post_status_form/post_status_form.js | 21 ++++++++++++++++++-
.../post_status_form/post_status_form.vue | 8 +++----
3 files changed, 26 insertions(+), 7 deletions(-)
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 5f90d7f460..25c21403c7 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -211,10 +211,12 @@ const EmojiInput = {
this.keepOpen = keepOpen
this.$emit('input', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length
+ if (!keepOpen) {
+ this.input.elm.focus()
+ }
this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion
- this.input.elm.focus()
// Set selection right after the replacement instead of the very end
this.input.elm.setSelectionRange(position, position)
this.caret = position
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index d468be76f3..60cb5a9a3d 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -249,6 +249,7 @@ const PostStatusForm = {
return fileTypeService.fileType(fileInfo.mimetype)
},
paste (e) {
+ this.resize()
if (e.clipboardData.files.length > 0) {
// prevent pasting of file as text
e.preventDefault()
@@ -267,6 +268,11 @@ const PostStatusForm = {
fileDrag (e) {
e.dataTransfer.dropEffect = 'copy'
},
+ onEmojiInputInput (e) {
+ this.$nextTick(() => {
+ this.resize(this.$refs['textarea'])
+ })
+ },
resize (e) {
const target = e.target || e
if (!(target instanceof window.Element)) { return }
@@ -275,12 +281,25 @@ const PostStatusForm = {
// Remove "px" at the end of the values
const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) +
Number(bottomPaddingStr.substr(0, bottomPaddingStr.length - 2))
+ const oldValue = Number((/([0-9.]+)px/.exec(target.style.height || '') || [])[1])
// Auto is needed to make textbox shrink when removing lines
target.style.height = 'auto'
- target.style.height = `${target.scrollHeight - vertPadding}px`
+ const newValue = target.scrollHeight - vertPadding
+ target.style.height = `${newValue}px`
+ const scroller = this.$el.closest('.sidebar-scroller') ||
+ this.$el.closest('.post-form-modal-view') ||
+ window
+ const delta = newValue - oldValue || 0
if (target.value === '') {
target.style.height = null
+ } else {
+ /* For some reason this doens't _exactly_ work on mobile post form when typing
+ * but it works when adding emojis. Supposedly, removing the "height = auto"
+ * line helps with that but it obviously breaks the autoheight.
+ */
+ scroller.scrollBy(0, delta)
}
+ this.$refs['emoji-input'].resize()
},
showEmojiPicker () {
this.$refs['textarea'].focus()
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index b50607e6ae..99ffeef8ee 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -81,6 +81,7 @@
enable-emoji-picker
hide-emoji-button
enable-sticker-picker
+ @input="onEmojiInputInput"
@sticker-uploaded="addMediaFile"
@sticker-upload-failed="uploadFailed"
>
@@ -95,7 +96,8 @@
@keyup.ctrl.enter="postStatus(newStatus)"
@drop="fileDrop"
@dragover.prevent="fileDrag"
- @input="resize"
+ @keydown.exact="resize"
+ @compositionupdate="resize"
@paste="paste"
/>
<p
@@ -475,10 +477,6 @@
box-sizing: content-box;
}
- .form-post-body:focus {
- min-height: 48px;
- }
-
.main-input {
position: relative;
}
--
GitLab