Add number of votes on poll answers

app/assets/javascripts/app/views/poll_view.js

@@ -89,8 +89,8 @@ app.views.Poll = app.views.Base.extend({
   },
 
   toggleElements: function() {
-    this.$('.percentage').toggle();
+    this.$(".poll-result").toggle();
-    this.$('.progress').toggle();
+    this.$(".progress").toggle();
   },
 
   clickSubmit: function(evt) {
@@ -117,4 +117,3 @@ app.views.Poll = app.views.Base.extend({
 
 });
 // @license-end
-

app/assets/stylesheets/poll.scss

@@ -4,10 +4,6 @@
   margin: 10px 0;
   padding: 10px 0 5px;
 
-  .poll-content {
-    margin-top: 5px;
-  }
-
   .toggle-result-wrapper {
     display: inline-block;
     margin-top: 10px;
@@ -17,8 +13,6 @@
     margin-bottom: 0;
   }
 
-  .result-row > label { width: 100%; }
-
   .progress {
     background-image: none;
     box-shadow: 0 0 0;
@@ -43,3 +37,24 @@
     }
   }
 }
+
+.poll-content {
+  margin-top: 5px;
+
+  [type=radio],
+  label {
+    font-weight: normal;
+    margin-bottom: 5px;
+    vertical-align: middle;
+  }
+
+  [type=radio],
+  form .poll-result,
+  form .progress {
+    display: none; // Hide the result by default when the vote is possible
+  }
+
+  form [type=radio] {
+    display: inline;
+  }
+}

app/assets/templates/poll_tpl.jst.hbs

@@ -9,35 +9,27 @@
     <div class="poll-content">
       {{#if show_form}}
         <form action="/posts/{{poll.post_id}}/poll_participations" method="POST">
+      {{/if}}
       {{#poll.poll_answers}}
-            <div class="radio result-row">
+        <div class="result-row">
-              <label>
           <input type="radio" name="vote" value="{{id}}"/>
-                {{answer}}
+          <label>{{answer}}</label>
-                <span class="percentage pull-right" style="display: none;"></span>
+          <div class="poll-result pull-right">
-                <div class="poll_progress_bar_wrapper progress" style="display: none">
+            <span class="percentage"></span>
+            ({{t "poll.answer_count" count=vote_count}})
+          </div>
+          <div class="poll_progress_bar_wrapper progress">
             <div class="poll_progress_bar bar" data-answerid="{{id}}" style="height: 100%"></div>
           </div>
-              </label>
         </div>
       {{/poll.poll_answers}}
+      {{#if show_form}}
           <div class="toggle-result-wrapper">
             <a class="toggle_result" href="#">{{t "poll.show_result"}}</a>
           </div>
           <input type="submit" class="submit pull-right btn btn-default" value="{{t "poll.vote"}}"/>
           <div class="clearfix"></div>
         </form>
-      {{else}}
-        {{#poll.poll_answers}}
-          <div class="result-row">
-            {{answer}}
-            <span class="percentage pull-right"></span>
-            <div class="poll_progress_bar_wrapper progress">
-              <div class="poll_progress_bar bar" data-answerid="{{id}}">
-              </div>
-            </div>
-          </div>
-        {{/poll.poll_answers}}
       {{/if}}
 
       {{#if is_reshare }}
@@ -45,7 +37,6 @@
           {{{t "poll.go_to_original_post" original_post_link=original_post_link}}}
         </div>
       {{/if}}
-
     </div>
   </div>
 {{/if}}

config/locales/javascript/javascript.en.yml

@@ -300,5 +300,9 @@ en:
       count:
         one: "1 vote so far"
         other: "<%=count%> votes so far"
+      answer_count:
+        zero: "0 votes"
+        one: "1 vote"
+        other: "<%=count%> votes"
       show_result: "Show result"
       close_result: "Hide result"

spec/javascripts/app/views/poll_view_spec.js

@@ -2,7 +2,7 @@ describe("app.views.Poll", function(){
   beforeEach(function() {
     loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
     this.view = new app.views.Poll({ model: factory.postWithPoll()});
-    this.view.render();
+    spec.content().html(this.view.render().el);
   });
 
   describe("setProgressBar", function(){
@@ -15,9 +15,9 @@ describe("app.views.Poll", function(){
 
   describe("toggleResult", function(){
     it("toggles the progress bar and result", function(){
-      expect(this.view.$('.poll_progress_bar_wrapper:first').css('display')).toBe("none");
+      expect($(".poll_progress_bar_wrapper:first")).toBeHidden();
-      this.view.toggleResult(null);
+      this.view.toggleResult();
-      expect(this.view.$('.poll_progress_bar_wrapper:first').css('display')).toBe("block");
+      expect($(".poll_progress_bar_wrapper:first")).toBeVisible();
     });
   });