Merge pull request #4354 from tgxworld/remove_button_look_on_polls

UX: Remove button styles on polls.

plugins/poll/assets/javascripts/components/poll-option.js.es6

@@ -1,15 +1,19 @@
+import computed from 'ember-addons/ember-computed-decorators';
+import { iconHTML } from 'discourse/helpers/fa-icon';
+
 export default Em.Component.extend({
   tagName: "li",
-  attributeBindings: ["data-poll-option-id", "data-poll-selected"],
+  attributeBindings: ["data-poll-option-id"],
 
   "data-poll-option-id": Em.computed.alias("option.id"),
 
-  "data-poll-selected": function() {
-    return this.get("option.selected") ? "selected" : false;
-  }.property("option.selected"),
-
-  render(buffer) {
-    buffer.push(this.get("option.html"));
+  @computed("option.selected", "isMultiple")
+  optionIcon(selected, isMultiple) {
+    if (isMultiple) {
+      return iconHTML(selected ? 'check-square-o' : 'square-o');
+    } else {
+      return iconHTML(selected ? 'dot-circle-o' : 'circle-o');
+    }
   },
 
   click(e) {

plugins/poll/assets/javascripts/discourse/templates/components/poll-option.hbs

@@ -0,0 +1,2 @@
+{{{optionIcon}}}
+{{option.html}}

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

@@ -9,7 +9,7 @@
     {{else}}
       <ul>
         {{#each poll.options as |option|}}
-          {{poll-option option=option toggle="toggleOption"}}
+          {{poll-option option=option toggle="toggleOption" isMultiple=isMultiple}}
         {{/each}}
       </ul>
     {{/if}}

plugins/poll/assets/stylesheets/common/poll.scss

@@ -28,24 +28,7 @@ div.poll {
 
   li[data-poll-option-id] {
     color: $option-foreground;
-    background: $option-background;
-    box-shadow: inset 0 -6px rgba(0,0,0,.25), inset 0 0 0 100px rgba(0,0,0,0);
     padding: .5em .7em .7em .5em;
-    border-radius: 4px;
-
-    &:hover {
-      box-shadow: inset 0 -6px rgba(0,0,0,.35), inset 0 0 0 100px rgba(0,0,0,.1);
-    }
-
-    &:active {
-      -webkit-transform: translate(0,2px);
-              transform: translate(0,2px);
-      box-shadow: inset 0 -4px rgba(0,0,0,.35), inset 0 0 0 100px rgba(0,0,0,.1);
-    }
-
-    &[data-poll-selected="selected"] {
-      background: $option-background-selected !important;
-    }
   }
 
   .button {
@@ -136,8 +119,7 @@ div.poll {
 
     li[data-poll-option-id] {
       display: inline-block;
-      text-align: center;
-      width: 25px;
+      width: 45px;
       margin-right: 5px;
     }
 

plugins/poll/test/javascripts/components/poll-option-test.js.es6

@@ -0,0 +1,26 @@
+import componentTest from 'helpers/component-test';
+moduleForComponent('poll-option', { integration: true });
+
+componentTest('test poll option', {
+  template: '{{poll-option option=option isMultiple=isMultiple}}',
+
+  setup(store) {
+    this.set('option', Em.Object.create({ id: 1, selected: false }));
+  },
+
+  test(assert) {
+    assert.ok(this.$('li .fa-circle-o:eq(0)').length === 1);
+
+    this.set('option.selected', true);
+
+    assert.ok(this.$('li .fa-dot-circle-o:eq(0)').length === 1);
+
+    this.set('isMultiple', true);
+
+    assert.ok(this.$('li .fa-check-square-o:eq(0)').length === 1);
+
+    this.set('option.selected', false);
+
+    assert.ok(this.$('li .fa-square-o:eq(0)').length === 1);
+  }
+});