FIX: two-column poll

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"),

plugins/poll/assets/javascripts/discourse/templates/components/poll-results-standard.hbs

@@ -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}}

plugins/poll/assets/javascripts/discourse/templates/poll.hbs

@@ -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>

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-*");