Unverified Commit d130697c authored by Steffen van Bergerem's avatar Steffen van Bergerem Committed by Benjamin Neff

Use Bootstrap 3 progress-bar for polls

closes #7600
parent 02d9d350
......@@ -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)
......
......@@ -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;
}
},
......
......@@ -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; }
}
......
.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;
......
{{#if poll}}
<div class="poll_form">
<div class="poll_head">
<div class="poll-form">
<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}}"/>
{{#if isCurrentUserVote}}
<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 class="result-head">
<input type="radio" name="vote" value="{{id}}"/>
{{#if isCurrentUserVote}}
<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>
<div class="poll_progress_bar_wrapper progress">
<div class="progress">
{{#if isCurrentUserVote}}
<div class="poll_progress_bar bar users-vote" data-answerid="{{id}}" style="height: 100%"></div>
<div class="progress-bar users-vote" data-answerid="{{id}}" style="height: 100%"></div>
{{else}}
<div class="poll_progress_bar bar" data-answerid="{{id}}" style="height: 100%"></div>
<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"}}"/>
......
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment