From cb43463e3ab4a8bfef9a57fdfd94a047f9ff26a5 Mon Sep 17 00:00:00 2001 From: Hixie Date: Thu, 5 Nov 2015 17:05:57 -0800 Subject: [PATCH] Teach Block about padding. It's common to want a scrolling viewport but with padding around the contents. Teaching Block about this makes the places that do this substantially simpler and further buries ScrollableViewport and BlockBody (they're now only used in scrollable.dart). --- examples/fitness/lib/meal.dart | 22 ++++---- examples/fitness/lib/settings.dart | 42 +++++++-------- examples/stocks/lib/stock_settings.dart | 53 +++++++++---------- .../sky/lib/src/material/dropdown.dart | 2 +- .../sky/lib/src/material/popup_menu.dart | 13 ++--- .../sky/lib/src/widgets/scrollable.dart | 7 ++- 6 files changed, 65 insertions(+), 74 deletions(-) diff --git a/examples/fitness/lib/meal.dart b/examples/fitness/lib/meal.dart index 10e0703ed9a..945ea98edf4 100644 --- a/examples/fitness/lib/meal.dart +++ b/examples/fitness/lib/meal.dart @@ -84,19 +84,15 @@ class MealFragmentState extends State { Widget buildBody() { Meal meal = new Meal(when: new DateTime.now()); - // TODO(ianh): Fix Block such that we could use that here instead of rolling our own - return new ScrollableViewport( - child: new Container( - padding: const EdgeDims.all(20.0), - child: new BlockBody([ - new Text(meal.displayDate), - new Input( - key: descriptionKey, - placeholder: 'Describe meal', - onChanged: _handleDescriptionChanged - ), - ]) - ) + return new Block([ + new Text(meal.displayDate), + new Input( + key: descriptionKey, + placeholder: 'Describe meal', + onChanged: _handleDescriptionChanged + ), + ], + padding: const EdgeDims.all(20.0) ); } diff --git a/examples/fitness/lib/settings.dart b/examples/fitness/lib/settings.dart index eb4764e6020..21404f996a7 100644 --- a/examples/fitness/lib/settings.dart +++ b/examples/fitness/lib/settings.dart @@ -90,29 +90,25 @@ class SettingsFragmentState extends State { } Widget buildSettingsPane(BuildContext context) { - // TODO(ianh): Make Block capable of doing this - return new ScrollableViewport( - child: new Container( - padding: const EdgeDims.symmetric(vertical: 20.0), - child: new BlockBody([ - new DrawerItem( - onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); }, - child: new Row([ - new Flexible(child: new Text('Back up data to the cloud')), - new Switch(value: config.userData.backupMode == BackupMode.enabled, onChanged: _handleBackupChanged), - ]) - ), - new DrawerItem( - onPressed: () => _handleGoalWeightPressed(), - child: new Column([ - new Text('Goal Weight'), - new Text(goalWeightText, style: Theme.of(context).text.caption), - ], - alignItems: FlexAlignItems.start - ) - ), - ]) - ) + return new Block([ + new DrawerItem( + onPressed: () { _handleBackupChanged(!(config.userData.backupMode == BackupMode.enabled)); }, + child: new Row([ + new Flexible(child: new Text('Back up data to the cloud')), + new Switch(value: config.userData.backupMode == BackupMode.enabled, onChanged: _handleBackupChanged), + ]) + ), + new DrawerItem( + onPressed: () => _handleGoalWeightPressed(), + child: new Column([ + new Text('Goal Weight'), + new Text(goalWeightText, style: Theme.of(context).text.caption), + ], + alignItems: FlexAlignItems.start + ) + ), + ], + padding: const EdgeDims.symmetric(vertical: 20.0) ); } diff --git a/examples/stocks/lib/stock_settings.dart b/examples/stocks/lib/stock_settings.dart index 687668b4769..f98dc892619 100644 --- a/examples/stocks/lib/stock_settings.dart +++ b/examples/stocks/lib/stock_settings.dart @@ -81,34 +81,31 @@ class StockSettingsState extends State { Widget buildSettingsPane(BuildContext context) { // TODO(ianh): Once we have the gesture API hooked up, fix https://github.com/domokit/mojo/issues/281 // (whereby tapping the widgets below causes both the widget and the menu item to fire their callbacks) - return new ScrollableViewport( - child: new Container( - padding: const EdgeDims.symmetric(vertical: 20.0), - child: new BlockBody([ - new DrawerItem( - icon: 'action/thumb_up', - onPressed: () => _confirmOptimismChange(), - child: new Row([ - new Flexible(child: new Text('Everything is awesome')), - new Checkbox( - value: config.optimism == StockMode.optimistic, - onChanged: (bool value) => _confirmOptimismChange() - ), - ]) - ), - new DrawerItem( - icon: 'action/backup', - onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); }, - child: new Row([ - new Flexible(child: new Text('Back up stock list to the cloud')), - new Switch( - value: config.backup == BackupMode.enabled, - onChanged: _handleBackupChanged - ), - ]) - ), - ]) - ) + return new Block([ + new DrawerItem( + icon: 'action/thumb_up', + onPressed: () => _confirmOptimismChange(), + child: new Row([ + new Flexible(child: new Text('Everything is awesome')), + new Checkbox( + value: config.optimism == StockMode.optimistic, + onChanged: (bool value) => _confirmOptimismChange() + ), + ]) + ), + new DrawerItem( + icon: 'action/backup', + onPressed: () { _handleBackupChanged(!(config.backup == BackupMode.enabled)); }, + child: new Row([ + new Flexible(child: new Text('Back up stock list to the cloud')), + new Switch( + value: config.backup == BackupMode.enabled, + onChanged: _handleBackupChanged + ), + ]) + ), + ], + padding: const EdgeDims.symmetric(vertical: 20.0) ); } diff --git a/sky/packages/sky/lib/src/material/dropdown.dart b/sky/packages/sky/lib/src/material/dropdown.dart index 66a152d0dfb..b11b1071a5b 100644 --- a/sky/packages/sky/lib/src/material/dropdown.dart +++ b/sky/packages/sky/lib/src/material/dropdown.dart @@ -107,7 +107,7 @@ class _DropdownMenu extends StatusTransitionComponent { builder: (BuildContext context) { RenderBox renderBox = context.findRenderObject(); return new CustomPaint( - child: new ScrollableViewport(child: new Container(child: new Column(children))), + child: new Block(children), onPaint: (ui.Canvas canvas, Size size) { double top = renderBox.globalToLocal(new Point(0.0, menuTop.value)).y; double bottom = renderBox.globalToLocal(new Point(0.0, menuBottom.value)).y; diff --git a/sky/packages/sky/lib/src/material/popup_menu.dart b/sky/packages/sky/lib/src/material/popup_menu.dart index 6c8231364f2..5fc1cf9b8f1 100644 --- a/sky/packages/sky/lib/src/material/popup_menu.dart +++ b/sky/packages/sky/lib/src/material/popup_menu.dart @@ -76,14 +76,11 @@ class _PopupMenu extends StatelessComponent { ), child: new IntrinsicWidth( stepWidth: _kMenuWidthStep, - child: new ScrollableViewport( - child: new Container( - // TODO(abarth): Teach Block about padding. - padding: const EdgeDims.symmetric( - horizontal: _kMenuHorizontalPadding, - vertical: _kMenuVerticalPadding - ), - child: new BlockBody(children) + child: new Block( + children, + padding: const EdgeDims.symmetric( + horizontal: _kMenuHorizontalPadding, + vertical: _kMenuVerticalPadding ) ) ) diff --git a/sky/packages/sky/lib/src/widgets/scrollable.dart b/sky/packages/sky/lib/src/widgets/scrollable.dart index f22443eaa68..b5223e1780a 100644 --- a/sky/packages/sky/lib/src/widgets/scrollable.dart +++ b/sky/packages/sky/lib/src/widgets/scrollable.dart @@ -382,6 +382,7 @@ class ScrollableViewportState extends ScrollableState { class Block extends StatelessComponent { Block(this.children, { Key key, + this.padding, this.initialScrollOffset, this.scrollDirection: ScrollDirection.vertical, this.onScroll @@ -390,6 +391,7 @@ class Block extends StatelessComponent { } final List children; + final EdgeDims padding; final double initialScrollOffset; final ScrollDirection scrollDirection; final ScrollListener onScroll; @@ -401,11 +403,14 @@ class Block extends StatelessComponent { } Widget build(BuildContext context) { + Widget contents = new BlockBody(children, direction: _direction); + if (padding != null) + contents = new Padding(padding: padding, child: contents); return new ScrollableViewport( initialScrollOffset: initialScrollOffset, scrollDirection: scrollDirection, onScroll: onScroll, - child: new BlockBody(children, direction: _direction) + child: contents ); } }