DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Layout] Put in some guards to prevent us from reintroducing 'display' properties into the CSS.

Browse Source 
R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1132983007
This commit is contained in:
Hixie 2015-05-15 15:16:25 -07:00
parent 9466cbbcb4
commit e97a10ed74
4 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/stocks/lib/stock_arrow.dart
View File

@ -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(

17
examples/stocks/lib/stock_row.dart
View File

@ -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',

16
framework/components/menu_item.dart
View File

@ -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<UINode> 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
)
]
),

22
framework/layout.dart
View File

@ -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<Style> styles) {
var settings = _displayFlex._className;
@ -396,7 +402,7 @@ class RenderCSSParagraph extends RenderCSSContainer {
RenderCSSParagraph(debug) : super(debug);
static final Style _displayParagraph = new Style('display:paragraph');
static final Style _displayParagraph = new Style._addToCache('display:paragraph');
String stylesToClasses(List<Style> styles) {
return super.stylesToClasses(styles) + ' ' + _displayParagraph._className;
@ -410,7 +416,7 @@ class RenderCSSInline extends RenderCSS {
data = newData;
}
static final Style _displayInline = new Style('display:inline');
static final Style _displayInline = new Style._addToCache('display:inline');
String stylesToClasses(List<Style> styles) {
return super.stylesToClasses(styles) + ' ' + _displayInline._className;