Move character counter into the input box

2 files changed, 33 insertions, 6 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 5dbb1c9d..ef6b0fce 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -269,8 +269,11 @@ const PostStatusForm = {
     resize (e) {
       const target = e.target || e
       if (!(target instanceof window.Element)) { return }
-      const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) +
-            Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1))
+      const topPaddingStr = window.getComputedStyle(target)['padding-top']
+      const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
+      // Remove "px" at the end of the values
+      const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) +
+            Number(bottomPaddingStr.substr(0, bottomPaddingStr.length - 2))
       // Auto is needed to make textbox shrink when removing lines
       target.style.height = 'auto'
       target.style.height = `${target.scrollHeight - vertPadding}px`
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index fbeaf39b..67cdc721 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -48,7 +48,7 @@
       <EmojiInput
         :suggest="emojiUserSuggestor"
         v-model="newStatus.status"
-        class="form-control"
+        class="form-control main-input"
         >
         <textarea
           ref="textarea"
@@ -65,6 +65,13 @@
           class="form-post-body"
         >
         </textarea>
+        <p
+          v-if="hasStatusLengthLimit"
+          class="character-counter faint"
+          :class="{ error: isOverLengthLimit }"
+        >
+          {{ charactersLeft }}
+        </p>
       </EmojiInput>
       <div class="visibility-tray">
         <div class="text-format" v-if="postFormats.length > 1">
@@ -109,8 +116,6 @@
           />
         </div>
       </div>
-      <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
-      <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
 
       <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
       <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
@@ -304,10 +309,12 @@
   }
 
   .form-post-body {
-    line-height:16px;
+    height: 16px; // Only affects the empty-height
+    line-height: 16px;
     resize: none;
     overflow: hidden;
     transition: min-height 200ms 100ms;
+    padding-bottom: 1.75em;
     min-height: 1px;
     box-sizing: content-box;
   }
@@ -316,6 +323,23 @@
     min-height: 48px;
   }
 
+  .main-input {
+    position: relative;
+  }
+
+  .character-counter {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0 0.5em;
+
+    &.error {
+      color: $fallback--cRed;
+      color: var(--cRed, $fallback--cRed);
+    }
+  }
+
   .btn {
     cursor: pointer;
   }