+ {{poll.voters}} + {{votersText}} +
+ {{#if isMultiple}} + {{#if showingResults}} ++ {{totalVotes}} + {{totalVotesText}} +
+ {{else}} +{{{multipleHelpText}}}
+ {{/if}} {{/if}} - {{else}} -{{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"}} + 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"