From ef1a3ec87660cb8d93d12dbcc87632e498ac71c2 Mon Sep 17 00:00:00 2001 From: Adam Barth Date: Mon, 13 Jul 2015 16:50:05 -0700 Subject: [PATCH] Improve drawer menu items - Use a separate selected and highlight color (now part of ThemeData) - Colorize the icon of the selected menu item R=ianh@google.com Review URL: https://codereview.chromium.org/1241483002 . --- sdk/example/demo_launcher/lib/main.dart | 2 +- sdk/example/widgets/card_collection.dart | 4 +- sdk/lib/theme/colors.dart | 5 ++- sdk/lib/theme/theme_data.dart | 6 ++- sdk/lib/widgets/dialog.dart | 2 +- sdk/lib/widgets/menu_item.dart | 57 +++++++++++++----------- sdk/lib/widgets/tabs.dart | 2 +- 7 files changed, 44 insertions(+), 34 deletions(-) diff --git a/sdk/example/demo_launcher/lib/main.dart b/sdk/example/demo_launcher/lib/main.dart index 8a448c88217..f1d7fa729b6 100644 --- a/sdk/example/demo_launcher/lib/main.dart +++ b/sdk/example/demo_launcher/lib/main.dart @@ -105,7 +105,7 @@ List demos = [ description: 'Demo of alternative layouts', textTheme: typography.black, decoration: new BoxDecoration( - backgroundColor: colors.Black, + backgroundColor: colors.black, backgroundImage: new BackgroundImage( image: _bundle.loadImage('assets/sector_thumbnail.png'), fit: BackgroundFit.cover diff --git a/sdk/example/widgets/card_collection.dart b/sdk/example/widgets/card_collection.dart index 6cd48e906d9..6f9f22297f1 100644 --- a/sdk/example/widgets/card_collection.dart +++ b/sdk/example/widgets/card_collection.dart @@ -18,7 +18,7 @@ import 'package:sky/widgets/widget.dart'; class CardCollectionApp extends App { final TextStyle cardLabelStyle = - new TextStyle(color: White, fontSize: 18.0, fontWeight: bold); + new TextStyle(color: white, fontSize: 18.0, fontWeight: bold); final List cardHeights = [ 48.0, 64.0, 82.0, 46.0, 60.0, 55.0, 84.0, 96.0, 50.0, @@ -43,7 +43,7 @@ class CardCollectionApp extends App { Widget _builder(int index) { if (index >= visibleCardIndices.length) return null; - + int cardIndex = visibleCardIndices[index]; Color color = lerpColor(Red[500], Blue[500], cardIndex / cardHeights.length); Widget label = new Text("Item ${cardIndex}", style: cardLabelStyle); diff --git a/sdk/lib/theme/colors.dart b/sdk/lib/theme/colors.dart index efa90517247..344a6603690 100644 --- a/sdk/lib/theme/colors.dart +++ b/sdk/lib/theme/colors.dart @@ -7,8 +7,9 @@ import 'dart:sky' show Color; /// [Color] constants which represent Material design's /// [color palette](http://www.google.com/design/spec/style/color.html). -const White = const Color(0xFFFFFFFF); -const Black = const Color(0x00000000); +const white = const Color(0xFFFFFFFF); +const black = const Color(0xFF000000); +const transparent = const Color(0x00000000); const Map Red = const { 50: const Color(0xFFFFEBEE), diff --git a/sdk/lib/theme/theme_data.dart b/sdk/lib/theme/theme_data.dart index e9be1bb2fe3..46a1a6b59c0 100644 --- a/sdk/lib/theme/theme_data.dart +++ b/sdk/lib/theme/theme_data.dart @@ -21,11 +21,13 @@ class ThemeData { this.primarySwatch = primarySwatch, primaryColorBrightness = primarySwatch == null ? brightness : ThemeBrightness.dark, canvasColor = brightness == ThemeBrightness.dark ? colors.Grey[850] : colors.Grey[50], - cardColor = brightness == ThemeBrightness.dark ? colors.Grey[800] : colors.White, + cardColor = brightness == ThemeBrightness.dark ? colors.Grey[800] : colors.white, dividerColor = brightness == ThemeBrightness.dark ? const Color(0x1FFFFFFF) : const Color(0x1F000000), // Some users want the pre-multiplied color, others just want the opacity. hintColor = brightness == ThemeBrightness.dark ? const Color(0x42FFFFFF) : const Color(0x4C000000), hintOpacity = brightness == ThemeBrightness.dark ? 0.26 : 0.30, + highlightColor = const Color(0x66999999), + selectedColor = const Color(0x33999999), text = brightness == ThemeBrightness.dark ? typography.white : typography.black { assert(brightness != null); @@ -56,6 +58,8 @@ class ThemeData { final Color cardColor; final Color dividerColor; final Color hintColor; + final Color highlightColor; + final Color selectedColor; final double hintOpacity; final typography.TextTheme text; diff --git a/sdk/lib/widgets/dialog.dart b/sdk/lib/widgets/dialog.dart index d9253dfbc1b..4328190a619 100644 --- a/sdk/lib/widgets/dialog.dart +++ b/sdk/lib/widgets/dialog.dart @@ -39,7 +39,7 @@ class Dialog extends Component { Color get _color { switch (Theme.of(this).brightness) { case ThemeBrightness.light: - return colors.White; + return colors.white; case ThemeBrightness.dark: return colors.Grey[800]; } diff --git a/sdk/lib/widgets/menu_item.dart b/sdk/lib/widgets/menu_item.dart index 09ba28c7466..40b888e8c0f 100644 --- a/sdk/lib/widgets/menu_item.dart +++ b/sdk/lib/widgets/menu_item.dart @@ -2,7 +2,10 @@ // 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/painting/text_style.dart'; +import 'package:sky/theme/colors.dart' as colors; import 'package:sky/widgets/basic.dart'; import 'package:sky/widgets/button_base.dart'; import 'package:sky/widgets/default_text_style.dart'; @@ -11,20 +14,6 @@ import 'package:sky/widgets/ink_well.dart'; import 'package:sky/widgets/theme.dart'; import 'package:sky/widgets/widget.dart'; -const BoxDecoration _kHighlightDecoration = const BoxDecoration( - backgroundColor: const Color.fromARGB(102, 153, 153, 153) -); - -// TODO(abarth): We shouldn't need _kHighlightBoring, but currently Container -// isn't smart enough to retain the components it builds when we -// add or remove a |decoration|. For now, we use a transparent -// decoration to avoid changing the structure of the tree. The -// right fix, however, is to make Container smarter about how it -// syncs its subcomponents. -const BoxDecoration _kHighlightBoring = const BoxDecoration( - backgroundColor: const Color.fromARGB(0, 0, 0, 0) -); - class MenuItem extends ButtonBase { MenuItem({ String key, this.icon, this.children, this.onPressed, this.selected: false }) : super(key: key); @@ -42,22 +31,40 @@ class MenuItem extends ButtonBase { super.syncFields(source); } - TextStyle get textStyle { - TextStyle result = Theme.of(this).text.body2; - if (highlight) - result = result.copyWith(color: Theme.of(this).primaryColor); + TextStyle _getTextStyle(ThemeData themeData) { + TextStyle result = themeData.text.body2; + if (selected) + result = result.copyWith(color: themeData.primaryColor); return result; } + Color _getBackgroundColor(ThemeData themeData) { + if (highlight) + return themeData.highlightColor; + if (selected) + return themeData.selectedColor; + return colors.transparent; + } + Widget buildContent() { + ThemeData themeData = Theme.of(this); + List flexChildren = new List(); if (icon != null) { + Widget child = new Icon(type: icon, size: 24); + if (selected) { + child = new ColorFilter( + color: themeData.primaryColor, + transferMode: sky.TransferMode.srcATop, + child: child + ); + } flexChildren.add( new Opacity( opacity: selected ? 1.0 : 0.45, child: new Padding( padding: const EdgeDims.symmetric(horizontal: 16.0), - child: new Icon(type: icon, size: 24) + child: child ) ) ); @@ -67,12 +74,13 @@ class MenuItem extends ButtonBase { child: new Padding( padding: const EdgeDims.symmetric(horizontal: 16.0), child: new DefaultTextStyle( - style: textStyle, + style: _getTextStyle(themeData), child: new Flex(children, direction: FlexDirection.horizontal) ) ) ) ); + return new Listener( onGestureTap: (_) { if (onPressed != null) @@ -80,12 +88,9 @@ class MenuItem extends ButtonBase { }, child: new Container( height: 48.0, - decoration: selected ? _kHighlightDecoration : _kHighlightBoring, - child: new Container( - decoration: highlight ? _kHighlightDecoration : _kHighlightBoring, - child: new InkWell( - child: new Flex(flexChildren) - ) + decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)), + child: new InkWell( + child: new Flex(flexChildren) ) ) ); diff --git a/sdk/lib/widgets/tabs.dart b/sdk/lib/widgets/tabs.dart index bb12080c7de..4bfc3b32a1e 100644 --- a/sdk/lib/widgets/tabs.dart +++ b/sdk/lib/widgets/tabs.dart @@ -416,7 +416,7 @@ class TabBar extends Scrollable { Color backgroundColor = themeData.primaryColor; Color indicatorColor = themeData.accentColor; if (indicatorColor == backgroundColor) { - indicatorColor = colors.White; + indicatorColor = colors.white; } TextStyle textStyle;