Index: sky/examples/stocks/stock-arrow.sky |
diff --git a/sky/examples/stocks/stock-arrow.sky b/sky/examples/stocks/stock-arrow.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..0ebe9cfba3fcc5fdba3039231dd0219f524f1003 |
--- /dev/null |
+++ b/sky/examples/stocks/stock-arrow.sky |
@@ -0,0 +1,98 @@ |
+<!-- |
+// Copyright 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. |
+--> |
+<import src="/sky/framework/sky-element.sky" /> |
+ |
+<sky-element attributes="change:number"> |
+<template> |
+ <style> |
+ :host { |
+ width: 40px; |
+ height: 40px; |
+ display: flex; |
+ align-items: center; |
+ justify-content: center; |
+ border-radius: 40px; |
+ border: 1px solid transparent; |
+ } |
+ #arrow { |
+ width: 0; |
+ height: 0; |
+ border-left: 9px solid transparent; |
+ border-right: 9px solid transparent; |
+ } |
+ .up { |
+ margin-bottom: 3px; |
+ border-bottom: 9px solid white; |
+ } |
+ .down { |
+ margin-top: 3px; |
+ border-top: 9px solid white; |
+ } |
+ </style> |
+ <div id="arrow" /> |
+</template> |
+<script> |
+import "dart:sky"; |
+import "dart:math"; |
+ |
+final List<String> _kRedColors = [ |
+ '#E57373', |
+ '#EF5350', |
+ '#F44336', |
+ '#E53935', |
+ '#D32F2F', |
+ '#C62828', |
+ '#B71C1C', |
+]; |
+ |
+final List<String> _kGreenColors = [ |
+ '#81C784', |
+ '#66BB6A', |
+ '#4CAF50', |
+ '#43A047', |
+ '#388E3C', |
+ '#2E7D32', |
+ '#1B5E20', |
+]; |
+ |
+int _colorIndexForPercentChange(double percentChange) { |
+ // Currently the max is 10%. |
+ double maxPercent = 10.0; |
+ return max(0, ((percentChange.abs() / maxPercent) * _kGreenColors.length).floor()); |
+} |
+ |
+String _colorForPercentChange(double percentChange) { |
+ if (percentChange > 0) |
+ return _kGreenColors[_colorIndexForPercentChange(percentChange)]; |
+ return _kRedColors[_colorIndexForPercentChange(percentChange)]; |
+} |
+ |
+@Tagname('stock-arrow') |
+class StockArrow extends SkyElement { |
+ Element _arrow; |
+ |
+ void _updateArrow(double percentChange) { |
+ String border = _colorForPercentChange(percentChange).toString(); |
+ String type = percentChange > 0 ? 'bottom' : 'top'; |
+ _arrow.style['border-$type-color'] = border; |
+ style['border-color'] = border; |
+ _arrow.setAttribute('class', percentChange > 0 ? 'up' : 'down'); |
+ } |
+ |
+ void shadowRootReady() { |
+ _arrow = shadowRoot.getElementById('arrow'); |
+ _updateArrow(change); |
+ } |
+ |
+ void changeChanged(double oldValue, double newValue) { |
+ if (_arrow != null) |
+ _updateArrow(newValue); |
+ } |
+} |
+ |
+_init(script) => register(script, StockArrow); |
+</script> |
+</sky-element> |