diff --git a/plugins/poll/assets/javascripts/components/poll-option.js.es6 b/plugins/poll/assets/javascripts/components/poll-option.js.es6
index 96f7e36cdc6..b20f2b52041 100644
--- a/plugins/poll/assets/javascripts/components/poll-option.js.es6
+++ b/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) {
diff --git a/plugins/poll/assets/javascripts/discourse/templates/components/poll-option.hbs b/plugins/poll/assets/javascripts/discourse/templates/components/poll-option.hbs
new file mode 100644
index 00000000000..a2d291d7749
--- /dev/null
+++ b/plugins/poll/assets/javascripts/discourse/templates/components/poll-option.hbs
@@ -0,0 +1,2 @@
+{{{optionIcon}}}
+{{option.html}}
diff --git a/plugins/poll/assets/javascripts/discourse/templates/poll.hbs b/plugins/poll/assets/javascripts/discourse/templates/poll.hbs
index 68603747587..a5355def1e6 100644
--- a/plugins/poll/assets/javascripts/discourse/templates/poll.hbs
+++ b/plugins/poll/assets/javascripts/discourse/templates/poll.hbs
@@ -9,7 +9,7 @@
{{else}}
{{#each poll.options as |option|}}
- {{poll-option option=option toggle="toggleOption"}}
+ {{poll-option option=option toggle="toggleOption" isMultiple=isMultiple}}
{{/each}}
{{/if}}
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 07b84edcf0a..9cef4ac9bff 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/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;
}
diff --git a/plugins/poll/test/javascripts/components/poll-option-test.js.es6 b/plugins/poll/test/javascripts/components/poll-option-test.js.es6
new file mode 100644
index 00000000000..fd2a50ae374
--- /dev/null
+++ b/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);
+ }
+});