Poll form

src/components/poll/poll_container/poll_container.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="poll-container">
+    <hr />
+    <div class="poll-option"
+      v-for="(option, index) in options"
+      :key="index">
+      <div class="input-container">
+        <input
+          class="poll-option-input"
+          type="text"
+          :placeholder="$t('polls.option')"
+          v-model="options[index]" />
+      </div>
+      <div class="icon-container">
+        <i class="icon-cancel" @click="onDeleteOption(index)"></i>
+      </div>
+    </div>
+    <button
+      class="btn btn-default add-option"
+      type="button"
+      @click="onAddOption">{{ $t("polls.add_option") }}
+    </button>
+  </div>
+</template>
+
+<script>
+// TODO: Make this configurable
+const maxOptions = 10
+
+export default {
+  name: 'PollContainer',
+  data () {
+    return {
+      options: ['', '']
+    }
+  },
+  computed: {
+    optionsLength: function () {
+      return this.$data.options.length
+    }
+  },
+  methods: {
+    onAddOption () {
+      if (this.optionsLength < maxOptions) {
+        this.$data.options.push('')
+      }
+    },
+    onDeleteOption (index) {
+      if (this.optionsLength > 1) {
+        this.$data.options.splice(index, 1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.poll-container {
+  padding: 0 0.5em 0.6em;
+  hr {
+    margin: 0 0 0.8em;
+    border: solid 1px #1c2735;
+  }
+  .add-option {
+    margin: 0.8em 0 0;
+    width: 94%;
+  }
+  .poll-option {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+  .input-container {
+    width: 94%;
+    input {
+      width: 100%;
+    }
+  }
+  .icon-container {
+    width: 5%;
+  }
+}
+</style>

src/components/poll/poll_icon/poll_icon.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="poll">
+    <label class="btn btn-default" :title="$t('tool_tip.poll')">
+      <i class="icon-chart-bar"></i>
+    </label>
+  </div>
+</template>
+
+<style>
+.poll {
+  font-size: 26px;
+  flex: 1;
+}
+
+.icon-chart-bar {
+  cursor: pointer;
+}
+</style>

src/components/post_status_form/post_status_form.js

@@ -1,6 +1,8 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
+import PollContainer from '../poll/poll_container/poll_container.vue'
+import PollIcon from '../poll/poll_icon/poll_icon.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
 import { take, filter, reject, map, uniqBy } from 'lodash'
@@ -30,7 +32,9 @@ const PostStatusForm = {
   ],
   components: {
     MediaUpload,
-    EmojiInput
+    EmojiInput,
+    PollContainer,
+    PollIcon
   },
   mounted () {
     this.resize(this.$refs.textarea)

src/components/post_status_form/post_status_form.vue

@@ -71,9 +71,10 @@
           </div>
         </div>
       </div>
+      <poll-container />
       <div class='form-bottom'>
         <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
-
+        <poll-icon />
         <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
         <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
 

src/i18n/en.json

@@ -66,6 +66,10 @@
     "repeated_you": "repeated your status",
     "no_more_notifications": "No more notifications"
   },
+  "polls": {
+    "add_option": "Add Option",
+    "option": "Option"
+  },
   "post_status": {
     "new_status": "Post new status",
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
@@ -415,7 +419,8 @@
     "repeat": "Repeat",
     "reply": "Reply",
     "favorite": "Favorite",
-    "user_settings": "User Settings"
+    "user_settings": "User Settings",
+    "poll": "Add Poll"
   },
   "upload":{
     "error": {