Address feedback

Use more specific css rules for the emoji dimensions in the chat list status preview.

Use more round em value for chat list item height.
Add global html overflow and height for smoother chat navigation in
the desktop Safari.

Use offsetHeight instad of a computed style when setting the window height on resize.

Remove margin-bottom from the last message to avoid occasional layout shift in the desktop Safari

Use break-word to prevent chat message text overflow

Resize and scroll the textarea when inserting a new line on ctrl+enter

Remove fade transition on route change

Ensure proper border radius at the bottom of the chat, remove unused border-radius

Prevent the chat header "jumping" on the avatar load.

2 files changed, 23 insertions, 16 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 90d0fa81..59e4dc26 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -43,7 +43,7 @@ const PostStatusForm = {
     'disableSubmit',
     'placeholder',
     'maxHeight',
-    'request',
+    'postHandler',
     'preserveFocus',
     'autoFocus',
     'fileLimit',
@@ -221,10 +221,6 @@ const PostStatusForm = {
         event.stopPropagation()
         event.preventDefault()
       }
-      if (opts.control && this.submitOnEnter) {
-        newStatus.status = `${newStatus.status}\n`
-        return
-      }
 
       if (this.emptyStatus) {
         this.error = this.$t('post_status.empty_status_error')
@@ -259,9 +255,9 @@ const PostStatusForm = {
         poll
       }
 
-      const request = this.request ? this.request : statusPoster.postStatus
+      const postHandler = this.postHandler ? this.postHandler : statusPoster.postStatus
 
-      request(postingOptions).then((data) => {
+      postHandler(postingOptions).then((data) => {
         if (!data.error) {
           this.newStatus = {
             status: '',
@@ -345,11 +341,7 @@ const PostStatusForm = {
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
-
-      // TODO: use fixed dimensions instead so relying on timeout
-      setTimeout(() => {
-        this.$emit('resize')
-      }, 150)
+      this.$emit('resize', { delayed: true })
     },
     removeMediaFile (fileInfo) {
       let index = this.newStatus.files.indexOf(fileInfo)
@@ -364,6 +356,7 @@ const PostStatusForm = {
       this.uploadingFiles = true
     },
     finishedUploadingFiles () {
+      this.$emit('resize')
       this.uploadingFiles = false
     },
     type (fileInfo) {
@@ -417,7 +410,7 @@ const PostStatusForm = {
       // Reset to default height for empty form, nothing else to do here.
       if (target.value === '') {
         target.style.height = null
-        this.$emit('resize', null)
+        this.$emit('resize')
         this.$refs['emoji-input'].resize()
         return
       }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d8df68d6..7454958b 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -131,6 +131,7 @@
           class="form-control main-input"
           enable-emoji-picker
           hide-emoji-button
+          :newline-on-ctrl-enter="submitOnEnter"
           enable-sticker-picker
           @input="onEmojiInputInput"
           @sticker-uploaded="addMediaFile"
@@ -146,8 +147,8 @@
             class="form-post-body"
             :class="{ 'scrollable-form': !!maxHeight }"
             @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
-            @keydown.meta.enter="postStatus($event, newStatus, { control: true })"
-            @keydown.ctrl.enter="postStatus($event, newStatus)"
+            @keydown.meta.enter="postStatus($event, newStatus)"
+            @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
             @input="resize"
             @compositionupdate="resize"
             @paste="paste"
@@ -435,6 +436,19 @@
         color: var(--lightText, $fallback--lightText);
       }
     }
+
+    &.disabled {
+      i {
+        cursor: not-allowed;
+        color: $fallback--icon;
+        color: var(--btnDisabledText, $fallback--icon);
+
+        &:hover {
+          color: $fallback--icon;
+          color: var(--btnDisabledText, $fallback--icon);
+        }
+      }
+    }
   }
 
   // Order is not necessary but a good indicator
@@ -628,7 +642,7 @@
 }
 
 // todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
-img.media-upload {
+img.media-upload, .media-upload-container > video {
   line-height: 0;
   max-height: 200px;
   max-width: 100%;