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}} {{/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); + } +});