From 90c05ff04546f21288d253f15a7caea48f3e3583 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Mon, 4 May 2015 22:29:45 +0200 Subject: [PATCH] FIX: two-column poll --- .../javascripts/controllers/poll.js.es6 | 17 +++- .../components/poll-results-standard.hbs | 24 +++-- .../javascripts/discourse/templates/poll.hbs | 79 +++++++++------- .../poll/assets/javascripts/poll_dialect.js | 49 ++++++++-- plugins/poll/assets/stylesheets/poll.scss | 89 ++++++++++++++----- plugins/poll/config/locales/client.en.yml | 18 ++-- 6 files changed, 191 insertions(+), 85 deletions(-) diff --git a/plugins/poll/assets/javascripts/controllers/poll.js.es6 b/plugins/poll/assets/javascripts/controllers/poll.js.es6 index 418156ace67..ef3ebce95fc 100644 --- a/plugins/poll/assets/javascripts/controllers/poll.js.es6 +++ b/plugins/poll/assets/javascripts/controllers/poll.js.es6 @@ -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"), diff --git a/plugins/poll/assets/javascripts/discourse/templates/components/poll-results-standard.hbs b/plugins/poll/assets/javascripts/discourse/templates/components/poll-results-standard.hbs index ccd3b1beb48..b17c1361e9f 100644 --- a/plugins/poll/assets/javascripts/discourse/templates/components/poll-results-standard.hbs +++ b/plugins/poll/assets/javascripts/discourse/templates/components/poll-results-standard.hbs @@ -1,13 +1,11 @@ - - {{#each option in options}} - - {{{option.html}}} - {{option.percentage}}% - - - -
- - - {{/each}} - +{{#each option in options}} + + {{{option.html}}} + {{option.percentage}}% + + + +
+ + +{{/each}} diff --git a/plugins/poll/assets/javascripts/discourse/templates/poll.hbs b/plugins/poll/assets/javascripts/discourse/templates/poll.hbs index 17f2c09b45b..69662d4729f 100644 --- a/plugins/poll/assets/javascripts/discourse/templates/poll.hbs +++ b/plugins/poll/assets/javascripts/discourse/templates/poll.hbs @@ -1,34 +1,53 @@ -
- {{#if showingResults}} - {{#if isNumber}} - {{poll-results-number poll=poll}} - {{else}} - {{poll-results-standard poll=poll}} +
+
+

+ {{poll.voters}} + {{votersText}} +

+ {{#if isMultiple}} + {{#if showingResults}} +

+ {{totalVotes}} + {{totalVotesText}} +

+ {{else}} +

{{{multipleHelpText}}}

+ {{/if}} {{/if}} - {{else}} -
    - {{#each option in poll.options}} - {{poll-option option=option color=poll.color background=poll.background toggle="toggleOption"}} - {{/each}} -
- {{/if}} +
+
+ {{#if showingResults}} + {{#if isNumber}} + {{poll-results-number poll=poll}} + {{else}} + {{poll-results-standard poll=poll}} + {{/if}} + {{else}} +
    + {{#each option in poll.options}} + {{poll-option option=option color=poll.color background=poll.background toggle="toggleOption"}} + {{/each}} +
+ {{/if}} +
-{{#if isMultiple}} -

{{multipleHelpText}}

- {{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"}} +
+ {{#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}} +
diff --git a/plugins/poll/assets/javascripts/poll_dialect.js b/plugins/poll/assets/javascripts/poll_dialect.js index d876dbe8c05..bab4474778c 100644 --- a/plugins/poll/assets/javascripts/poll_dialect.js +++ b/plugins/poll/assets/javascripts/poll_dialect.js @@ -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-*"); diff --git a/plugins/poll/assets/stylesheets/poll.scss b/plugins/poll/assets/stylesheets/poll.scss index 95b71a1969e..b61b1a60046 100644 --- a/plugins/poll/assets/stylesheets/poll.scss +++ b/plugins/poll/assets/stylesheets/poll.scss @@ -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; } } diff --git a/plugins/poll/config/locales/client.en.yml b/plugins/poll/config/locales/client.en.yml index c0920196a63..0096484b731 100644 --- a/plugins/poll/config/locales/client.en.yml +++ b/plugins/poll/config/locales/client.en.yml @@ -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: %{average}." 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 %{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." cast-votes: title: "Cast your votes"