From e97a10ed74dd03532aafd58b13b96d7bbc7cda2e Mon Sep 17 00:00:00 2001 From: Hixie Date: Fri, 15 May 2015 15:16:25 -0700 Subject: [PATCH] [Layout] Put in some guards to prevent us from reintroducing 'display' properties into the CSS. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1132983007 --- examples/stocks/lib/stock_arrow.dart | 6 +++--- examples/stocks/lib/stock_row.dart | 17 ++++++++--------- framework/components/menu_item.dart | 16 ++++++++++------ framework/layout.dart | 22 ++++++++++++++-------- 4 files changed, 35 insertions(+), 26 deletions(-) diff --git a/examples/stocks/lib/stock_arrow.dart b/examples/stocks/lib/stock_arrow.dart index 78a4b66ee7d..5395984f25c 100644 --- a/examples/stocks/lib/stock_arrow.dart +++ b/examples/stocks/lib/stock_arrow.dart @@ -4,13 +4,12 @@ import 'dart:math'; import 'package:sky/framework/fn.dart'; +import 'package:sky/framework/layout.dart'; class StockArrow extends Component { static final Style _style = new Style(''' width: 40px; height: 40px; - display: flex; - flex-direction: row; align-items: center; justify-content: center; border-radius: 40px; @@ -79,8 +78,9 @@ class StockArrow extends Component { bool up = percentChange > 0; String type = up ? 'bottom' : 'top'; - return new Container( + return new FlexContainer( inlineStyle: 'border-color: $border', + direction: FlexDirection.Row, style: _style, children: [ new Container( diff --git a/examples/stocks/lib/stock_row.dart b/examples/stocks/lib/stock_row.dart index 1b4578aff00..a0ef8bcf297 100644 --- a/examples/stocks/lib/stock_row.dart +++ b/examples/stocks/lib/stock_row.dart @@ -4,14 +4,13 @@ import 'package:sky/framework/components/ink_well.dart'; import 'package:sky/framework/fn.dart'; +import 'package:sky/framework/layout.dart'; import 'package:sky/framework/theme/typography.dart' as typography; import 'stock_arrow.dart'; import 'stock_data.dart'; class StockRow extends Component { static final Style _style = new Style(''' - display: flex; - flex-direction: row; align-items: center; border-bottom: 1px solid #F4F4F4; padding-top: 16px; @@ -20,9 +19,7 @@ class StockRow extends Component { padding-bottom: 20px;''' ); - static final Style _tickerStyle = new Style(''' - flex: 1;''' - ); + static final FlexBoxParentData _tickerFlex = new FlexBoxParentData()..flex = 1; static final Style _lastSaleStyle = new Style(''' text-align: right; @@ -51,10 +48,12 @@ class StockRow extends Component { new StockArrow( percentChange: stock.percentChange ), - new Container( - key: 'Ticker', - style: _tickerStyle, - children: [new Text(stock.symbol)] + new ParentDataNode( + new Container( + key: 'Ticker', + children: [new Text(stock.symbol)] + ), + _tickerFlex ), new Container( key: 'LastSale', diff --git a/framework/components/menu_item.dart b/framework/components/menu_item.dart index 8d7cda7c7f9..eb46a07900b 100644 --- a/framework/components/menu_item.dart +++ b/framework/components/menu_item.dart @@ -27,10 +27,11 @@ class MenuItem extends ButtonBase { ); static final Style _labelStyle = new Style(''' - padding: 0px 16px; - flex: 1;''' + padding: 0px 16px;''' ); + static final FlexBoxParentData _labelFlex = new FlexBoxParentData()..flex = 1; + List children; String icon; GestureEventListener onGestureTap; @@ -49,10 +50,13 @@ class MenuItem extends ButtonBase { ), _iconStyle ), - new FlexContainer( - direction: FlexDirection.Row, - style: _labelStyle, - children: children + new ParentDataNode( + new FlexContainer( + direction: FlexDirection.Row, + style: _labelStyle, + children: children + ), + _labelFlex ) ] ), diff --git a/framework/layout.dart b/framework/layout.dart index 7eb4aae4ae1..f402b990263 100644 --- a/framework/layout.dart +++ b/framework/layout.dart @@ -20,21 +20,26 @@ class Style { var className = "$_className ${other._className}"; return _cache.putIfAbsent(className, () { - return new Style._internal(className); + return new Style._construct(className); }); } factory Style(String styles) { + assert(!styles.contains(new RegExp('\\b(display|flex|flex-direction)\\b'))); + return new Style._addToCache(styles); + } + + factory Style._addToCache(String styles) { return _cache.putIfAbsent(styles, () { var className = _getNextClassName(); sky.Element styleNode = sky.document.createElement('style'); styleNode.setChild(new sky.Text(".$className { $styles }")); sky.document.appendChild(styleNode); - return new Style._internal(className); + return new Style._construct(className); }); } - Style._internal(this._className); + Style._construct(this._className); } class Rect { @@ -269,6 +274,7 @@ abstract class RenderCSS extends RenderBox { String _additionalStylesFromParent = ''; // used internally to propagate parentData settings to the child void updateInlineStyle(String newStyle) { + assert(newStyle == null || !newStyle.contains(new RegExp('\\b(display|flex|flex-direction)\\b'))); _inlineStyles = newStyle != null ? newStyle : ''; _updateInlineStyleAttribute(); } @@ -362,9 +368,9 @@ class RenderCSSFlex extends RenderCSSContainer { child.parentData = new FlexBoxParentData(); } - static final Style _displayFlex = new Style('display:flex'); - static final Style _displayFlexRow = new Style('flex-direction:row'); - static final Style _displayFlexColumn = new Style('flex-direction:column'); + static final Style _displayFlex = new Style._addToCache('display:flex'); + static final Style _displayFlexRow = new Style._addToCache('flex-direction:row'); + static final Style _displayFlexColumn = new Style._addToCache('flex-direction:column'); String stylesToClasses(List