| <!-- The <triage-sk> custom element declaration. |
| |
| A custom element that allows toggling between the three |
| states of a gold digest, positive, negative, and untriaged. |
| For example: |
| |
| <triage-sk filter vert value=positive></triage-sk> |
| |
| Will display the three buttons vertically, with filter icons also |
| present in the buttons, and the positive button will be depressed. |
| |
| Attributes: |
| value - A string with a value of "positive", "negative", or "untriaged". |
| vert - If present then the buttons should be laid out vertically, |
| otherwise they are horizontal. |
| filter - If present then filter icons are also shown in the button. |
| |
| Events: |
| change - A change event is generated when the value changes. The value |
| is also contained in event at e.detail. |
| |
| Methods: |
| --> |
| <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout.html"> |
| |
| <dom-module id="triage-sk"> |
| <template> |
| <style> |
| .horizontalLayout { |
| @apply(--layout-horizontal); |
| }; |
| |
| .verticalLayout { |
| @apply(--layout-vertical); |
| }; |
| |
| #positive { |
| color: #1B9E77; |
| } |
| |
| #negative { |
| color: #E7298A; |
| } |
| |
| #untriaged { |
| color: #A6761D; |
| } |
| |
| paper-button { |
| min-width: 2em; |
| margin: 5px; |
| background: #eee; |
| } |
| |
| #positive[raised], |
| #negative[raised], |
| #untriaged[raised] { |
| color: #bbb; |
| background: #fff; |
| } |
| |
| #positive:hover, |
| #negative:hover, |
| #untriaged:hover, |
| #positive[raised]:hover, |
| #negative[raised]:hover, |
| #untriaged[raised]:hover { |
| background: #ddd; |
| } |
| </style> |
| <div class$="{{_computeLayoutClass(vert)}}"> |
| <paper-button on-click="_handleClick" id="positive"> |
| <iron-icon icon="check-circle"></iron-icon> |
| <template is="dom-if" if="{{filter}}"> |
| <iron-icon icon="filter-list"></iron-icon> |
| </template> |
| </paper-button> |
| <paper-button on-click="_handleClick" id="negative" raised=""> |
| <iron-icon icon="cancel"> </iron-icon> |
| <template is="dom-if" if="{{filter}}"> |
| <iron-icon icon="filter-list"></iron-icon> |
| </template> |
| </paper-button> |
| <paper-button on-click="_handleClick" id="untriaged" raised=""> |
| <iron-icon icon="help"></iron-icon> |
| <template is="dom-if" if="{{filter}}"> |
| <iron-icon icon="filter-list"></iron-icon> |
| </template> |
| </paper-button> |
| </div> |
| </template> |
| <script> |
| Polymer({ |
| is: 'triage-sk', |
| |
| properties: { |
| filter: { |
| type: Boolean, |
| value: false, |
| notify: true |
| }, |
| |
| _buttons: { |
| value: function() { return []; } |
| }, |
| |
| value: { |
| type: String, |
| value: 'untriaged', |
| notify: true, |
| observer: '_valueChanged', |
| reflectToAttribute: true |
| }, |
| |
| vert: { |
| type: Boolean, |
| value: false, |
| notify: true |
| }, |
| }, |
| |
| ready: function () { |
| this._buttons = [ |
| this.$.positive, |
| this.$.negative, |
| this.$.untriaged |
| ]; |
| this._valueChanged(); |
| }, |
| |
| _computeLayoutClass: function(vert) { |
| return (vert) ? 'verticalLayout':'horizontalLayout'; |
| }, |
| |
| _handleClick: function(e) { |
| var target = e.target; |
| while (target.localName !== 'paper-button') { |
| target = target.parentElement; |
| } |
| this.value = target.id; |
| this.fire('change', this.value); |
| }, |
| |
| _valueChanged: function () { |
| var value = this.value; |
| this._buttons.forEach(function (b) { |
| if (b.id != value) { |
| Polymer.dom(b).setAttribute('raised', ''); |
| } else { |
| Polymer.dom(b).removeAttribute('raised'); |
| } |
| }); |
| } |
| }); |
| </script> |
| </dom-module> |
| |