From eaf7228fff27adb10fb2068e2c000e7e7bf18cc0 Mon Sep 17 00:00:00 2001 From: Eric Seidel Date: Mon, 13 Jul 2015 11:29:51 -0700 Subject: [PATCH] Start an AddressBook example (to test text fields) Also fixed a bug in tool_bar where not supplying a center caused right not to be on the right. R=abarth@chromium.org, abarth@google.com Review URL: https://codereview.chromium.org/1234963002 . --- sdk/example/address_book/lib/main.dart | 101 +++++++++++++++++++++++++ sdk/lib/editing/input.dart | 22 ++++-- sdk/lib/theme/theme_data.dart | 5 ++ sdk/lib/widgets/tool_bar.dart | 16 ++-- 4 files changed, 129 insertions(+), 15 deletions(-) create mode 100644 sdk/example/address_book/lib/main.dart diff --git a/sdk/example/address_book/lib/main.dart b/sdk/example/address_book/lib/main.dart new file mode 100644 index 00000000000..dcb9e516214 --- /dev/null +++ b/sdk/example/address_book/lib/main.dart @@ -0,0 +1,101 @@ +// 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/theme/colors.dart' as colors; +import 'package:sky/theme/typography.dart' as typography; +import 'package:sky/widgets/basic.dart'; +import 'package:sky/widgets/default_text_style.dart'; +import 'package:sky/widgets/navigator.dart'; +import 'package:sky/widgets/theme.dart'; +import 'package:sky/widgets/widget.dart'; +import 'package:sky/widgets/task_description.dart'; +import 'package:sky/widgets/scaffold.dart'; +import 'package:sky/widgets/tool_bar.dart'; +import 'package:sky/widgets/icon_button.dart'; +import 'package:sky/widgets/floating_action_button.dart'; +import 'package:sky/widgets/icon.dart'; +import 'package:sky/widgets/material.dart'; +import 'package:sky/editing/input.dart'; + +class Field extends Container { + Field({this.icon: null, this.placeholder: null}); + + String icon; + String placeholder; + + Widget build() { + return new Flex([ + new Padding( + padding: const EdgeDims.symmetric(horizontal: 16.0), + child: new Icon(type:icon, size:24) + ), + new Flexible(child:new Input(placeholder:placeholder)) + ], + direction: FlexDirection.horizontal + ); + } +} + + +class AddressBookApp extends App { + + Widget buildToolBar() { + return new ToolBar( + left: new IconButton(icon: "navigation/arrow_back"), + right: [new IconButton(icon: "navigation/check")] + ); + } + + Widget buildFloatingActionButton() { + return new FloatingActionButton( + child: new Icon(type: 'image/photo_camera', size: 24), + backgroundColor: Theme.of(this).accentColor + ); + } + + Widget buildBody() { + return new Material( + child:new Block([ + new Field(icon:"social/person", placeholder:"Name"), + new Field(icon: "communication/phone", placeholder:"Phone"), + new Field(icon: "communication/email", placeholder:"Email"), + new Field(icon: "maps/place", placeholder:"Address"), + new Field(icon: "av/volume_up", placeholder:"Ringtone"), + new Field(icon: "content/add", placeholder:"Add note"), + ]) + ); + } + + Widget buildMain() { + return new Scaffold( + toolbar: buildToolBar(), + body: buildBody(), + floatingActionButton: buildFloatingActionButton() + ); + } + + Widget build() { + + ThemeData theme = new ThemeData( + brightness: ThemeBrightness.light, + primarySwatch: colors.Teal, + accentColor: colors.PinkAccent[100] + ); + + return new Theme( + data: theme, + child: new DefaultTextStyle( + style: typography.error, // if you see this, you've forgotten to correctly configure the text style! + child: new TaskDescription( + label: 'Address Book', + child: buildMain() + ) + ) + ); + } +} + +void main() { + runApp(new AddressBookApp()); +} diff --git a/sdk/lib/editing/input.dart b/sdk/lib/editing/input.dart index 11f3a59b287..992f0cbfb79 100644 --- a/sdk/lib/editing/input.dart +++ b/sdk/lib/editing/input.dart @@ -11,11 +11,20 @@ import 'package:sky/widgets/theme.dart'; typedef void ValueChanged(value); -const double _kHintOpacity = 0.26; +// TODO(eseidel): This isn't right, it's 16px on the bottom: +// http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field const EdgeDims _kTextfieldPadding = const EdgeDims.symmetric(vertical: 8.0); class Input extends StatefulComponent { + // Current thinking is that Widget will have an optional globalKey + // or heroKey and it will ask Focus.from(this).isFocused which will + // check using its globalKey. + // Only one element can use a globalKey at a time and its' up to + // Widget.sync to maintain the mapping. + // Never makes sense to have both a localKey and a globalKey. + // Possibly a class HeroKey who functions as a UUID. + Input({String key, this.placeholder, this.onChanged, @@ -54,29 +63,30 @@ class Input extends StatefulComponent { } Widget build() { + ThemeData themeData = Theme.of(this); + if (focused && !_isAttachedToKeyboard) { keyboard.show(_editableValue.stub); _isAttachedToKeyboard = true; } - TextStyle textStyle = Theme.of(this).text.subhead; + TextStyle textStyle = themeData.text.subhead; List textChildren = []; if (placeholder != null && _value.isEmpty) { Widget child = new Opacity( key: "placeholder", child: new Text(placeholder, style: textStyle), - opacity: _kHintOpacity + opacity: themeData.hintOpacity ); textChildren.add(child); } - ThemeData themeData = Theme.of(this); Color focusHighlightColor = themeData.accentColor; Color cursorColor = themeData.accentColor; if (themeData.primarySwatch != null) { - cursorColor = Theme.of(this).primarySwatch[200]; - focusHighlightColor = focused ? themeData.primarySwatch[400] : themeData.primarySwatch[200]; + cursorColor = themeData.primarySwatch[200]; + focusHighlightColor = focused ? themeData.primarySwatch[400] : themeData.hintColor; } textChildren.add(new EditableText( diff --git a/sdk/lib/theme/theme_data.dart b/sdk/lib/theme/theme_data.dart index 0043ee132bb..e9be1bb2fe3 100644 --- a/sdk/lib/theme/theme_data.dart +++ b/sdk/lib/theme/theme_data.dart @@ -23,6 +23,9 @@ class ThemeData { canvasColor = brightness == ThemeBrightness.dark ? colors.Grey[850] : colors.Grey[50], 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, text = brightness == ThemeBrightness.dark ? typography.white : typography.black { assert(brightness != null); @@ -52,6 +55,8 @@ class ThemeData { final Color canvasColor; final Color cardColor; final Color dividerColor; + final Color hintColor; + final double hintOpacity; final typography.TextTheme text; Color _primaryColor; diff --git a/sdk/lib/widgets/tool_bar.dart b/sdk/lib/widgets/tool_bar.dart index 542d75df554..3ed8bf9879e 100644 --- a/sdk/lib/widgets/tool_bar.dart +++ b/sdk/lib/widgets/tool_bar.dart @@ -47,16 +47,14 @@ class ToolBar extends Component { if (left != null) children.add(left); - if (center != null) { - children.add( - new Flexible( - child: new Padding( - child: center, - padding: new EdgeDims.only(left: 24.0) - ) + children.add( + new Flexible( + child: new Padding( + child: center, + padding: new EdgeDims.only(left: 24.0) ) - ); - } + ) + ); if (right != null) children.addAll(right);