res/imp/tricon-sk.html

<!-- The <tricon-sk> custom element declaration.

  Show the triage status as an icon.

  Attributes:
    value - A string representing the triage status, one of
      "untriaged", "positive", or "negative".

  Events:
    None.

  Methods:
    None.

-->

<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">

<dom-module id="tricon-sk">
  <template>
    <style>
      .positive {
        color: #1B9E77;
      }

      .negative {
        color: #E7298A;
      }

      .untriaged {
        color: #A6761D;
      }

      core-icon {
        width: 10px;
        height: 10px;
        opacity: 0.3;
      }
    </style>
    <iron-icon icon="{{_statusAsIcon(value)}}" class$="{{value}}"></iron-icon>
  </template>
  <script>
    (function () {
      var icons = {
        'untriaged': 'help',
        'positive': 'check-circle',
        'negative': 'cancel'
      };

      Polymer({
        is: 'tricon-sk',

        properties: {
          value: {
            type: String,
            value: 'postive'
          }
        },

        _statusAsIcon: function (s) {
          return icons[s];
        }

      });
    }());
  </script>
</dom-module>