firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Attempt to make the stocks example more more material-friendly.

Browse Source 
http://www.google.com/design/spec/components/lists.html#lists-specs
http://www.google.com/design/spec/style/color.html#

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/930193004
This commit is contained in:
Eric Seidel 2015-02-23 16:19:06 -08:00
parent 465de9a02f
commit 71390b7ef1
2 changed files with 65 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
examples/stocks/stock.sky
View File

@ -9,30 +9,28 @@
<template> <template>
<style> <style>
:host { :host {
height: 50px; // TODO(eseidel): Why does setting height here make this too big?
// height: 48px;
max-height: 48px;
display: flex; display: flex;
width: 100%; border-bottom: 1px solid black;
border: 1px solid black; padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 20px;
} }
#ticker { #ticker {
padding: 10px;
flex-grow: 1; flex-grow: 1;
} }
#last-sale { #last-sale {
padding: 10px; padding-right: 20px;
} }
#change { #change {
padding: 10px;
border-radius: 5px; border-radius: 5px;
min-width: 70px; min-width: 72px;
padding-right: 10px;
text-align: right; text-align: right;
} }
.positive {
background-color: green;
}
.negative {
background-color: red;
}
</style> </style>
<div id="ticker" /> <div id="ticker" />
<div id="last-sale" /> <div id="last-sale" />
@ -40,6 +38,45 @@
</template> </template>
<script> <script>
import "dart:sky"; import "dart:sky";
import "dart:math";
List<String> redColors = [
'#FFEBEE',
'#FFCDD2',
'#EF9A9A',
'#E57373',
'#EF5350',
'#F44336',
'#E53935',
'#D32F2F',
'#C62828',
'#B71C1C',
];
List<String> greenColors = [
'#E8F5E9',
'#C8E6C9',
'#A5D6A7',
'#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) * greenColors.length).floor());
}
String colorForPercentChange(double percentChange) {
if (percentChange > 0)
return greenColors[colorIndexForPercentChange(percentChange)];
return redColors[colorIndexForPercentChange(percentChange)];
}
@Tagname('stock') @Tagname('stock')
class Stock extends SkyElement { class Stock extends SkyElement {
@ -56,7 +93,7 @@ class Stock extends SkyElement {
if (model.percentChange > 0) if (model.percentChange > 0)
changeString = "+" + changeString; changeString = "+" + changeString;
change.textContent = changeString; change.textContent = changeString;
change.classList.add((model.percentChange < 0) ? 'negative' : 'positive'); change.style['background-color'] = colorForPercentChange(model.percentChange);
} }
} }

19
examples/stocks/stocks.sky
View File

@ -16,7 +16,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: -webkit-fill-available; height: -webkit-fill-available;
font: 'Helvetica'; font-family: 'Roboto Regular', 'Helvetica';
font-size: 16px;
} }
sky-drawer { sky-drawer {
position: absolute; position: absolute;
@ -66,6 +67,15 @@
import "dart:sky"; import "dart:sky";
import "dart:math"; import "dart:math";
List pick(List list, int count) {
var rng = new Random();
List picked = new List();
for (int i = 0; i < count; i++) {
picked.add(list[rng.nextInt(list.length)]);
}
return picked;
}
@Tagname('stocks') @Tagname('stocks')
class Stocks extends SkyElement { class Stocks extends SkyElement {
Element _drawer; Element _drawer;
@ -80,10 +90,9 @@ class Stocks extends SkyElement {
void populateStockList() { void populateStockList() {
Element stockList = shadowRoot.getElementById('stock_list'); Element stockList = shadowRoot.getElementById('stock_list');
// Limit to 100 to avoid taking seconds to load. // Limit to 100 to avoid taking seconds to load.
var rng = new Random(); List<model.Stock> picked = pick(model.oracle.stocks, 100);
for (var i = 0; i < 100; i++) { picked.sort((a, b) => a.symbol.compareTo(b.symbol));
List<model.Stock> list = model.oracle.stocks; for (model.Stock stock in picked) {
model.Stock stock = list[rng.nextInt(list.length)];
stockList.appendChild(new view.Stock()..model = stock); stockList.appendChild(new view.Stock()..model = stock);
} }
} }