2 files changed, 26 insertions, 0 deletions
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index d4290c85..999aa732 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -98,6 +98,21 @@ const PostStatusForm = {
     },
     customEmoji () {
       return this.$store.state.config.customEmoji || []
+    },
+    statusLength () {
+      return this.newStatus.status.length
+    },
+    statusLengthLimit () {
+      return this.$store.state.config.textlimit
+    },
+    hasStatusLengthLimit () {
+      return this.statusLengthLimit > 0
+    },
+    charactersLeft () {
+      return this.statusLengthLimit - this.statusLength
+    },
+    isOverLengthLimit () {
+      return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit)
     }
   },
   methods: {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 4a6a574a..4871bcae 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -22,7 +22,12 @@
       </div>
       <div class='form-bottom'>
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
+
+        <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
+        <p v-else-if="hasStatusLengthLimit" class="base04">{{ charactersLeft }}</p>
+
         <button v-if="posting" disabled class="btn btn-default base05 base02-background">{{$t('post_status.posting')}}</button>
+        <button v-else-if="isOverLengthLimit" disabled class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button>
         <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button>
       </div>
       <div class='error' v-if="error">
@@ -71,6 +76,12 @@
          button {
              width: 10em;
          }
+
+         p {
+           margin: 0.35em;
+           padding: 0.35em;
+           display: flex;
+         }
      }
      .error {
        border-radius: 5px;