Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(642)

Unified Diff: sky/examples/stocks2/lib/stock_arrow.dart

Issue 1172513002: Restore stock_arrow elemnt of the stocks2 demo (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: Use Container width,height instead of constraints Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | sky/examples/stocks2/lib/stock_row.dart » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: sky/examples/stocks2/lib/stock_arrow.dart
diff --git a/sky/examples/stocks2/lib/stock_arrow.dart b/sky/examples/stocks2/lib/stock_arrow.dart
index 64310fe26e6f101e5d8237de9a883b1f9296c2ee..1a02c40ba769add16df36ab314040c201151b27b 100644
--- a/sky/examples/stocks2/lib/stock_arrow.dart
+++ b/sky/examples/stocks2/lib/stock_arrow.dart
@@ -2,91 +2,61 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-import 'dart:math';
import 'package:sky/framework/fn2.dart';
+import 'package:vector_math/vector_math.dart';
+import 'package:sky/framework/rendering/box.dart';
+import 'package:sky/framework/rendering/object.dart';
+import 'package:sky/framework/theme2/colors.dart' as colors;
-class StockArrow extends Component {
- static final Style _style = new Style('''
- width: 40px;
- height: 40px;
- align-items: center;
- justify-content: center;
- border-radius: 40px;
- margin-right: 16px;
- border: 1px solid transparent;'''
- );
-
- static final Style _upStyle = new Style('''
- width: 0;
- height: 0;
- border-left: 9px solid transparent;
- border-right: 9px solid transparent;
- margin-bottom: 3px;
- border-bottom: 9px solid white;'''
- );
-
- static final Style _downStyle = new Style('''
- width: 0;
- height: 0;
- border-left: 9px solid transparent;
- border-right: 9px solid transparent;
- margin-top: 3px;
- border-top: 9px solid white'''
- );
+import 'dart:math' as math;
+import 'dart:sky' as sky;
+class StockArrow extends Component {
double percentChange;
StockArrow({ Object key, this.percentChange }) : super(key: key);
- // TODO(abarth): These should use sky/framework/theme/colors.dart.
- final List<String> _kRedColors = [
- '#E57373',
- '#EF5350',
- '#F44336',
- '#E53935',
- '#D32F2F',
- '#C62828',
- '#B71C1C',
- ];
-
- // TODO(abarth): These should use sky/framework/theme/colors.dart.
- 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());
+ double normalizedPercentChange = math.min(percentChange.abs(), maxPercent) / maxPercent;
+ return 100 + (normalizedPercentChange * 8.0).floor() * 100;
}
- String _colorForPercentChange(double percentChange) {
+ Color _colorForPercentChange(double percentChange) {
if (percentChange > 0)
- return _kGreenColors[_colorIndexForPercentChange(percentChange)];
- return _kRedColors[_colorIndexForPercentChange(percentChange)];
+ return colors.Green[_colorIndexForPercentChange(percentChange)];
+ return colors.Red[_colorIndexForPercentChange(percentChange)];
}
UINode build() {
- String border = _colorForPercentChange(percentChange).toString();
- bool up = percentChange > 0;
- String type = up ? 'bottom' : 'top';
-
- return new FlexContainer(
- inlineStyle: 'border-color: $border',
- direction: FlexDirection.horizontal,
- style: _style,
- children: [
- new Container(
- inlineStyle: 'border-$type-color: $border',
- style: up ? _upStyle : _downStyle
- )
- ]
- );
+ // TODO(jackson): This should change colors with the theme
+ Color color = _colorForPercentChange(percentChange);
+ const double size = 40.0;
+ var arrow = new CustomPaint(callback: (sky.Canvas canvas) {
+ Paint paint = new Paint()..color = color;
+ paint.setStyle(sky.PaintingStyle.stroke);
+ paint.strokeWidth = 2.0;
+ var padding = paint.strokeWidth * 3.0;
+ var w = size - padding * 2.0;
+ var h = size - padding * 2.0;
+ canvas.save();
+ canvas.translate(padding, padding);
+ if (percentChange < 0.0) {
+ var cx = w / 2.0;
+ var cy = h / 2.0;
+ canvas.translate(cx, cy);
+ canvas.rotate(math.PI);
+ canvas.translate(-cx, -cy);
+ }
+ canvas.drawLine(0.0, h, w, h, paint);
+ canvas.drawLine(w, h, w / 2.0, 0.0, paint);
+ canvas.drawLine(w / 2.0, 0.0, 0.0, h, paint);
+ canvas.restore();
+ });
+ return new Container(
+ child: arrow,
+ width: size,
+ height: size,
+ margin: const EdgeDims.symmetric(horizontal: 5.0));
}
}
« no previous file with comments | « no previous file | sky/examples/stocks2/lib/stock_row.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698