blob: 2be5f97f87e477e920d4a0c507e078638b4b3ae9 [file] [log] [blame]
<!-- 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.
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.
change - A change event is generated when the value changes. The value
is also contained in event at e.detail.
<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">
.horizontalLayout {
.verticalLayout {
#positive {
color: #1B9E77;
#negative {
color: #E7298A;
#untriaged {
color: #A6761D;
paper-button {
min-width: 2em;
margin: 5px;
background: #eee;
#untriaged[raised] {
color: #bbb;
background: #fff;
#untriaged[raised]:hover {
background: #ddd;
<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>
<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>
<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>
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 = [
_computeLayoutClass: function(vert) {
return (vert) ? 'verticalLayout':'horizontalLayout';
_handleClick: function(e) {
var target =;
while (target.localName !== 'paper-button') {
target = target.parentElement;
this.value =;'change', this.value);
_valueChanged: function () {
var value = this.value;
this._buttons.forEach(function (b) {
if ( != value) {
Polymer.dom(b).setAttribute('raised', '');
} else {