From 9ebea31d52d279b86e4139ef3f3e18b85ba2b431 Mon Sep 17 00:00:00 2001 From: Adam Barth Date: Wed, 23 Sep 2015 16:02:56 -0700 Subject: [PATCH] Port some drawer and button widgets to fn3 --- .../sky/lib/src/fn3/drawer_divider.dart | 25 +++++ .../sky/lib/src/fn3/drawer_header.dart | 44 +++++++++ sky/packages/sky/lib/src/fn3/drawer_item.dart | 92 +++++++++++++++++++ .../lib/src/fn3/floating_action_button.dart | 69 ++++++++++++++ sky/packages/sky/lib/src/fn3/icon_button.dart | 35 +++++++ 5 files changed, 265 insertions(+) create mode 100644 sky/packages/sky/lib/src/fn3/drawer_divider.dart create mode 100644 sky/packages/sky/lib/src/fn3/drawer_header.dart create mode 100644 sky/packages/sky/lib/src/fn3/drawer_item.dart create mode 100644 sky/packages/sky/lib/src/fn3/floating_action_button.dart create mode 100644 sky/packages/sky/lib/src/fn3/icon_button.dart diff --git a/sky/packages/sky/lib/src/fn3/drawer_divider.dart b/sky/packages/sky/lib/src/fn3/drawer_divider.dart new file mode 100644 index 00000000000..0c0291c0eaf --- /dev/null +++ b/sky/packages/sky/lib/src/fn3/drawer_divider.dart @@ -0,0 +1,25 @@ +// 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 'package:sky/src/fn3/basic.dart'; +import 'package:sky/src/fn3/framework.dart'; +import 'package:sky/src/fn3/theme.dart'; + +class DrawerDivider extends StatelessComponent { + const DrawerDivider({ Key key }) : super(key: key); + + Widget build(BuildContext context) { + return new Container( + height: 0.0, + decoration: new BoxDecoration( + border: new Border( + bottom: new BorderSide( + color: Theme.of(context).dividerColor + ) + ) + ), + margin: const EdgeDims.symmetric(vertical: 8.0) + ); + } +} diff --git a/sky/packages/sky/lib/src/fn3/drawer_header.dart b/sky/packages/sky/lib/src/fn3/drawer_header.dart new file mode 100644 index 00000000000..b948dfca52b --- /dev/null +++ b/sky/packages/sky/lib/src/fn3/drawer_header.dart @@ -0,0 +1,44 @@ +// 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 'package:sky/material.dart'; +import 'package:sky/src/fn3/basic.dart'; +import 'package:sky/src/fn3/framework.dart'; +import 'package:sky/src/fn3/theme.dart'; + +// TODO(jackson): This class should usually render the user's +// preferred banner image rather than a solid background + +class DrawerHeader extends StatelessComponent { + const DrawerHeader({ Key key, this.child }) : super(key: key); + + final Widget child; + + Widget build(BuildContext context) { + return new Container( + height: kStatusBarHeight + kMaterialDrawerHeight, + decoration: new BoxDecoration( + backgroundColor: Theme.of(context).cardColor, + border: const Border( + bottom: const BorderSide( + color: const Color(0xFFD1D9E1), + width: 1.0 + ) + ) + ), + padding: const EdgeDims.only(bottom: 7.0), + margin: const EdgeDims.only(bottom: 8.0), + child: new Column([ + new Flexible(child: new Container()), + new Container( + padding: const EdgeDims.symmetric(horizontal: 16.0), + child: new DefaultTextStyle( + style: Theme.of(context).text.body2, + child: child + ) + )] + ) + ); + } +} diff --git a/sky/packages/sky/lib/src/fn3/drawer_item.dart b/sky/packages/sky/lib/src/fn3/drawer_item.dart new file mode 100644 index 00000000000..24d33e73d89 --- /dev/null +++ b/sky/packages/sky/lib/src/fn3/drawer_item.dart @@ -0,0 +1,92 @@ +// 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/gestures.dart'; +import 'package:sky/material.dart'; +import 'package:sky/painting.dart'; +import 'package:sky/src/fn3/basic.dart'; +import 'package:sky/src/fn3/button_state.dart'; +import 'package:sky/src/fn3/framework.dart'; +import 'package:sky/src/fn3/gesture_detector.dart'; +import 'package:sky/src/fn3/icon.dart'; +import 'package:sky/src/fn3/ink_well.dart'; +import 'package:sky/src/fn3/theme.dart'; + +class DrawerItem extends StatefulComponent { + const DrawerItem({ Key key, this.icon, this.child, this.onPressed, this.selected: false }) + : super(key: key); + + final String icon; + final Widget child; + final GestureTapListener onPressed; + final bool selected; + + DrawerItemState createState() => new DrawerItemState(this); +} + +class DrawerItemState extends ButtonState { + DrawerItemState(DrawerItem config) : super(config); + + TextStyle _getTextStyle(ThemeData themeData) { + TextStyle result = themeData.text.body2; + if (config.selected) + result = result.copyWith(color: themeData.primaryColor); + return result; + } + + Color _getBackgroundColor(ThemeData themeData) { + if (highlight) + return themeData.highlightColor; + if (config.selected) + return themeData.selectedColor; + return Colors.transparent; + } + + sky.ColorFilter _getColorFilter(ThemeData themeData) { + if (config.selected) + return new sky.ColorFilter.mode(themeData.primaryColor, sky.TransferMode.srcATop); + return new sky.ColorFilter.mode(const Color(0x73000000), sky.TransferMode.dstIn); + } + + Widget buildContent(BuildContext context) { + ThemeData themeData = Theme.of(context); + + List flexChildren = new List(); + if (config.icon != null) { + flexChildren.add( + new Padding( + padding: const EdgeDims.symmetric(horizontal: 16.0), + child: new Icon( + type: config.icon, + size: 24, + colorFilter: _getColorFilter(themeData)) + ) + ); + } + flexChildren.add( + new Flexible( + child: new Padding( + padding: const EdgeDims.symmetric(horizontal: 16.0), + child: new DefaultTextStyle( + style: _getTextStyle(themeData), + child: config.child + ) + ) + ) + ); + + return new GestureDetector( + onTap: config.onPressed, + child: new Container( + height: 48.0, + decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)), + child: new InkWell( + child: new Row(flexChildren) + ) + ) + ); + } +} diff --git a/sky/packages/sky/lib/src/fn3/floating_action_button.dart b/sky/packages/sky/lib/src/fn3/floating_action_button.dart new file mode 100644 index 00000000000..f8d58cc0e18 --- /dev/null +++ b/sky/packages/sky/lib/src/fn3/floating_action_button.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 'package:sky/gestures.dart'; +import 'package:sky/src/fn3/basic.dart'; +import 'package:sky/src/fn3/button_state.dart'; +import 'package:sky/src/fn3/framework.dart'; +import 'package:sky/src/fn3/gesture_detector.dart'; +import 'package:sky/src/fn3/icon.dart'; +import 'package:sky/src/fn3/ink_well.dart'; +import 'package:sky/src/fn3/material.dart'; +import 'package:sky/src/fn3/theme.dart'; + +// TODO(eseidel): This needs to change based on device size? +// http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing +const double _kSize = 56.0; + +class FloatingActionButton extends StatefulComponent { + const FloatingActionButton({ + Key key, + this.child, + this.backgroundColor, + this.onPressed + }) : super(key: key); + + final Widget child; + final Color backgroundColor; + final GestureTapListener onPressed; + + FloatingActionButtonState createState() => new FloatingActionButtonState(this); +} + +class FloatingActionButtonState extends ButtonState { + FloatingActionButtonState(FloatingActionButton config) : super(config); + + Widget buildContent(BuildContext context) { + IconThemeColor iconThemeColor = IconThemeColor.white; + Color materialColor = config.backgroundColor; + if (materialColor == null) { + ThemeData themeData = Theme.of(context); + materialColor = themeData.accentColor; + iconThemeColor = themeData.accentColorBrightness == ThemeBrightness.dark ? IconThemeColor.white : IconThemeColor.black; + } + + return new Material( + color: materialColor, + type: MaterialType.circle, + level: highlight ? 3 : 2, + child: new ClipOval( + child: new GestureDetector( + onTap: config.onPressed, + child: new Container( + width: _kSize, + height: _kSize, + child: new InkWell( + child: new Center( + child: new IconTheme( + data: new IconThemeData(color: iconThemeColor), + child: config.child + ) + ) + ) + ) + ) + ) + ); + } +} diff --git a/sky/packages/sky/lib/src/fn3/icon_button.dart b/sky/packages/sky/lib/src/fn3/icon_button.dart new file mode 100644 index 00000000000..15ce46f2ac3 --- /dev/null +++ b/sky/packages/sky/lib/src/fn3/icon_button.dart @@ -0,0 +1,35 @@ +// 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/src/fn3/basic.dart'; +import 'package:sky/src/fn3/icon.dart'; +import 'package:sky/src/fn3/framework.dart'; +import 'package:sky/src/fn3/gesture_detector.dart'; + +class IconButton extends StatelessComponent { + const IconButton({ Key key, this.icon, this.onPressed, this.color }) : super(key: key); + + final String icon; + final Function onPressed; + final Color color; + + Widget build(BuildContext context) { + Widget child = new Icon(type: icon, size: 24); + if (color != null) { + child = new ColorFilter( + color: color, + transferMode: sky.TransferMode.srcATop, + child: child + ); + } + return new GestureDetector( + onTap: onPressed, + child: new Padding( + child: child, + padding: const EdgeDims.all(8.0)) + ); + } +}