| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/base/ui/color_scheme.html"> |
| |
| <!-- |
| @fileoverview A component used to display a label preceded by a small square |
| filled with the label's associated color (as determined by |
| tr.b.ui.getColorIdForGeneralPurposeString). |
| --> |
| <polymer-element name="tr-b-ui-color-legend"> |
| <template> |
| <style> |
| :host { |
| display: inline-block; |
| } |
| |
| #square { |
| font-size: 150%; /* Make the square bigger. */ |
| line-height: 0%; /* Prevent the square from increasing legend height. */ |
| } |
| </style> |
| <span id="square"></span> |
| <span id="label"></span> |
| </template> |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| ready: function() { |
| var blackSquareCharCode = 9632; |
| this.$.square.innerText = String.fromCharCode(blackSquareCharCode); |
| this.label_ = undefined; |
| }, |
| |
| get label() { |
| return this.label_; |
| }, |
| |
| set label(label) { |
| this.label_ = label; |
| |
| if (this.label_ === undefined) { |
| this.$.square.style.color = 'initial'; |
| this.$.label.innerText = ''; |
| return; |
| } |
| |
| var paletteRaw = tr.b.ui.getRawColorPalette(); |
| var colorId = tr.b.ui.getColorIdForGeneralPurposeString(this.label_); |
| var color = tr.b.ui.colorToRGBString(paletteRaw[colorId]); |
| this.$.square.style.color = color; |
| this.$.label.innerText = this.label_; |
| } |
| }); |
| </script> |
| </polymer-element> |
