From ce7e8260c324767ad9064beb1a2bf0ff665019b0 Mon Sep 17 00:00:00 2001 From: Hans Muller Date: Fri, 26 Jun 2015 09:30:53 -0700 Subject: [PATCH] Use Theme to define the colors and TextStyles for Tab, TabBar Also added a smoke test for examples/widgets/tabs.dart. R=abarth@chromium.org Review URL: https://codereview.chromium.org/1213873002. --- examples/widgets/tabs.dart | 4 +- sdk/lib/widgets/tabs.dart | 65 ++++++++++++---- tests/examples/tabs-expected.txt | 128 +++++++++++++++++++++++++++++++ tests/examples/tabs.dart | 18 +++++ 4 files changed, 196 insertions(+), 19 deletions(-) create mode 100644 tests/examples/tabs-expected.txt create mode 100644 tests/examples/tabs.dart diff --git a/examples/widgets/tabs.dart b/examples/widgets/tabs.dart index cb711845a74..320b0fc57d8 100644 --- a/examples/widgets/tabs.dart +++ b/examples/widgets/tabs.dart @@ -44,8 +44,8 @@ class TabbedNavigatorApp extends App { .map((labels) => buildTabNavigator(labels, navigatorIndex++)); ToolBar toolbar = new ToolBar( - center: new Text('Tabbed Navigator', style: white.title), - backgroundColor: Blue[500]); + center: new Text('Tabbed Navigator', style: white.title) + ); return new Scaffold( toolbar: toolbar, diff --git a/sdk/lib/widgets/tabs.dart b/sdk/lib/widgets/tabs.dart index 9d8af98fa98..741594d2bf5 100644 --- a/sdk/lib/widgets/tabs.dart +++ b/sdk/lib/widgets/tabs.dart @@ -3,15 +3,13 @@ // found in the LICENSE file. import 'dart:math' as math; -import 'dart:sky' as sky; -import 'package:sky/painting/text_style.dart'; import 'package:sky/rendering/box.dart'; import 'package:sky/rendering/object.dart'; -import 'package:sky/theme/colors.dart'; import 'package:sky/widgets/basic.dart'; import 'package:sky/widgets/icon.dart'; import 'package:sky/widgets/ink_well.dart'; +import 'package:sky/widgets/theme.dart'; import 'package:sky/widgets/widget.dart'; typedef void SelectedIndexChanged(int selectedIndex); @@ -20,6 +18,7 @@ const double _kTabHeight = 46.0; const double _kTabIndicatorHeight = 2.0; const double _kTabBarHeight = _kTabHeight + _kTabIndicatorHeight; const double _kMinTabWidth = 72.0; +const int _kTabIconSize = 24; class TabBarParentData extends BoxParentData with ContainerParentDataMixin { } @@ -37,7 +36,25 @@ class RenderTabBar extends RenderBox with } } - void setParentData(RenderBox child) { + Color _backgroundColor; + Color get backgroundColor => _backgroundColor; + void set backgroundColor(Color value) { + if (_backgroundColor != value) { + _backgroundColor = value; + markNeedsPaint(); + } + } + + Color _indicatorColor; + Color get indicatorColor => _indicatorColor; + void set indicatorColor(Color value) { + if (_indicatorColor != value) { + _indicatorColor = value; + markNeedsPaint(); + } + } + + void setupParentData(RenderBox child) { if (child.parentData is! TabBarParentData) child.parentData = new TabBarParentData(); } @@ -119,16 +136,20 @@ class RenderTabBar extends RenderBox with } void _paintIndicator(RenderCanvas canvas, RenderBox selectedTab) { + if (indicatorColor == null) + return; + var size = new Size(selectedTab.size.width, _kTabIndicatorHeight); var point = new Point(selectedTab.parentData.position.x, _kTabHeight); Rect rect = new Rect.fromPointAndSize(point, size); - // TODO(hansmuller): indicator color should be based on the theme. - canvas.drawRect(rect, new Paint()..color = White); + canvas.drawRect(rect, new Paint()..color = indicatorColor); } void paint(RenderCanvas canvas) { - Rect rect = new Rect.fromSize(size); - canvas.drawRect(rect, new Paint()..color = Blue[500]); + if (backgroundColor != null) { + Rect rect = new Rect.fromSize(size); + canvas.drawRect(rect, new Paint()..color = backgroundColor); + } int index = 0; RenderBox child = firstChild; @@ -143,10 +164,17 @@ class RenderTabBar extends RenderBox with } class TabBarWrapper extends MultiChildRenderObjectWrapper { - TabBarWrapper(List children, this.selectedIndex, { String key }) - : super(key: key, children: children); + TabBarWrapper({ + List children, + this.selectedIndex, + this.backgroundColor, + this.indicatorColor, + String key + }) : super(key: key, children: children); final int selectedIndex; + final Color backgroundColor; + final Color indicatorColor; RenderTabBar get root => super.root; RenderTabBar createNode() => new RenderTabBar(); @@ -154,6 +182,8 @@ class TabBarWrapper extends MultiChildRenderObjectWrapper { void syncRenderObject(Widget old) { super.syncRenderObject(old); root.selectedIndex = selectedIndex; + root.backgroundColor = backgroundColor; + root.indicatorColor = indicatorColor; } } @@ -176,18 +206,14 @@ class Tab extends Component { final TabLabel label; final bool selected; - // TODO(hansmuller): use themes here. - static const TextStyle selectedStyle = const TextStyle(color: const Color(0xFFFFFFFF)); - static const TextStyle style = const TextStyle(color: const Color(0xB2FFFFFF)); - Widget _buildLabelText() { assert(label.text != null); - return new Text(label.text, style: style); + return new Text(label.text, style: Theme.of(this).toolbarText.button); } Widget _buildLabelIcon() { assert(label.icon != null); - return new Icon(type: label.icon, size: 24); + return new Icon(type: label.icon, size: _kTabIconSize); } Widget build() { @@ -254,7 +280,12 @@ class TabBar extends Component { for (int tabIndex = 0; tabIndex < labels.length; tabIndex++) { tabs.add(_toTab(labels[tabIndex], tabIndex)); } - return new TabBarWrapper(tabs, selectedIndex); + return new TabBarWrapper( + children: tabs, + selectedIndex: selectedIndex, + backgroundColor: Theme.of(this).primary[500], + indicatorColor: Theme.of(this).accent[200] + ); } } diff --git a/tests/examples/tabs-expected.txt b/tests/examples/tabs-expected.txt new file mode 100644 index 00000000000..65750740f7f --- /dev/null +++ b/tests/examples/tabs-expected.txt @@ -0,0 +1,128 @@ +CONSOLE: TestRenderView enabled +CONSOLE: +PAINT FOR FRAME #1 ---------------------------------------------- +1 | TestRenderCanvas() constructor: 800.0 x 600.0 +------------------------------------------------------------------------ +CONSOLE: +PAINT FOR FRAME #2 ---------------------------------------------- +2 | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | paintChild RenderScaffold at Point(0.0, 0.0) +2 | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | paintChild RenderDecoratedBox at Point(0.0, 81.0) +2 | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | drawRRect(Instance of 'RRect', Paint(color:Color(0xff9e9e9e))) +2 | | | paintChild RenderBlock at Point(0.0, 163.5) +2 | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | paintChild RenderPadding at Point(0.0, 0.0) +2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | paintChild RenderTabBar at Point(0.0, 0.0) +2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 48.0), Paint(color:Color(0xff3f51b5))) +2 | | | | | | paintChild RenderInkWell at Point(0.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(65.5, 16.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | drawRect(Rect.fromLTRB(0.0, 46.0, 200.0, 48.0), Paint(color:Color(0xffff4081))) +2 | | | | | | paintChild RenderInkWell at Point(200.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(64.0, 16.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | restore +2 | | | | | | paintChild RenderInkWell at Point(400.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(63.0, 16.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | restore +2 | | | | | | paintChild RenderInkWell at Point(600.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(61.0, 16.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | restore +2 | | | | paintChild RenderPadding at Point(0.0, 64.0) +2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | paintChild RenderTabBar at Point(0.0, 0.0) +2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 48.0), Paint(color:Color(0xff3f51b5))) +2 | | | | | | paintChild RenderInkWell at Point(0.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | drawRect(Rect.fromLTRB(0.0, 46.0, 200.0, 48.0), Paint(color:Color(0xffff4081))) +2 | | | | | | paintChild RenderInkWell at Point(200.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | restore +2 | | | | | | paintChild RenderInkWell at Point(400.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | restore +2 | | | | | | paintChild RenderInkWell at Point(600.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(88.0, 12.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | restore +2 | | | | paintChild RenderPadding at Point(0.0, 128.0) +2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | paintChild RenderTabBar at Point(0.0, 0.0) +2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 48.0), Paint(color:Color(0xff3f51b5))) +2 | | | | | | paintChild RenderInkWell at Point(0.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(65.5, 0.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | paintChild RenderImage at Point(22.5, 20.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | drawRect(Rect.fromLTRB(0.0, 46.0, 200.0, 48.0), Paint(color:Color(0xffff4081))) +2 | | | | | | paintChild RenderInkWell at Point(200.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(64.0, 0.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | paintChild RenderImage at Point(24.0, 20.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | restore +2 | | | | | | paintChild RenderInkWell at Point(400.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(63.0, 0.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | paintChild RenderImage at Point(25.0, 20.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | restore +2 | | | | | | paintChild RenderInkWell at Point(600.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | paintChild RenderOpacity at Point(61.0, 0.0) +2 | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) +2 | | | | | | | | paintChild RenderParagraph at Point(0.0, 4.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | paintChild RenderImage at Point(27.0, 20.0) +2 | | | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | | | restore +2 | | paintChild RenderDecoratedBox at Point(0.0, 0.0) +2 | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 81.0), Paint(color:Color(0xff3f51b5), drawLooper:true)) +2 | | | paintChild RenderFlex at Point(8.0, 0.0) +2 | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | paintChild RenderConstrainedBox at Point(0.0, 25.0) +2 | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | paintChild RenderPadding at Point(0.0, 16.0) +2 | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +2 | | | | | | paintChild RenderParagraph at Point(24.0, 0.0) +2 | | | | | | | TestRenderCanvas() constructor: 800.0 x 600.0 +------------------------------------------------------------------------ +PAINTED 2 FRAMES diff --git a/tests/examples/tabs.dart b/tests/examples/tabs.dart new file mode 100644 index 00000000000..a691a9bd99e --- /dev/null +++ b/tests/examples/tabs.dart @@ -0,0 +1,18 @@ +// 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:async'; + +import 'package:sky/widgets/widget.dart'; + +import '../../examples/widgets/tabs.dart'; +import '../resources/display_list.dart'; + +main() async { + TestRenderView testRenderView = new TestRenderView(); + TabbedNavigatorApp app = new TabbedNavigatorApp(); + runApp(app, renderViewOverride: testRenderView); + await testRenderView.checkFrame(); + testRenderView.endTest(); +}