From 2b73e7288b79541c87ff8f7cf4ab0f3cf59f84ee Mon Sep 17 00:00:00 2001 From: Collin Jackson Date: Tue, 23 Jun 2015 10:12:58 -0700 Subject: [PATCH] Teach Sky buttons and dialogs how to use the new Theme system R=eseidel@chromium.org, eseidel Review URL: https://codereview.chromium.org/1192773004. --- sdk/lib/theme/theme_data.dart | 26 ++++++++++++-------------- sdk/lib/widgets/dialog.dart | 12 ++++++++++++ sdk/lib/widgets/flat_button.dart | 15 ++++++--------- sdk/lib/widgets/material.dart | 14 +++++++++++++- sdk/lib/widgets/material_button.dart | 7 +------ sdk/lib/widgets/raised_button.dart | 27 ++++++++++++--------------- sdk/lib/widgets/theme.dart | 6 ++++-- tests/widgets/dialog-expected.txt | 2 +- 8 files changed, 61 insertions(+), 48 deletions(-) diff --git a/sdk/lib/theme/theme_data.dart b/sdk/lib/theme/theme_data.dart index 7b06afc67ed..fe6d3810d49 100644 --- a/sdk/lib/theme/theme_data.dart +++ b/sdk/lib/theme/theme_data.dart @@ -7,35 +7,33 @@ import 'dart:sky'; import 'typography.dart' as typography; import 'colors.dart' as colors; +enum ThemeBrightness { dark, light } + class ThemeData { ThemeData.light({ this.primary, this.accent, bool darkToolbar: false }) - : toolbarText = darkToolbar ? typography.white : typography.black, - text = typography.black, - backgroundColor = colors.Grey[50], - dialogColor = colors.White; + : brightness = ThemeBrightness.light, + toolbarText = darkToolbar ? typography.white : typography.black, + text = typography.black; ThemeData.dark({ this.primary, this.accent }) - : toolbarText = typography.white, - text = typography.white, - backgroundColor = colors.Grey[850], - dialogColor = colors.Grey[800]; + : brightness = ThemeBrightness.dark, + toolbarText = typography.white, + text = typography.white; ThemeData.fallback() - : primary = colors.Indigo, + : brightness = ThemeBrightness.light, + primary = colors.Indigo, accent = colors.PinkAccent, toolbarText = typography.white, - text = typography.black, - backgroundColor = colors.Grey[50], - dialogColor = colors.White; + text = typography.black; + final ThemeBrightness brightness; final Map primary; final Map accent; final typography.TextTheme text; final typography.TextTheme toolbarText; - final Color backgroundColor; - final Color dialogColor; } diff --git a/sdk/lib/widgets/dialog.dart b/sdk/lib/widgets/dialog.dart index 0f4c0d0de06..027cd0cb0e6 100644 --- a/sdk/lib/widgets/dialog.dart +++ b/sdk/lib/widgets/dialog.dart @@ -2,8 +2,10 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. +import '../theme/colors.dart' as colors; import 'basic.dart'; import 'material.dart'; +import "theme.dart"; class Dialog extends Component { Dialog({ @@ -19,6 +21,15 @@ class Dialog extends Component { final Widget actions; final Function onDismiss; + Color get color { + switch (Theme.of(this).brightness) { + case ThemeBrightness.light: + return colors.White; + case ThemeBrightness.dark: + return colors.Grey[800]; + } + } + Widget build() { Container mask = new Container( decoration: const BoxDecoration( @@ -45,6 +56,7 @@ class Dialog extends Component { constraints: new BoxConstraints(minWidth: 280.0), child: new Material( level: 4, + color: color, child: new ShrinkWrapWidth( child: new Block(children) ) diff --git a/sdk/lib/widgets/flat_button.dart b/sdk/lib/widgets/flat_button.dart index 017e5458900..c4b65cceed3 100644 --- a/sdk/lib/widgets/flat_button.dart +++ b/sdk/lib/widgets/flat_button.dart @@ -5,29 +5,26 @@ import '../theme/colors.dart'; import 'basic.dart'; import 'material_button.dart'; - -export 'material_button.dart' show MaterialButtonTheme; +import 'theme.dart'; class FlatButton extends MaterialButton { FlatButton({ String key, Widget child, bool enabled: true, - Function onPressed, - MaterialButtonTheme theme: MaterialButtonTheme.light + Function onPressed }) : super(key: key, child: child, enabled: enabled, - onPressed: onPressed, - theme: theme); + onPressed: onPressed); Color get color { if (!enabled || !highlight) return null; - switch (theme) { - case MaterialButtonTheme.light: + switch (Theme.of(this).brightness) { + case ThemeBrightness.light: return Grey[400]; - case MaterialButtonTheme.dark: + case ThemeBrightness.dark: return Grey[200]; } } diff --git a/sdk/lib/widgets/material.dart b/sdk/lib/widgets/material.dart index 73b52cb66f8..864cf1a6af2 100644 --- a/sdk/lib/widgets/material.dart +++ b/sdk/lib/widgets/material.dart @@ -3,6 +3,7 @@ // found in the LICENSE file. import '../painting/box_painter.dart'; +import '../theme/colors.dart' as colors; import '../theme/edges.dart'; import '../theme/shadows.dart'; import 'basic.dart'; @@ -24,6 +25,17 @@ class Material extends Component { final MaterialEdge edge; final Color color; + Color get backgroundColor { + if (color != null) + return color; + switch (Theme.of(this).brightness) { + case ThemeBrightness.light: + return colors.Grey[50]; + case ThemeBrightness.dark: + return colors.Grey[850]; + } + } + // TODO(ianh): we should make this animate level changes and color changes Widget build() { @@ -31,7 +43,7 @@ class Material extends Component { decoration: new BoxDecoration( boxShadow: shadows[level], borderRadius: edges[edge], - backgroundColor: color == null ? Theme.of(this).backgroundColor : color, + backgroundColor: backgroundColor, shape: edge == MaterialEdge.circle ? Shape.circle : Shape.rectangle ), child: new DefaultTextStyle(style: Theme.of(this).text.body1, child: child) diff --git a/sdk/lib/widgets/material_button.dart b/sdk/lib/widgets/material_button.dart index 965d34d5520..f1513e5fbf5 100644 --- a/sdk/lib/widgets/material_button.dart +++ b/sdk/lib/widgets/material_button.dart @@ -7,8 +7,6 @@ import 'button_base.dart'; import 'ink_well.dart'; import 'material.dart'; -enum MaterialButtonTheme { light, dark } - // Rather than using this class directly, please use FlatButton or RaisedButton. abstract class MaterialButton extends ButtonBase { @@ -16,20 +14,17 @@ abstract class MaterialButton extends ButtonBase { String key, this.child, this.enabled: true, - this.onPressed, - this.theme: MaterialButtonTheme.light + this.onPressed }) : super(key: key); Widget child; bool enabled; Function onPressed; - MaterialButtonTheme theme; void syncFields(MaterialButton source) { child = source.child; enabled = source.enabled; onPressed = source.onPressed; - theme = source.theme; super.syncFields(source); } diff --git a/sdk/lib/widgets/raised_button.dart b/sdk/lib/widgets/raised_button.dart index 7e8bfb5aa33..2ff19038e50 100644 --- a/sdk/lib/widgets/raised_button.dart +++ b/sdk/lib/widgets/raised_button.dart @@ -2,11 +2,10 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import '../theme/colors.dart'; +import '../theme/colors.dart' as colors; import 'basic.dart'; import 'material_button.dart'; - -export 'material_button.dart' show MaterialButtonTheme; +import 'theme.dart'; class RaisedButton extends MaterialButton { @@ -14,32 +13,30 @@ class RaisedButton extends MaterialButton { String key, Widget child, bool enabled: true, - Function onPressed, - MaterialButtonTheme theme: MaterialButtonTheme.light + Function onPressed }) : super(key: key, child: child, enabled: enabled, - onPressed: onPressed, - theme: theme); + onPressed: onPressed); Color get color { if (enabled) { - switch (theme) { - case MaterialButtonTheme.light: + switch (Theme.of(this).brightness) { + case ThemeBrightness.light: if (highlight) - return Grey[350]; + return colors.Grey[350]; else - return Grey[300]; + return colors.Grey[300]; break; - case MaterialButtonTheme.dark: + case ThemeBrightness.dark: if (highlight) - return Blue[700]; + return Theme.of(this).primary[700]; else - return Blue[600]; + return Theme.of(this).primary[600]; break; } } else { - return Grey[350]; + return colors.Grey[350]; } } diff --git a/sdk/lib/widgets/theme.dart b/sdk/lib/widgets/theme.dart index f2ef760d758..5e8c03067ac 100644 --- a/sdk/lib/widgets/theme.dart +++ b/sdk/lib/widgets/theme.dart @@ -2,10 +2,12 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'package:sky/theme/theme_data.dart'; +import '../theme/theme_data.dart'; import 'basic.dart'; import 'widget.dart'; +export '../theme/theme_data.dart' show ThemeBrightness; + class Theme extends Inherited { Theme({ @@ -19,7 +21,7 @@ class Theme extends Inherited { final ThemeData data; - static ThemeData _kFallbackTheme = new ThemeData.fallback(); + static final ThemeData _kFallbackTheme = new ThemeData.fallback(); static ThemeData of(Component component) { Theme theme = component.inheritedOfType(Theme); diff --git a/tests/widgets/dialog-expected.txt b/tests/widgets/dialog-expected.txt index 1387974b1fc..54846bf81de 100644 --- a/tests/widgets/dialog-expected.txt +++ b/tests/widgets/dialog-expected.txt @@ -15,7 +15,7 @@ PAINT FOR FRAME #2 ---------------------------------------------- 2 | | | TestDisplayList() constructor: 800.0 x 600.0 2 | | | paintChild RenderConstrainedBox at Point(260.0, 276.0) 2 | | | | TestDisplayList() constructor: 800.0 x 600.0 -2 | | | | drawRRect(Instance of 'RRect', Paint(color:Color(0xfffafafa), drawLooper:true)) +2 | | | | drawRRect(Instance of 'RRect', Paint(color:Color(0xffffffff), drawLooper:true)) 2 | | | | paintChild RenderParagraph at Point(0.0, 0.0) 2 | | | | | TestDisplayList() constructor: 800.0 x 600.0 2 | | | | paintChild RenderParagraph at Point(0.0, 16.0)