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

Unified Diff: sky/sdk/lib/widgets/switch.dart

Issue 1185173002: Really basic Switch implementation in Sky. Could definitely use some polish (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: rebase 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 | « sky/sdk/lib/widgets/checkbox.dart ('k') | sky/sdk/lib/widgets/toggleable.dart » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: sky/sdk/lib/widgets/switch.dart
diff --git a/sky/sdk/lib/widgets/switch.dart b/sky/sdk/lib/widgets/switch.dart
new file mode 100644
index 0000000000000000000000000000000000000000..39b2979707a62518cea401c746feff85b98d8163
--- /dev/null
+++ b/sky/sdk/lib/widgets/switch.dart
@@ -0,0 +1,69 @@
+// 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 'dart:sky' as sky;
+
+import 'package:sky/theme2/colors.dart' as colors;
+import 'package:sky/theme2/shadows.dart';
+
+import '../painting/shadows.dart';
+import '../rendering/box.dart';
+import 'basic.dart';
+import 'toggleable.dart';
+
+// TODO(jackson): This should change colors with the theme
+sky.Color _kThumbOnColor = colors.Purple[500];
+const sky.Color _kThumbOffColor = const sky.Color(0xFFFAFAFA);
+sky.Color _kTrackOnColor = new sky.Color(_kThumbOnColor.value & (0x80 << 24));
+const sky.Color _kTrackOffColor = const sky.Color(0x42000000);
+const double _kSwitchWidth = 35.0;
+const double _kThumbRadius = 10.0;
+const double _kSwitchHeight = _kThumbRadius * 2.0;
+const double _kTrackHeight = 14.0;
+const double _kTrackRadius = _kTrackHeight / 2.0;
+const double _kTrackWidth = _kSwitchWidth - (_kThumbRadius - _kTrackRadius) * 2.0;
+
+class Switch extends Toggleable {
+ // TODO(jackson): Hit-test the switch so that it can respond to both taps and swipe gestures
+
+ Switch({
+ Object key,
+ bool value,
+ ValueChanged onChanged
+ }) : super(key: key, value: value, onChanged: onChanged);
+
+ Size get size => const Size(_kSwitchWidth + 2.0, _kSwitchHeight + 2.0);
+
+ void customPaintCallback(sky.Canvas canvas, Size size) {
+ sky.Color thumbColor = value ? _kThumbOnColor : _kThumbOffColor;
+ sky.Color trackColor = value ? _kTrackOnColor : _kTrackOffColor;
+
+ // Draw the track rrect
+ sky.Paint paint = new sky.Paint()..color = trackColor;
+ paint.setStyle(sky.PaintingStyle.fill);
+ sky.Rect rect = new sky.Rect.fromLTRB(
+ 0.0,
+ _kSwitchHeight / 2.0 - _kTrackHeight / 2.0,
+ _kTrackWidth,
+ _kSwitchHeight / 2.0 + _kTrackHeight / 2.0
+ );
+ sky.RRect rrect = new sky.RRect()..setRectXY(rect, _kTrackRadius, _kTrackRadius);
+ canvas.drawRRect(rrect, paint);
+
+ // Draw the raised thumb with a shadow
+ paint.color = thumbColor;
+ var builder = new ShadowDrawLooperBuilder();
+ for (BoxShadow boxShadow in shadows[1])
+ builder.addShadow(boxShadow.offset, boxShadow.color, boxShadow.blur);
+ paint.setDrawLooper(builder.build());
+
+ // The thumb contracts slightly during the animation
+ double inset = 2.0 - (toggleAnimation.value - 0.5).abs() * 2.0;
+ Point thumbPos = new Point(
+ _kTrackRadius + toggleAnimation.value * (_kTrackWidth - _kTrackRadius * 2),
+ _kSwitchHeight / 2.0
+ );
+ canvas.drawCircle(thumbPos.x, thumbPos.y, _kThumbRadius - inset, paint);
+ }
+}
« no previous file with comments | « sky/sdk/lib/widgets/checkbox.dart ('k') | sky/sdk/lib/widgets/toggleable.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698