提交 ab909941 编写于 作者: C Collin Jackson

Stub out InkWell and implement Sky’s fn2 menu item

R=abarth@chromium.org, ianh@google.com, abarth, hixie

Review URL: https://codereview.chromium.org/1165983002
上级 4491168f
...@@ -10,7 +10,7 @@ import 'package:sky/framework/components2/drawer.dart'; ...@@ -10,7 +10,7 @@ import 'package:sky/framework/components2/drawer.dart';
import 'package:sky/framework/components2/icon_button.dart'; import 'package:sky/framework/components2/icon_button.dart';
// import 'package:sky/framework/components2/input.dart'; // import 'package:sky/framework/components2/input.dart';
// import 'package:sky/framework/components2/menu_divider.dart'; // import 'package:sky/framework/components2/menu_divider.dart';
// import 'package:sky/framework/components2/menu_item.dart'; import 'package:sky/framework/components2/menu_item.dart';
// import 'package:sky/framework/components2/modal_overlay.dart'; // import 'package:sky/framework/components2/modal_overlay.dart';
// import 'package:sky/framework/components2/popup_menu.dart'; // import 'package:sky/framework/components2/popup_menu.dart';
// import 'package:sky/framework/components2/radio.dart'; // import 'package:sky/framework/components2/radio.dart';
...@@ -118,18 +118,17 @@ class StocksApp extends App { ...@@ -118,18 +118,17 @@ class StocksApp extends App {
Drawer buildDrawer() { Drawer buildDrawer() {
return new Drawer( return new Drawer(
controller: _drawerController, controller: _drawerController,
level: 3 level: 3,
// , children: [
// children: [
// new DrawerHeader(children: [new Text('Stocks')]), // new DrawerHeader(children: [new Text('Stocks')]),
// new MenuItem( new MenuItem(
// key: 'Stock list', key: 'Stock list',
// icon: 'action/assessment', icon: 'action/assessment',
// children: [new Text('Stock List')]), children: [new Text('Stock List')]),
// new MenuItem( new MenuItem(
// key: 'Account Balance', key: 'Account Balance',
// icon: 'action/account_balance', icon: 'action/account_balance',
// children: [new Text('Account Balance')]), children: [new Text('Account Balance')]),
// new MenuDivider(key: 'div1'), // new MenuDivider(key: 'div1'),
// new MenuItem( // new MenuItem(
// key: 'Optimistic Menu Item', // key: 'Optimistic Menu Item',
...@@ -148,15 +147,15 @@ class StocksApp extends App { ...@@ -148,15 +147,15 @@ class StocksApp extends App {
// new Radio(key: 'pessimistic-radio', value: StockMode.Pessimistic, groupValue: _stockMode, onChanged: _handleStockModeChange) // new Radio(key: 'pessimistic-radio', value: StockMode.Pessimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
// ]), // ]),
// new MenuDivider(key: 'div2'), // new MenuDivider(key: 'div2'),
// new MenuItem( new MenuItem(
// key: 'Settings', key: 'Settings',
// icon: 'action/settings', icon: 'action/settings',
// children: [new Text('Settings')]), children: [new Text('Settings')]),
// new MenuItem( new MenuItem(
// key: 'Help & Feedback', key: 'Help & Feedback',
// icon: 'action/help', icon: 'action/help',
// children: [new Text('Help & Feedback')]) children: [new Text('Help & Feedback')])
// ] ]
); );
} }
......
...@@ -3,116 +3,119 @@ ...@@ -3,116 +3,119 @@
// found in the LICENSE file. // found in the LICENSE file.
import '../fn2.dart'; import '../fn2.dart';
import '../rendering/flex.dart';
import 'dart:collection'; import 'dart:collection';
import 'dart:sky' as sky; import 'dart:sky' as sky;
import 'ink_splash.dart'; // import 'ink_splash.dart';
import 'scrollable.dart'; import 'scrollable.dart';
class InkWell extends Component implements ScrollClient { class InkWell extends Component implements ScrollClient {
static final Style _containmentStyleHack = new Style(''' // static final Style _containmentStyleHack = new Style('''
align-items: center; // align-items: center;
transform: translateX(0);'''); // transform: translateX(0);''');
LinkedHashSet<SplashController> _splashes; // LinkedHashSet<SplashController> _splashes;
String inlineStyle;
List<UINode> children; List<UINode> children;
InkWell({ Object key, this.inlineStyle, this.children }) // InkWell({ Object key, this.inlineStyle, this.children })
: super(key: key) { // : super(key: key) {
onDidUnmount(() { // onDidUnmount(() {
_cancelSplashes(null); // _cancelSplashes(null);
}); // });
} // }
UINode build() {
List<UINode> childrenIncludingSplashes = [];
if (_splashes != null) {
childrenIncludingSplashes.addAll(
_splashes.map((s) => new InkSplash(s.onStyleChanged)));
}
if (children != null)
childrenIncludingSplashes.addAll(children);
return new EventListenerNode(
new FlexContainer(
direction: FlexDirection.Row,
style: _containmentStyleHack,
inlineStyle: inlineStyle,
children: childrenIncludingSplashes),
onGestureTapDown: _startSplash,
onGestureTap: _confirmSplash
);
}
void _startSplash(sky.GestureEvent event) {
setState(() {
if (_splashes == null)
_splashes = new LinkedHashSet<SplashController>();
var splash;
var root = getRoot();
splash = new SplashController(root.rect, event.x, event.y,
pointer: event.primaryPointer,
onDone: () { _splashDone(splash); });
_splashes.add(splash);
UINode node = parent;
while (node != null) {
if (node is Scrollable)
node.registerScrollClient(this);
node = node.parent;
}
});
}
bool ancestorScrolled(Scrollable ancestor) { InkWell({ Object key, this.children }) : super(key: key);
_abortSplashes();
return false;
}
void handleRemoved() {
UINode node = parent;
while (node != null) {
if (node is Scrollable)
node.unregisterScrollClient(this);
node = node.parent;
}
super.handleRemoved();
}
void _confirmSplash(sky.GestureEvent event) {
if (_splashes == null)
return;
_splashes.where((splash) => splash.pointer == event.primaryPointer)
.forEach((splash) { splash.confirm(); });
}
void _abortSplashes() {
if (_splashes == null)
return;
setState(() {
_splashes.forEach((s) { s.abort(); });
});
}
void _cancelSplashes(sky.Event event) { UINode build() {
if (_splashes == null) return new FlexContainer(direction: FlexDirection.Horizontal, children: children);
return; // List<UINode> childrenIncludingSplashes = [];
setState(() {
var splashes = _splashes; // if (_splashes != null) {
_splashes = null; // childrenIncludingSplashes.addAll(
splashes.forEach((s) { s.cancel(); }); // _splashes.map((s) => new InkSplash(s.onStyleChanged)));
}); // }
// if (children != null)
// childrenIncludingSplashes.addAll(children);
// return new EventListenerNode(
// new FlexContainer(
// direction: FlexDirection.Row,
// style: _containmentStyleHack,
// inlineStyle: inlineStyle,
// children: childrenIncludingSplashes),
// onGestureTapDown: _startSplash,
// onGestureTap: _confirmSplash
// );
} }
void _splashDone(SplashController splash) { // void _startSplash(sky.GestureEvent event) {
if (_splashes == null) // setState(() {
return; // if (_splashes == null)
setState(() { // _splashes = new LinkedHashSet<SplashController>();
_splashes.remove(splash); // var splash;
if (_splashes.length == 0) // var root = getRoot();
_splashes = null; // splash = new SplashController(root.rect, event.x, event.y,
}); // pointer: event.primaryPointer,
} // onDone: () { _splashDone(splash); });
// _splashes.add(splash);
// UINode node = parent;
// while (node != null) {
// if (node is Scrollable)
// node.registerScrollClient(this);
// node = node.parent;
// }
// });
// }
// bool ancestorScrolled(Scrollable ancestor) {
// _abortSplashes();
// return false;
// }
// void handleRemoved() {
// UINode node = parent;
// while (node != null) {
// if (node is Scrollable)
// node.unregisterScrollClient(this);
// node = node.parent;
// }
// super.handleRemoved();
// }
// void _confirmSplash(sky.GestureEvent event) {
// if (_splashes == null)
// return;
// _splashes.where((splash) => splash.pointer == event.primaryPointer)
// .forEach((splash) { splash.confirm(); });
// }
// void _abortSplashes() {
// if (_splashes == null)
// return;
// setState(() {
// _splashes.forEach((s) { s.abort(); });
// });
// }
// void _cancelSplashes(sky.Event event) {
// if (_splashes == null)
// return;
// setState(() {
// var splashes = _splashes;
// _splashes = null;
// splashes.forEach((s) { s.cancel(); });
// });
// }
// void _splashDone(SplashController splash) {
// if (_splashes == null)
// return;
// setState(() {
// _splashes.remove(splash);
// if (_splashes.length == 0)
// _splashes = null;
// });
// }
} }
...@@ -2,35 +2,20 @@ ...@@ -2,35 +2,20 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'dart:sky' as sky;
import '../fn2.dart'; import '../fn2.dart';
import '../rendering/box.dart';
import '../rendering/flex.dart';
import 'button_base.dart'; import 'button_base.dart';
import 'icon.dart'; import 'icon.dart';
import 'ink_well.dart'; import 'ink_well.dart';
class MenuItem extends ButtonBase { class MenuItem extends ButtonBase {
static final Style _style = new Style('''
align-items: center;
height: 48px;
-webkit-user-select: none;'''
);
static final Style _highlightStyle = new Style('''
align-items: center;
height: 48px;
background: rgba(153, 153, 153, 0.4);
-webkit-user-select: none;'''
);
static final Style _iconStyle = new Style('''
padding: 0px 16px;'''
);
static final Style _labelStyle = new Style(''' static const BoxDecoration highlightDecoration = const BoxDecoration(
padding: 0px 16px;''' backgroundColor: const sky.Color.fromARGB(102, 153, 153, 153)
); );
static final FlexBoxParentData _labelFlex = new FlexBoxParentData()..flex = 1;
List<UINode> children; List<UINode> children;
String icon; String icon;
GestureEventListener onGestureTap; GestureEventListener onGestureTap;
...@@ -39,27 +24,27 @@ class MenuItem extends ButtonBase { ...@@ -39,27 +24,27 @@ class MenuItem extends ButtonBase {
UINode buildContent() { UINode buildContent() {
return new EventListenerNode( return new EventListenerNode(
new StyleNode( new Container(
new InkWell( child: new InkWell(
children: [ children: [
new StyleNode( new Padding(
new Icon( child: new Icon(type: "${icon}_grey600", size: 24),
size: 24, padding: const EdgeDims.symmetric(horizontal: 16.0)
type: "${icon}_grey600"
), ),
_iconStyle new FlexExpandingChild(
), new Padding(
new ParentDataNode( child: new FlexContainer(
new FlexContainer( direction: FlexDirection.Horizontal,
direction: FlexDirection.Row,
style: _labelStyle,
children: children children: children
), ),
_labelFlex padding: const EdgeDims.symmetric(horizontal: 16.0)
),
1
) )
] ]
), ),
highlight ? _highlightStyle : _style desiredSize: const sky.Size.fromHeight(48.0),
decoration: highlight ? highlightDecoration : null
), ),
onGestureTap: onGestureTap onGestureTap: onGestureTap
); );
......
...@@ -29,7 +29,7 @@ class ToolBar extends Component { ...@@ -29,7 +29,7 @@ class ToolBar extends Component {
new FlexExpandingChild( new FlexExpandingChild(
new Padding( new Padding(
child: center, child: center,
padding: new EdgeDims.onlyLeft(24.0) padding: new EdgeDims.only(left: 24.0)
)) ))
]; ];
......
...@@ -17,15 +17,13 @@ class EdgeDims { ...@@ -17,15 +17,13 @@ class EdgeDims {
const EdgeDims(this.top, this.right, this.bottom, this.left); const EdgeDims(this.top, this.right, this.bottom, this.left);
const EdgeDims.all(double value) const EdgeDims.all(double value)
: top = value, right = value, bottom = value, left = value; : top = value, right = value, bottom = value, left = value;
const EdgeDims.only({ this.top: 0.0,
const EdgeDims.onlyLeft(double value) this.right: 0.0,
: top = 0.0, right = 0.0, bottom = 0.0, left = value; this.bottom: 0.0,
const EdgeDims.onlyRight(double value) this.left: 0.0 });
: top = 0.0, right = value, bottom = 0.0, left = 0.0; const EdgeDims.symmetric({ double vertical: 0.0,
const EdgeDims.onlyTop(double value) double horizontal: 0.0 })
: top = value, right = 0.0, bottom = 0.0, left = 0.0; : top = vertical, left = horizontal, bottom = vertical, right = horizontal;
const EdgeDims.onlyBottom(double value)
: top = 0.0, right = 0.0, bottom = value, left = 0.0;
final double top; final double top;
final double right; final double right;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册