Feature/polls attempt 2

2 files changed, 101 insertions, 34 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index a7874acd..5dbb1c9d 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -2,6 +2,7 @@ import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
+import PollForm from '../poll/poll_form.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { reject, map, uniqBy } from 'lodash'
 import suggestor from '../emoji-input/suggestor.js'
@@ -31,8 +32,9 @@ const PostStatusForm = {
   ],
   components: {
     MediaUpload,
-    ScopeSelector,
-    EmojiInput
+    EmojiInput,
+    PollForm,
+    ScopeSelector
   },
   mounted () {
     this.resize(this.$refs.textarea)
@@ -75,10 +77,12 @@ const PostStatusForm = {
         status: statusText,
         nsfw: false,
         files: [],
+        poll: {},
         visibility: scope,
         contentType
       },
-      caret: 0
+      caret: 0,
+      pollFormVisible: false
     }
   },
   computed: {
@@ -153,8 +157,17 @@ const PostStatusForm = {
     safeDMEnabled () {
       return this.$store.state.instance.safeDM
     },
+    pollsAvailable () {
+      return this.$store.state.instance.pollsAvailable &&
+        this.$store.state.instance.pollLimits.max_options >= 2
+    },
     hideScopeNotice () {
       return this.$store.state.config.hideScopeNotice
+    },
+    pollContentError () {
+      return this.pollFormVisible &&
+        this.newStatus.poll &&
+        this.newStatus.poll.error
     }
   },
   methods: {
@@ -171,6 +184,12 @@ const PostStatusForm = {
         }
       }
 
+      const poll = this.pollFormVisible ? this.newStatus.poll : {}
+      if (this.pollContentError) {
+        this.error = this.pollContentError
+        return
+      }
+
       this.posting = true
       statusPoster.postStatus({
         status: newStatus.status,
@@ -180,7 +199,8 @@ const PostStatusForm = {
         media: newStatus.files,
         store: this.$store,
         inReplyToStatusId: this.replyTo,
-        contentType: newStatus.contentType
+        contentType: newStatus.contentType,
+        poll
       }).then((data) => {
         if (!data.error) {
           this.newStatus = {
@@ -188,9 +208,12 @@ const PostStatusForm = {
             spoilerText: '',
             files: [],
             visibility: newStatus.visibility,
-            contentType: newStatus.contentType
+            contentType: newStatus.contentType,
+            poll: {}
           }
+          this.pollFormVisible = false
           this.$refs.mediaUpload.clearFile()
+          this.clearPollForm()
           this.$emit('posted')
           let el = this.$el.querySelector('textarea')
           el.style.height = 'auto'
@@ -261,6 +284,17 @@ const PostStatusForm = {
     changeVis (visibility) {
       this.newStatus.visibility = visibility
     },
+    togglePollForm () {
+      this.pollFormVisible = !this.pollFormVisible
+    },
+    setPoll (poll) {
+      this.newStatus.poll = poll
+    },
+    clearPollForm () {
+      if (this.$refs.pollForm) {
+        this.$refs.pollForm.clear()
+      }
+    },
     dismissScopeNotice () {
       this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
     }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9929aab0..fbeaf39b 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="post-status-form">
-  <form @submit.prevent="postStatus(newStatus)">
+  <form @submit.prevent="postStatus(newStatus)" autocomplete="off">
     <div class="form-group" >
       <i18n
         v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
@@ -91,37 +91,52 @@
           :onScopeChange="changeVis"/>
       </div>
     </div>
-      <div class='form-bottom'>
+    <poll-form
+      ref="pollForm"
+      v-if="pollsAvailable"
+      :visible="pollFormVisible"
+      @update-poll="setPoll"
+    />
+    <div class='form-bottom'>
+      <div class='form-bottom-left'>
         <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
-
-        <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>
-        <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
-      </div>
-      <div class='alert error' v-if="error">
-        Error: {{ error }}
-        <i class="button-icon icon-cancel" @click="clearError"></i>
-      </div>
-      <div class="attachments">
-        <div class="media-upload-wrapper" v-for="file in newStatus.files">
-          <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
-          <div class="media-upload-container attachment">
-            <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
-            <video v-if="type(file) === 'video'" :src="file.url" controls></video>
-            <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
-            <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
-          </div>
+        <div v-if="pollsAvailable" class="poll-icon">
+          <i
+            :title="$t('polls.add_poll')"
+            @click="togglePollForm"
+            class="icon-chart-bar btn btn-default"
+            :class="pollFormVisible && 'selected'"
+          />
         </div>
       </div>
-      <div class="upload_settings" v-if="newStatus.files.length > 0">
-        <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
-        <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
+      <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>
+      <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
+    </div>
+    <div class='alert error' v-if="error">
+      Error: {{ error }}
+      <i class="button-icon icon-cancel" @click="clearError"></i>
+    </div>
+    <div class="attachments">
+      <div class="media-upload-wrapper" v-for="file in newStatus.files">
+        <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
+        <div class="media-upload-container attachment">
+          <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
+          <video v-if="type(file) === 'video'" :src="file.url" controls></video>
+          <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
+          <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
+        </div>
       </div>
-    </form>
-  </div>
+    </div>
+    <div class="upload_settings" v-if="newStatus.files.length > 0">
+      <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
+      <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
+    </div>
+  </form>
+</div>
 </template>
 
 <script src="./post_status_form.js"></script>
@@ -172,6 +187,11 @@
     }
   }
 
+  .form-bottom-left {
+    display: flex;
+    flex: 1;
+  }
+
   .text-format {
     .only-format {
       color: $fallback--faint;
@@ -179,6 +199,20 @@
     }
   }
 
+  .poll-icon {
+    font-size: 26px;
+    flex: 1;
+
+    .selected {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+
+  .icon-chart-bar {
+    cursor: pointer;
+  }
+  
 
   .error {
     text-align: center;
@@ -240,7 +274,6 @@
     }
   }
 
-
   .btn {
     cursor: pointer;
   }