diff --git a/Changelog.md b/Changelog.md index 5adc427e2..96f934f27 100644 --- a/Changelog.md +++ b/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) diff --git a/app/assets/javascripts/app/views/poll_view.js b/app/assets/javascripts/app/views/poll_view.js index 275fb02d6..55710bfba 100644 --- a/app/assets/javascripts/app/views/poll_view.js +++ b/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.$('.toggle_result').attr('disabled', true); + this.$(".submit").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; } }, diff --git a/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss b/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss index a09028a3e..90f859910 100644 --- a/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss +++ b/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; } } diff --git a/app/assets/stylesheets/poll.scss b/app/assets/stylesheets/poll.scss index 5bd220a98..146d4f2fa 100644 --- a/app/assets/stylesheets/poll.scss +++ b/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 { - background: $border-dark-grey none; - color: $text-dark-grey; - height: 100%; - text-align: left; - } - - .users-vote { - background-color: $brand-primary; - } + .progress-bar { background-color: $border-dark-grey; } + .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; diff --git a/app/assets/templates/poll_tpl.jst.hbs b/app/assets/templates/poll_tpl.jst.hbs index 2a8b221c2..707ec7482 100644 --- a/app/assets/templates/poll_tpl.jst.hbs +++ b/app/assets/templates/poll_tpl.jst.hbs @@ -1,8 +1,8 @@ {{#if poll}} -
-
+
+
{{poll.question}} -
+
{{t "poll.count" count=poll.participation_count}}
@@ -12,24 +12,26 @@ {{/if}} {{#poll.poll_answers}}
- - {{#if isCurrentUserVote}} - - {{else}} - - {{/if}} -
- - ({{t "poll.answer_count" count=vote_count}}) -
-
+
+ {{#if isCurrentUserVote}} -
+ {{else}} -
+ + {{/if}} +
+ + ({{t "poll.answer_count" count=vote_count}}) +
+
+
+ {{#if isCurrentUserVote}} +
+ {{else}} +
{{/if}}
@@ -39,7 +41,7 @@ {{#if preview}} {{t "poll.show_result"}} {{else}} - {{t "poll.show_result"}} + {{t "poll.show_result"}} {{/if}}
diff --git a/features/desktop/post_preview.feature b/features/desktop/post_preview.feature index d2a69b687..3a240e1a0 100644 --- a/features/desktop/post_preview.feature +++ b/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 diff --git a/features/desktop/post_with_a_poll.feature b/features/desktop/post_with_a_poll.feature index 5a27fc7ee..31843c3eb 100644 --- a/features/desktop/post_with_a_poll.feature +++ b/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 diff --git a/features/step_definitions/post_with_poll_steps.rb b/features/step_definitions/post_with_poll_steps.rb index 4d95ef1db..7e9182841 100644 --- a/features/step_definitions/post_with_poll_steps.rb +++ b/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') - first(".poll_form input").click + page.should have_css(".poll-form input") + first(".poll-form input").click end When(/^I fill in values for the first two options$/) do diff --git a/spec/javascripts/app/views/poll_view_spec.js b/spec/javascripts/app/views/poll_view_spec.js index 034b0a5eb..03aa2aee7 100644 --- a/spec/javascripts/app/views/poll_view_spec.js +++ b/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 = ""; 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() {