Poll voting form

src/components/poll/poll.vue

@@ -0,0 +1,23 @@
+<template>
+  <poll-results v-if="currentUserHasVoted" :poll="poll" />
+  <poll-vote v-else :poll="poll" />
+</template>
+
+<script>
+import PollResults from './poll_results/poll_results.vue'
+import PollVote from './poll_vote/poll_vote.vue'
+
+export default {
+  name: 'Poll',
+  props: ['poll'],
+  components: {
+    PollResults,
+    PollVote
+  },
+  computed: {
+    currentUserHasVoted () {
+      return false
+    }
+  }
+}
+</script>

src/components/poll/poll_form/poll_form.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="poll-form">
+  <div class="poll-form" v-if="visible">
     <hr />
     <div class="poll-option"
       v-for="(option, index) in options"
@@ -30,6 +30,7 @@ const maxOptions = 10
 
 export default {
   name: 'PollForm',
+  props: ['visible'],
   computed: {
     optionsLength: function () {
       return this.$store.state.poll.pollOptions.length

src/components/poll/poll_icon/poll_icon.vue

@@ -1,18 +0,0 @@
-<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/poll/poll_results/poll_results.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="poll-status">
+  <div class="poll-results">
     <div class="votes">
       <div
         class="poll-option"
@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: 'PollStatus',
+  name: 'PollResults',
   props: ['poll'],
   computed: {
     totalVotesCount () {
@@ -32,18 +32,14 @@ export default {
   },
   methods: {
     percentageForOption: function (count) {
-      if (this.totalVotesCount === 0) {
-        return 0
-      }
-
-      return (count / this.totalVotesCount * 100).toFixed(1)
+      return (this.totalVotesCount === 0 ? 0 : (count / this.totalVotesCount * 100)).toFixed(1)
     }
   }
 }
 </script>
 
 <style lang="scss">
-.poll-status {
+.poll-results {
   margin: 0.7em 0;
   .votes {
     display: table;

src/components/poll/poll_vote/poll_vote.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="poll-vote" v-bind:class="containerClass">
+    <div
+      class="poll-choice"
+      v-for="(pollOption, index) in poll.votes"
+      :key="index">
+        <input
+          :disabled="loading"
+          type="radio"
+          :id="optionID(index)"
+          :value="pollOption.name"
+          name="choice"
+          @change="onChoice">
+        <label :for="optionID(index)">{{pollOption.name}}</label>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'PollVote',
+  props: ['poll'],
+  data () {
+    return {
+      loading: false
+    }
+  },
+  computed: {
+    containerClass: function () {
+      return {
+        loading: this.loading
+      }
+    }
+  },
+  methods: {
+    optionID (index) {
+      return `pollOption${index}`
+    },
+    onChoice (e) {
+      this.loading = true
+      console.log(e.target.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.poll-vote {
+  margin: 0.7em 0 0;
+
+  &.loading * {
+    cursor: progress;
+  }
+  .poll-choice {
+    padding: 0.4em 0;
+  }
+}
+</style>

src/components/post_status_form/post_status_form.js

@@ -85,7 +85,8 @@ const PostStatusForm = {
         visibility: scope,
         contentType
       },
-      caret: 0
+      caret: 0,
+      pollFormVisible: false
     }
   },
   computed: {
@@ -343,6 +344,9 @@ const PostStatusForm = {
     },
     changeVis (visibility) {
       this.newStatus.visibility = visibility
+    },
+    togglePollForm () {
+      this.pollFormVisible = !this.pollFormVisible
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -71,10 +71,17 @@
           </div>
         </div>
       </div>
-      <poll-form />
+      <poll-form :visible="pollFormVisible" />
       <div class='form-bottom'>
         <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
-        <poll-icon />
+        <div class="poll-icon">
+          <label
+            class="btn btn-default"
+            :title="$t('tool_tip.poll')"
+            @click="togglePollForm">
+            <i class="icon-chart-bar"></i>
+          </label>
+        </div>
         <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
         <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
 
@@ -268,4 +275,12 @@
     z-index: 4;
   }
 }
+.poll-icon {
+  font-size: 26px;
+  flex: 1;
+}
+
+.icon-chart-bar {
+  cursor: pointer;
+}
 </style>

src/components/settings/settings.vue

@@ -327,7 +327,6 @@
     min-width: 10em;
   }
 
-
   textarea {
     width: 100%;
     height: 100px;

src/components/status/status.js

@@ -2,7 +2,7 @@ import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
-import PollStatus from '../poll/poll_status/poll_status.vue'
+import Poll from '../poll/poll.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
@@ -266,7 +266,7 @@ const Status = {
     RetweetButton,
     DeleteButton,
     PostStatusForm,
-    PollStatus,
+    Poll,
     UserCard,
     UserAvatar,
     Gallery,

src/components/status/status.vue

@@ -111,7 +111,7 @@
           </div>
 
           <div v-if="status.poll.votes">
-            <poll-status :poll="status.poll" />
+            <poll :poll="status.poll" />
           </div>
 
           <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">