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

Side by Side Diff: sky/sdk/lib/widgets/checkbox.dart

Issue 1218153005: Refactoring to support dark theme better (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: fix import issues Created 5 years, 5 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 unified diff | Download patch
« no previous file with comments | « sky/sdk/lib/widgets/card.dart ('k') | sky/sdk/lib/widgets/drawer.dart » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 import 'dart:sky' as sky; 5 import 'dart:sky' as sky;
6 6
7 import 'package:sky/widgets/theme.dart'; 7 import 'package:sky/widgets/theme.dart';
8 8
9 import 'basic.dart'; 9 import 'basic.dart';
10 import 'toggleable.dart'; 10 import 'toggleable.dart';
11 export 'toggleable.dart' show ValueChanged; 11 export 'toggleable.dart' show ValueChanged;
12 12
13 const double _kMidpoint = 0.5; 13 const double _kMidpoint = 0.5;
14 const sky.Color _kUncheckedColor = const sky.Color(0x8A000000); 14 const sky.Color _kLightUncheckedColor = const sky.Color(0x8A000000);
15 const sky.Color _kDarkUncheckedColor = const sky.Color(0xB2FFFFFF);
15 const double _kEdgeSize = 20.0; 16 const double _kEdgeSize = 20.0;
16 const double _kEdgeRadius = 1.0; 17 const double _kEdgeRadius = 1.0;
17 18
18 class Checkbox extends Toggleable { 19 class Checkbox extends Toggleable {
19 20
20 Checkbox({ 21 Checkbox({
21 String key, 22 String key,
22 bool value, 23 bool value,
23 ValueChanged onChanged 24 ValueChanged onChanged
24 }) : super(key: key, value: value, onChanged: onChanged); 25 }) : super(key: key, value: value, onChanged: onChanged);
25 26
26 Size get size => const Size(_kEdgeSize + 2.0, _kEdgeSize + 2.0); 27 Size get size => const Size(_kEdgeSize + 2.0, _kEdgeSize + 2.0);
27 28
28 void customPaintCallback(sky.Canvas canvas, Size size) { 29 void customPaintCallback(sky.Canvas canvas, Size size) {
30 ThemeData themeData = Theme.of(this);
31 Color uncheckedColor = themeData.brightness == ThemeBrightness.light ? _kLig htUncheckedColor : _kDarkUncheckedColor;
32
29 // Choose a color between grey and the theme color 33 // Choose a color between grey and the theme color
30 sky.Paint paint = new sky.Paint()..strokeWidth = 2.0 34 sky.Paint paint = new sky.Paint()..strokeWidth = 2.0
31 ..color = _kUncheckedColor; 35 ..color = uncheckedColor;
32 36
33 // The rrect contracts slightly during the animation 37 // The rrect contracts slightly during the animation
34 double inset = 2.0 - (toggleAnimation.value - _kMidpoint).abs() * 2.0; 38 double inset = 2.0 - (toggleAnimation.value - _kMidpoint).abs() * 2.0;
35 sky.Rect rect = new sky.Rect.fromLTRB(inset, inset, _kEdgeSize - inset, _kEd geSize - inset); 39 sky.Rect rect = new sky.Rect.fromLTRB(inset, inset, _kEdgeSize - inset, _kEd geSize - inset);
36 sky.RRect rrect = new sky.RRect()..setRectXY(rect, _kEdgeRadius, _kEdgeRadiu s); 40 sky.RRect rrect = new sky.RRect()..setRectXY(rect, _kEdgeRadius, _kEdgeRadiu s);
37 41
38 // Outline of the empty rrect 42 // Outline of the empty rrect
39 paint.setStyle(sky.PaintingStyle.stroke); 43 paint.setStyle(sky.PaintingStyle.stroke);
40 canvas.drawRRect(rrect, paint); 44 canvas.drawRRect(rrect, paint);
41 45
42 // Radial gradient that changes size 46 // Radial gradient that changes size
43 if (toggleAnimation.value > 0) { 47 if (toggleAnimation.value > 0) {
44 paint.setStyle(sky.PaintingStyle.fill); 48 paint.setStyle(sky.PaintingStyle.fill);
45 paint.setShader( 49 paint.setShader(
46 new sky.Gradient.radial( 50 new sky.Gradient.radial(
47 new Point(_kEdgeSize / 2.0, _kEdgeSize / 2.0), 51 new Point(_kEdgeSize / 2.0, _kEdgeSize / 2.0),
48 _kEdgeSize * (_kMidpoint - toggleAnimation.value) * 8.0, 52 _kEdgeSize * (_kMidpoint - toggleAnimation.value) * 8.0,
49 [const sky.Color(0x00000000), _kUncheckedColor] 53 [const sky.Color(0x00000000), uncheckedColor]
50 ) 54 )
51 ); 55 );
52 canvas.drawRRect(rrect, paint); 56 canvas.drawRRect(rrect, paint);
53 } 57 }
54 58
55 if (toggleAnimation.value > _kMidpoint) { 59 if (toggleAnimation.value > _kMidpoint) {
56 double t = (toggleAnimation.value - _kMidpoint) / (1.0 - _kMidpoint); 60 double t = (toggleAnimation.value - _kMidpoint) / (1.0 - _kMidpoint);
57 61
58 // Solid filled rrect 62 // Solid filled rrect
59 paint.setStyle(sky.PaintingStyle.strokeAndFill); 63 paint.setStyle(sky.PaintingStyle.strokeAndFill);
60 Color themeColor = Theme.of(this).primary[500];
61 paint.color = new Color.fromARGB((t * 255).floor(), 64 paint.color = new Color.fromARGB((t * 255).floor(),
62 themeColor.red, 65 themeData.accentColor.red,
63 themeColor.green, 66 themeData.accentColor.green,
64 themeColor.blue); 67 themeData.accentColor.blue);
65 canvas.drawRRect(rrect, paint); 68 canvas.drawRRect(rrect, paint);
66 69
67 // White inner check 70 // White inner check
68 paint.color = const sky.Color(0xFFFFFFFF); 71 paint.color = const sky.Color(0xFFFFFFFF);
69 paint.setStyle(sky.PaintingStyle.stroke); 72 paint.setStyle(sky.PaintingStyle.stroke);
70 sky.Path path = new sky.Path(); 73 sky.Path path = new sky.Path();
71 sky.Point start = new sky.Point(_kEdgeSize * 0.2, _kEdgeSize * 0.5); 74 sky.Point start = new sky.Point(_kEdgeSize * 0.2, _kEdgeSize * 0.5);
72 sky.Point mid = new sky.Point(_kEdgeSize * 0.4, _kEdgeSize * 0.7); 75 sky.Point mid = new sky.Point(_kEdgeSize * 0.4, _kEdgeSize * 0.7);
73 sky.Point end = new sky.Point(_kEdgeSize * 0.8, _kEdgeSize * 0.3); 76 sky.Point end = new sky.Point(_kEdgeSize * 0.8, _kEdgeSize * 0.3);
74 Point lerp(Point p1, Point p2, double t) 77 Point lerp(Point p1, Point p2, double t)
75 => new Point(p1.x * (1.0 - t) + p2.x * t, p1.y * (1.0 - t) + p2.y * t); 78 => new Point(p1.x * (1.0 - t) + p2.x * t, p1.y * (1.0 - t) + p2.y * t);
76 sky.Point drawStart = lerp(start, mid, 1.0 - t); 79 sky.Point drawStart = lerp(start, mid, 1.0 - t);
77 sky.Point drawEnd = lerp(mid, end, t); 80 sky.Point drawEnd = lerp(mid, end, t);
78 path.moveTo(drawStart.x, drawStart.y); 81 path.moveTo(drawStart.x, drawStart.y);
79 path.lineTo(mid.x, mid.y); 82 path.lineTo(mid.x, mid.y);
80 path.lineTo(drawEnd.x, drawEnd.y); 83 path.lineTo(drawEnd.x, drawEnd.y);
81 canvas.drawPath(path, paint); 84 canvas.drawPath(path, paint);
82 } 85 }
83 } 86 }
84 } 87 }
OLDNEW
« no previous file with comments | « sky/sdk/lib/widgets/card.dart ('k') | sky/sdk/lib/widgets/drawer.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698