Merge branch 'feature/post-length-indicator' into 'develop'

Add an indicator for characters left before hitting the limit

See merge request pleroma/pleroma-fe!205

src/components/post_status_form/post_status_form.js

@@ -94,6 +94,18 @@ 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
     }
   },
   methods: {

src/components/post_status_form/post_status_form.vue

@@ -18,6 +18,9 @@
       </div>
       <div class='form-bottom'>
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
+
+        <p v-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 :disabled="submitDisabled" type="submit" class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button>
       </div>
@@ -67,6 +70,12 @@
          button {
              width: 10em;
          }
+
+         p {
+           margin: 0.35em;
+           padding: 0.35em;
+           display: flex;
+         }
      }
      .error {
        border-radius: 5px;

src/main.js

@@ -75,15 +75,23 @@ const i18n = new VueI18n({
   messages
 })
 
+window.fetch('/api/statusnet/config.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const {name, closed: registrationClosed, textlimit} = data.site
+
+    store.dispatch('setOption', { name: 'name', value: name })
+    store.dispatch('setOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
+    store.dispatch('setOption', { name: 'textlimit', value: parseInt(textlimit) })
+  })
+
 window.fetch('/static/config.json')
   .then((res) => res.json())
   .then((data) => {
-    const {name, theme, background, logo, registrationOpen} = data
+    const {theme, background, logo} = data
-    store.dispatch('setOption', { name: 'name', value: name })
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
-    store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen })
     if (data['chatDisabled']) {
       store.dispatch('disableChat')
     }

static/config.json

@@ -1,9 +1,7 @@
 {
-  "name": "Pleroma FE",
   "theme": "pleroma-dark",
   "background": "/static/bg.jpg",
   "logo": "/static/logo.png",
-  "registrationOpen": false,
   "defaultPath": "/main/all",
   "chatDisabled": false
 }