提交 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';
import 'package:sky/framework/components2/icon_button.dart';
// import 'package:sky/framework/components2/input.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/popup_menu.dart';
// import 'package:sky/framework/components2/radio.dart';
......@@ -118,45 +118,44 @@ class StocksApp extends App {
Drawer buildDrawer() {
return new Drawer(
controller: _drawerController,
level: 3
// ,
// children: [
// new DrawerHeader(children: [new Text('Stocks')]),
// new MenuItem(
// key: 'Stock list',
// icon: 'action/assessment',
// children: [new Text('Stock List')]),
// new MenuItem(
// key: 'Account Balance',
// icon: 'action/account_balance',
// children: [new Text('Account Balance')]),
// new MenuDivider(key: 'div1'),
// new MenuItem(
// key: 'Optimistic Menu Item',
// icon: 'action/thumb_up',
// onGestureTap: (event) => _handleStockModeChange(StockMode.Optimistic),
// children: [
// new ParentDataNode(new Text('Optimistic'), _flex1),
// new Radio(key: 'optimistic-radio', value: StockMode.Optimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
// ]),
// new MenuItem(
// key: 'Pessimistic Menu Item',
// icon: 'action/thumb_down',
// onGestureTap: (event) => _handleStockModeChange(StockMode.Pessimistic),
// children: [
// new ParentDataNode(new Text('Pessimistic'), _flex1),
// new Radio(key: 'pessimistic-radio', value: StockMode.Pessimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
// ]),
// new MenuDivider(key: 'div2'),
// new MenuItem(
// key: 'Settings',
// icon: 'action/settings',
// children: [new Text('Settings')]),
// new MenuItem(
// key: 'Help & Feedback',
// icon: 'action/help',
// children: [new Text('Help & Feedback')])
// ]
level: 3,
children: [
// new DrawerHeader(children: [new Text('Stocks')]),
new MenuItem(
key: 'Stock list',
icon: 'action/assessment',
children: [new Text('Stock List')]),
new MenuItem(
key: 'Account Balance',
icon: 'action/account_balance',
children: [new Text('Account Balance')]),
// new MenuDivider(key: 'div1'),
// new MenuItem(
// key: 'Optimistic Menu Item',
// icon: 'action/thumb_up',
// onGestureTap: (event) => _handleStockModeChange(StockMode.Optimistic),
// children: [
// new ParentDataNode(new Text('Optimistic'), _flex1),
// new Radio(key: 'optimistic-radio', value: StockMode.Optimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
// ]),
// new MenuItem(
// key: 'Pessimistic Menu Item',
// icon: 'action/thumb_down',
// onGestureTap: (event) => _handleStockModeChange(StockMode.Pessimistic),
// children: [
// new ParentDataNode(new Text('Pessimistic'), _flex1),
// new Radio(key: 'pessimistic-radio', value: StockMode.Pessimistic, groupValue: _stockMode, onChanged: _handleStockModeChange)
// ]),
// new MenuDivider(key: 'div2'),
new MenuItem(
key: 'Settings',
icon: 'action/settings',
children: [new Text('Settings')]),
new MenuItem(
key: 'Help & Feedback',
icon: 'action/help',
children: [new Text('Help & Feedback')])
]
);
}
......
......@@ -3,116 +3,119 @@
// found in the LICENSE file.
import '../fn2.dart';
import '../rendering/flex.dart';
import 'dart:collection';
import 'dart:sky' as sky;
import 'ink_splash.dart';
// import 'ink_splash.dart';
import 'scrollable.dart';
class InkWell extends Component implements ScrollClient {
static final Style _containmentStyleHack = new Style('''
align-items: center;
transform: translateX(0);''');
// static final Style _containmentStyleHack = new Style('''
// align-items: center;
// transform: translateX(0);''');
LinkedHashSet<SplashController> _splashes;
// LinkedHashSet<SplashController> _splashes;
String inlineStyle;
List<UINode> children;
InkWell({ Object key, this.inlineStyle, this.children })
: super(key: key) {
onDidUnmount(() {
_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
);
}
// InkWell({ Object key, this.inlineStyle, this.children })
// : super(key: key) {
// onDidUnmount(() {
// _cancelSplashes(null);
// });
// }
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) {
_abortSplashes();
return false;
}
InkWell({ Object key, this.children }) : super(key: key);
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(); });
});
UINode build() {
return new FlexContainer(direction: FlexDirection.Horizontal, children: children);
// 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 _splashDone(SplashController splash) {
if (_splashes == null)
return;
setState(() {
_splashes.remove(splash);
if (_splashes.length == 0)
_splashes = null;
});
}
// 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) {
// _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,34 +2,19 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:sky' as sky;
import '../fn2.dart';
import '../rendering/box.dart';
import '../rendering/flex.dart';
import 'button_base.dart';
import 'icon.dart';
import 'ink_well.dart';
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('''
padding: 0px 16px;'''
);
static final FlexBoxParentData _labelFlex = new FlexBoxParentData()..flex = 1;
static const BoxDecoration highlightDecoration = const BoxDecoration(
backgroundColor: const sky.Color.fromARGB(102, 153, 153, 153)
);
List<UINode> children;
String icon;
......@@ -39,27 +24,27 @@ class MenuItem extends ButtonBase {
UINode buildContent() {
return new EventListenerNode(
new StyleNode(
new InkWell(
new Container(
child: new InkWell(
children: [
new StyleNode(
new Icon(
size: 24,
type: "${icon}_grey600"
),
_iconStyle
new Padding(
child: new Icon(type: "${icon}_grey600", size: 24),
padding: const EdgeDims.symmetric(horizontal: 16.0)
),
new ParentDataNode(
new FlexContainer(
direction: FlexDirection.Row,
style: _labelStyle,
children: children
new FlexExpandingChild(
new Padding(
child: new FlexContainer(
direction: FlexDirection.Horizontal,
children: children
),
padding: const EdgeDims.symmetric(horizontal: 16.0)
),
_labelFlex
1
)
]
),
highlight ? _highlightStyle : _style
desiredSize: const sky.Size.fromHeight(48.0),
decoration: highlight ? highlightDecoration : null
),
onGestureTap: onGestureTap
);
......
......@@ -29,7 +29,7 @@ class ToolBar extends Component {
new FlexExpandingChild(
new Padding(
child: center,
padding: new EdgeDims.onlyLeft(24.0)
padding: new EdgeDims.only(left: 24.0)
))
];
......
......@@ -17,15 +17,13 @@ class EdgeDims {
const EdgeDims(this.top, this.right, this.bottom, this.left);
const EdgeDims.all(double value)
: top = value, right = value, bottom = value, left = value;
const EdgeDims.onlyLeft(double value)
: top = 0.0, right = 0.0, bottom = 0.0, left = value;
const EdgeDims.onlyRight(double value)
: top = 0.0, right = value, bottom = 0.0, left = 0.0;
const EdgeDims.onlyTop(double value)
: top = value, right = 0.0, bottom = 0.0, left = 0.0;
const EdgeDims.onlyBottom(double value)
: top = 0.0, right = 0.0, bottom = value, left = 0.0;
const EdgeDims.only({ this.top: 0.0,
this.right: 0.0,
this.bottom: 0.0,
this.left: 0.0 });
const EdgeDims.symmetric({ double vertical: 0.0,
double horizontal: 0.0 })
: top = vertical, left = horizontal, bottom = vertical, right = horizontal;
final double top;
final double right;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册