FIX: two-column poll
This commit is contained in:
Régis Hanol
parent
a2d8cd501c
commit
90c05ff045
|
|
@ -4,9 +4,6 @@ export default Em.Controller.extend({
|
|||
isRandom : Em.computed.equal("poll.order", "random"),
|
||||
isClosed: Em.computed.equal("poll.status", "closed"),
|
||||
|
||||
// immediately shows the results when the user has already voted
|
||||
showResults: Em.computed.gt("vote.length", 0),
|
||||
|
||||
// shows the results when
|
||||
// - poll is closed
|
||||
// - topic is archived/closed
|
||||
|
|
@ -50,6 +47,20 @@ export default Em.Controller.extend({
|
|||
return max;
|
||||
}.property("poll.max", "poll.options.length"),
|
||||
|
||||
votersText: function() {
|
||||
return I18n.t("poll.voters", { count: this.get("poll.voters") });
|
||||
}.property("poll.voters"),
|
||||
|
||||
totalVotes: function() {
|
||||
return _.reduce(this.get("poll.options"), function(total, o) {
|
||||
return total + parseInt(o.get("votes"), 10);
|
||||
}, 0);
|
||||
}.property("poll.options.@each.votes"),
|
||||
|
||||
totalVotesText: function() {
|
||||
return I18n.t("poll.total_votes", { count: this.get("totalVotes") });
|
||||
}.property("totalVotes"),
|
||||
|
||||
multipleHelpText: function() {
|
||||
const options = this.get("poll.options.length"),
|
||||
min = this.get("min"),
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<tbody>
|
||||
{{#each option in options}}
|
||||
<tr>
|
||||
<td class="option">{{{option.html}}}</td>
|
||||
<td class="percentage">{{option.percentage}}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="bar-back">
|
||||
<div class="bar" {{bind-attr style=option.style}}></div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
{{#each option in options}}
|
||||
<tr>
|
||||
<td class="option">{{{option.html}}}</td>
|
||||
<td class="percentage">{{option.percentage}}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="bar-back">
|
||||
<div class="bar" {{bind-attr style=option.style}}></div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,53 @@
|
|||
<div class="poll-container">
|
||||
{{#if showingResults}}
|
||||
{{#if isNumber}}
|
||||
{{poll-results-number poll=poll}}
|
||||
{{else}}
|
||||
{{poll-results-standard poll=poll}}
|
||||
<div>
|
||||
<div class="poll-info">
|
||||
<p>
|
||||
<span class="info-number">{{poll.voters}}</span>
|
||||
<span class="info-text">{{votersText}}</span>
|
||||
</p>
|
||||
{{#if isMultiple}}
|
||||
{{#if showingResults}}
|
||||
<p>
|
||||
<span class="info-number">{{totalVotes}}</span>
|
||||
<span class="info-text">{{totalVotesText}}</span>
|
||||
</p>
|
||||
{{else}}
|
||||
<p>{{{multipleHelpText}}}</p>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<ul>
|
||||
{{#each option in poll.options}}
|
||||
{{poll-option option=option color=poll.color background=poll.background toggle="toggleOption"}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="poll-container">
|
||||
{{#if showingResults}}
|
||||
{{#if isNumber}}
|
||||
{{poll-results-number poll=poll}}
|
||||
{{else}}
|
||||
{{poll-results-standard poll=poll}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<ul>
|
||||
{{#each option in poll.options}}
|
||||
{{poll-option option=option color=poll.color background=poll.background toggle="toggleOption"}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if isMultiple}}
|
||||
<p>{{multipleHelpText}}</p>
|
||||
{{d-button class="cast-votes" title="poll.cast-votes.title" label="poll.cast-votes.label" disabled=castVotesDisabled action="castVotes"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showingResults}}
|
||||
{{d-button class="toggle-results" title="poll.hide-results.title" label="poll.hide-results.label" icon="eye-slash" disabled=hideResultsDisabled action="toggleResults"}}
|
||||
{{else}}
|
||||
{{d-button class="toggle-results" title="poll.show-results.title" label="poll.show-results.label" icon="eye" disabled=showResultsDisabled action="toggleResults"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if canToggleStatus}}
|
||||
{{#if isClosed}}
|
||||
{{d-button class="toggle-status" title="poll.open.title" label="poll.open.label" icon="unlock-alt" action="toggleStatus"}}
|
||||
{{else}}
|
||||
{{d-button class="toggle-status btn-danger" title="poll.close.title" label="poll.close.label" icon="lock" action="toggleStatus"}}
|
||||
<div class="poll-buttons">
|
||||
{{#if isMultiple}}
|
||||
{{d-button class="cast-votes" title="poll.cast-votes.title" label="poll.cast-votes.label" disabled=castVotesDisabled action="castVotes"}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showingResults}}
|
||||
{{d-button class="toggle-results" title="poll.hide-results.title" label="poll.hide-results.label" icon="eye-slash" disabled=hideResultsDisabled action="toggleResults"}}
|
||||
{{else}}
|
||||
{{d-button class="toggle-results" title="poll.show-results.title" label="poll.show-results.label" icon="eye" disabled=showResultsDisabled action="toggleResults"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if canToggleStatus}}
|
||||
{{#if isClosed}}
|
||||
{{d-button class="toggle-status" title="poll.open.title" label="poll.open.label" icon="unlock-alt" action="toggleStatus"}}
|
||||
{{else}}
|
||||
{{d-button class="toggle-status btn-danger" title="poll.close.title" label="poll.close.label" icon="lock" action="toggleStatus"}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,11 +97,25 @@
|
|||
contents[0][o].splice(1, 0, attr);
|
||||
}
|
||||
|
||||
// that's our poll!
|
||||
var pollContainer = ["div", { "class": "poll-container" }].concat(contents);
|
||||
var result = ["div", attributes, pollContainer];
|
||||
// // add some information when type is "multiple"
|
||||
// if (attributes[DATA_PREFIX + "type"] === "multiple") {
|
||||
|
||||
// add some information when type is "multiple"
|
||||
|
||||
// }
|
||||
|
||||
var result = ["div", attributes],
|
||||
poll = ["div"];
|
||||
|
||||
// 1 - POLL INFO
|
||||
var info = ["div", { "class": "poll-info" }];
|
||||
|
||||
// # of voters
|
||||
info.push(["p",
|
||||
["span", { "class": "info-number" }, "0"],
|
||||
["span", { "class": "info-text"}, I18n.t("poll.voters", { count: 0 })]
|
||||
]);
|
||||
|
||||
// multiple help text
|
||||
if (attributes[DATA_PREFIX + "type"] === "multiple") {
|
||||
var optionCount = contents[0].length - 1;
|
||||
|
||||
|
|
@ -128,23 +142,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
if (help) { result.push(["p", help]); }
|
||||
if (help) { info.push(["p", help]); }
|
||||
}
|
||||
|
||||
// add "cast-votes" button
|
||||
result.push(["a", { "class": "button cast-votes", "title": I18n.t("poll.cast-votes.title") }, I18n.t("poll.cast-votes.label")]);
|
||||
poll.push(info);
|
||||
|
||||
// 2 - POLL CONTAINER
|
||||
var container = ["div", { "class": "poll-container" }].concat(contents);
|
||||
poll.push(container);
|
||||
|
||||
// 3 - BUTTONS
|
||||
var buttons = ["div", { "class": "poll-buttons" }];
|
||||
|
||||
// add "cast-votes" button
|
||||
if (attributes[DATA_PREFIX + "type"] === "multiple") {
|
||||
buttons.push(["a", { "class": "button cast-votes", "title": I18n.t("poll.cast-votes.title") }, I18n.t("poll.cast-votes.label")]);
|
||||
}
|
||||
|
||||
// add "toggle-results" button
|
||||
result.push(["a", { "class": "button toggle-results", "title": I18n.t("poll.show-results.title") }, I18n.t("poll.show-results.label")]);
|
||||
buttons.push(["a", { "class": "button toggle-results", "title": I18n.t("poll.show-results.title") }, I18n.t("poll.show-results.label")]);
|
||||
|
||||
// 4 - MIX IT ALL UP
|
||||
result.push(poll);
|
||||
result.push(buttons)
|
||||
|
||||
return result;
|
||||
}
|
||||
});
|
||||
|
||||
Discourse.Markdown.whiteListTag("div", "class", "poll");
|
||||
Discourse.Markdown.whiteListTag("div", "class", "poll-container");
|
||||
Discourse.Markdown.whiteListTag("div", "class", /^poll-(info|container|buttons)/);
|
||||
Discourse.Markdown.whiteListTag("div", "data-*");
|
||||
|
||||
Discourse.Markdown.whiteListTag("span", "class", /^info-(number|text)/);
|
||||
|
||||
Discourse.Markdown.whiteListTag("a", "class", /^button (cast-votes|toggle-results)/);
|
||||
|
||||
Discourse.Markdown.whiteListTag("li", "data-*");
|
||||
|
|
|
|||
|
|
@ -1,11 +1,22 @@
|
|||
$border-color: rgb(219,219,219);
|
||||
$text-color: #9E9E9E;
|
||||
|
||||
$option-foreground: $primary;
|
||||
$option-background: dark-light-diff($primary, $secondary, 90%, -65%);
|
||||
$option-shadow: dark-light-diff($option-background, $primary, 10%, -10%);
|
||||
|
||||
div.poll {
|
||||
|
||||
display: table;
|
||||
border: 1px solid $border-color;
|
||||
width: 500px;
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
max-width: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li, .option {
|
||||
|
|
@ -15,31 +26,29 @@ div.poll {
|
|||
}
|
||||
|
||||
li[data-poll-option-id] {
|
||||
color: $secondary;
|
||||
background: $primary;
|
||||
position: relative;
|
||||
color: $option-foreground;
|
||||
background: $option-background;
|
||||
box-shadow: 0 6px $option-shadow;
|
||||
padding: 0 .8em;
|
||||
margin-bottom: .7em;
|
||||
border-radius: .25rem;
|
||||
box-shadow: inset 0 -.2em 0 0 rgba(0,0,0,.2),
|
||||
inset 0 0 0 100px rgba(0,0,0,0),
|
||||
0 .2em 0 0 rgba(0,0,0,.2);
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 -.2em 0 0 rgba(0,0,0,.25),
|
||||
inset 0 0 0 100px rgba(0,0,0,.1),
|
||||
0 .2em 0 0 rgba(0,0,0,.2);
|
||||
top: 2px;
|
||||
box-shadow: 0 4px $option-shadow;
|
||||
}
|
||||
|
||||
&:active {
|
||||
-webkit-transform: translate(0,2px);
|
||||
transform: translate(0,2px);
|
||||
box-shadow: inset 0 -.1em 0 0 rgba(0,0,0,.25),
|
||||
inset 0 0 0 100px rgba(0,0,0,.1),
|
||||
0 .1em 0 0 rgba(0,0,0,.2);
|
||||
top: 6px;
|
||||
box-shadow: 0 0 $option-shadow;
|
||||
}
|
||||
|
||||
&[data-poll-selected="selected"] {
|
||||
background: green !important;
|
||||
background: $success !important;
|
||||
box-shadow: 0 6px darken($success, 10%);
|
||||
&:hover { box-shadow: 0 4px darken($success, 10%); }
|
||||
&:active { box-shadow: 0 0 darken($success, 10%); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,11 +67,45 @@ div.poll {
|
|||
}
|
||||
}
|
||||
|
||||
.poll-info {
|
||||
color: $text-color;
|
||||
width: 150px;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-right: 1px solid $border-color;
|
||||
|
||||
p {
|
||||
margin: 40px 20px;
|
||||
}
|
||||
|
||||
.info-number {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
display: block;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-container {
|
||||
margin: 0 0 5px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 10px;
|
||||
width: 330px;
|
||||
|
||||
span {
|
||||
font-size: 1.125em;
|
||||
line-height: 2
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-buttons {
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 10px;
|
||||
|
||||
.toggle-status {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,16 +123,16 @@ div.poll {
|
|||
font-size: 1.7em;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
color: #9E9E9E;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.bar-back {
|
||||
background: rgb(219,219,219);
|
||||
background: $border-color;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 10px;
|
||||
background: $primary;
|
||||
background: $option-foreground;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -98,7 +141,7 @@ div.poll {
|
|||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: .7em;
|
||||
margin: 0 12px 15px 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,22 @@ en:
|
|||
js:
|
||||
poll:
|
||||
voters:
|
||||
zero: "No votes yet. Want to be the first?"
|
||||
one: "There's only 1 vote."
|
||||
other: "There are %{count} total votes."
|
||||
zero: "voters"
|
||||
one: "voter"
|
||||
other: "voters"
|
||||
total_votes:
|
||||
zero: "total votes"
|
||||
one: "total vote"
|
||||
other: "total votes"
|
||||
|
||||
average_rating: "Average rating: <strong>%{average}</strong>."
|
||||
|
||||
multiple:
|
||||
help:
|
||||
at_least_min_options: "You may choose at least %{count} options."
|
||||
up_to_max_options: "You may choose up to %{count} options."
|
||||
x_options: "You may choose %{count} options."
|
||||
between_min_and_max_options: "You may choose between %{min} and %{max} options."
|
||||
at_least_min_options: "You may choose at least <strong>%{count}</strong> options."
|
||||
up_to_max_options: "You may choose up to <strong>%{count}</strong> options."
|
||||
x_options: "You may choose <strong>%{count}</strong> options."
|
||||
between_min_and_max_options: "You may choose between <strong>%{min}</strong> and <strong>%{max}</strong> options."
|
||||
|
||||
cast-votes:
|
||||
title: "Cast your votes"
|
||||
|
|
|
|||
Loading…
Reference in New Issue