Use Bootstrap 3 progress-bar for polls

closes #7600

Changelog.md

@@ -9,6 +9,7 @@
 * Merge migrations from before 0.6.0.0 to CreateSchema [#7580](https://github.com/diaspora/diaspora/pull/7580)
 * Remove auto detection of languages with highlightjs [#7591](https://github.com/diaspora/diaspora/pull/7591)
 * Move enable/disable notification icon [#7592](https://github.com/diaspora/diaspora/pull/7592)
+* Use Bootstrap 3 progress-bar for polls [#7600](https://github.com/diaspora/diaspora/pull/7600)
 
 ## Bug fixes
 * Fix displaying polls with long answers [#7579](https://github.com/diaspora/diaspora/pull/7579)

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

@@ -5,7 +5,7 @@ app.views.Poll = app.views.Base.extend({
 
   events: {
     "click .submit" : "clickSubmit",
-    "click .toggle_result" : "toggleResult"
+    "click .toggle-result": "toggleResult"
   },
 
   initialize: function() {
@@ -55,7 +55,7 @@ app.views.Poll = app.views.Base.extend({
         percent = Math.round(answer.vote_count / participation_count * 100);
       }
 
-      var progressBar = _this.$(".poll_progress_bar[data-answerid="+answer.id+"]");
+      var progressBar = _this.$(".progress-bar[data-answerid=" + answer.id + "]");
 
       _this.setProgressBarData(progressBar, percent);
     });
@@ -68,8 +68,8 @@ app.views.Poll = app.views.Base.extend({
 
   pollButtons: function() {
     if(!this.poll || !this.poll.post_id) {
-      this.$('.submit').attr('disabled', true);
+      this.$(".submit").attr("disabled", true);
-      this.$('.toggle_result').attr('disabled', true);
+      this.$(".toggle-result").attr("disabled", true);
     }
   },
 
@@ -83,14 +83,14 @@ app.views.Poll = app.views.Base.extend({
     }
     this.toggleElements();
 
-    var toggle_result = this.$('.toggle_result');
+    var toggleResult = this.$(".toggle-result");
 
     if(!this.toggleMode) {
-      toggle_result.html(Diaspora.I18n.t("poll.close_result"));
+      toggleResult.html(Diaspora.I18n.t("poll.close_result"));
       this.toggleMode = 1;
     }
     else {
-      toggle_result.html(Diaspora.I18n.t("poll.show_result"));
+      toggleResult.html(Diaspora.I18n.t("poll.show_result"));
       this.toggleMode = 0;
     }
   },

app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

@@ -19,9 +19,9 @@ body {
 
   .info .tag { background-color: $gray-light; }
 
-  .poll_form .progress {
+  .poll-form .progress {
     background-color: $gray-dark;
-    .bar { background-color: $gray-light; }
+    .progress-bar { background-color: $gray-light; }
     .users-vote { background-color: $brand-primary; }
   }
 

app/assets/stylesheets/poll.scss

@@ -1,4 +1,4 @@
-.poll_form {
+.poll-form {
   border-bottom: 1px solid $border-grey;
   border-top: 1px solid $border-grey;
   margin: 10px 0;
@@ -14,38 +14,27 @@
   }
 
   .progress {
-    background-image: none;
-    box-shadow: 0 0 0;
     height: 10px;
     margin-bottom: 5px;
     clear: both;
 
-    .bar {
+    .progress-bar { background-color: $border-dark-grey; }
-      background: $border-dark-grey none;
+    .users-vote { background-color: $brand-primary; }
-      color: $text-dark-grey;
-      height: 100%;
-      text-align: left;
-    }
-
-    .users-vote {
-      background-color: $brand-primary;
-    }
   }
 
   .submit[disabled] {
     color: $text-grey;
     cursor: default;
-
-    &:hover,
-    &:active {
-      background-image: none;
-    }
   }
 }
 
 .poll-content {
   margin-top: 5px;
 
+  .result-head {
+    margin-bottom: 5px;
+  }
+
   [type=radio],
   label {
     font-weight: normal;

app/assets/templates/poll_tpl.jst.hbs

@@ -1,8 +1,8 @@
 {{#if poll}}
-  <div class="poll_form">
+  <div class="poll-form">
-    <div class="poll_head">
+    <div class="poll-head">
       <strong>{{poll.question}}</strong>
-      <div class="poll_statistic pull-right">
+      <div class="poll-statistic pull-right">
         {{t "poll.count" count=poll.participation_count}}
       </div>
     </div>
@@ -12,24 +12,26 @@
       {{/if}}
       {{#poll.poll_answers}}
         <div class="result-row">
-          <input type="radio" name="vote" value="{{id}}"/>
+          <div class="result-head">
-          {{#if isCurrentUserVote}}
+            <input type="radio" name="vote" value="{{id}}"/>
-            <label>
-              {{answer}}
-              <span class="label label-primary">{{t "poll.your_vote"}}</span>
-            </label>
-          {{else}}
-            <label>{{answer}}</label>
-          {{/if}}
-          <div class="poll-result pull-right">
-            <span class="percentage"></span>
-            ({{t "poll.answer_count" count=vote_count}})
-          </div>
-          <div class="poll_progress_bar_wrapper progress">
             {{#if isCurrentUserVote}}
-              <div class="poll_progress_bar bar users-vote" data-answerid="{{id}}" style="height: 100%"></div>
+              <label>
+                {{answer}}
+                <span class="label label-primary">{{t "poll.your_vote"}}</span>
+              </label>
             {{else}}
-              <div class="poll_progress_bar bar" data-answerid="{{id}}" style="height: 100%"></div>
+              <label>{{answer}}</label>
+            {{/if}}
+            <div class="poll-result pull-right">
+              <span class="percentage"></span>
+              ({{t "poll.answer_count" count=vote_count}})
+            </div>
+          </div>
+          <div class="progress">
+            {{#if isCurrentUserVote}}
+              <div class="progress-bar users-vote" data-answerid="{{id}}" style="height: 100%"></div>
+            {{else}}
+              <div class="progress-bar" data-answerid="{{id}}" style="height: 100%"></div>
             {{/if}}
           </div>
         </div>
@@ -39,7 +41,7 @@
             {{#if preview}}
               <span>{{t "poll.show_result"}}</span>
             {{else}}
-              <a class="toggle_result" href="#">{{t "poll.show_result"}}</a>
+              <a class="toggle-result" href="#">{{t "poll.show_result"}}</a>
             {{/if}}
           </div>
           <input type="submit" class="submit pull-right btn btn-default" value="{{t "poll.vote"}}"/>

features/desktop/post_preview.feature

@@ -80,7 +80,7 @@ Feature: preview posts in the stream
           | normal |
           | not normal  |
       And I preview the post
-      Then I should see a ".poll_form" within ".md-preview .stream-element"
+      Then I should see a ".poll-form" within ".md-preview .stream-element"
       And I should see a "form" within ".md-preview .stream-element"
       And I close the publisher
 

features/desktop/post_with_a_poll.feature

@@ -46,7 +46,7 @@ Feature: posting with a poll
           | normal |
           | not normal  |
       And I press "Share"
-      Then I should see a ".poll_form" within ".stream-element"
+      Then I should see a ".poll-form" within ".stream-element"
       And I should see a "form" within ".stream-element"
 
     Scenario: vote for an option
@@ -62,9 +62,9 @@ Feature: posting with a poll
 
       And I check the first option
       And I press "Vote" within ".stream-element"
-      Then I should see an element ".poll_progress_bar"
+      Then I should see an element ".progress-bar"
       And I should see an element ".percentage"
-      And I should see "1 vote so far" within ".poll_statistic"
+      And I should see "1 vote so far" within ".poll-statistic"
 
   Scenario: click to show result
     Given I expand the publisher
@@ -76,7 +76,7 @@ Feature: posting with a poll
         | normal |
         | not normal  |
     And I press "Share"
-    And I click on selector ".toggle_result"
+    And I click on selector ".toggle-result"
     Then I should see an element ".percentage"
 
   Scenario: validate answer input

features/step_definitions/post_with_poll_steps.rb

@@ -19,8 +19,8 @@ When /^I fill in the following for the options:$/ do |table|
 end
 
 When /^I check the first option$/ do
-  page.should have_css('.poll_form input')
+  page.should have_css(".poll-form input")
-  first(".poll_form input").click
+  first(".poll-form input").click
 end
 
 When(/^I fill in values for the first two options$/) do

spec/javascripts/app/views/poll_view_spec.js

@@ -8,16 +8,16 @@ describe("app.views.Poll", function(){
   describe("setProgressBar", function(){
     it("sets the progress bar according to the voting result", function(){
       var percentage = (this.view.poll.poll_answers[0].vote_count / this.view.poll.participation_count)*100;
-      expect(this.view.$('.poll_progress_bar:first').css('width')).toBe(percentage+"%");
+      expect(this.view.$(".progress-bar:first").css("width")).toBe(percentage + "%");
       expect(this.view.$(".percentage:first").text()).toBe(percentage + "%");
     });
   });
 
   describe("toggleResult", function(){
     it("toggles the progress bar and result", function(){
-      expect($(".poll_progress_bar_wrapper:first")).toBeHidden();
+      expect($(".progress:first")).toBeHidden();
       this.view.toggleResult();
-      expect($(".poll_progress_bar_wrapper:first")).toBeVisible();
+      expect($(".progress:first")).toBeVisible();
     });
   });
 
@@ -39,7 +39,7 @@ describe("app.views.Poll", function(){
       var question = "<script>alert(0);</script>";
       this.view.poll.question = question;
       this.view.render();
-      expect(this.view.$('.poll_head strong').text()).toBe(question);
+      expect(this.view.$(".poll-head strong").text()).toBe(question);
     });
   });
 
@@ -80,14 +80,14 @@ describe("app.views.Poll", function(){
     it("adds 'users-vote' class to progress bar for the option the user voted for", function() {
       var answer = this.view.poll.poll_answers[0];
       this.view.model.set("poll_participation_answer_id", answer.id);
-      expect(this.view.$(".poll_progress_bar.users-vote").length).toBe(1);
+      expect(this.view.$(".progress-bar.users-vote").length).toBe(1);
     });
 
     it("doesn't add 'users-vote' class to progress bar of the options the user didn't vote for", function() {
       var answer1 = this.view.poll.poll_answers[0];
       var answer2 = this.view.poll.poll_answers[1];
       this.view.model.set("poll_participation_answer_id", answer1.id);
-      expect(this.view.$(".poll_progress_bar[data-answerid='" + answer2.id + "']").hasClass("users-vote")).toBe(false);
+      expect(this.view.$(".progress-bar[data-answerid='" + answer2.id + "']").hasClass("users-vote")).toBe(false);
     });
 
     it("adds label next to the answer the user voted for", function() {