Commit 6d7725b3 authored by Adam Barth's avatar Adam Barth

Update Button to be made of Material

To accomplish this, I made the following changes:

1) Material is now in charge of drawing the material shadows.
2) In order to mix in the style for the shadow, Element now takes a list of
   Styles instead of a single style.
3) Update all clients of Element#style to understand that we now have a list.
4) Update components that drawer shadows to have Material do that work instead.
   a) One exception: FloatingActionButton draws its own shadow because of its
      crazy clip requirements. We'll probably want to find a better way for
      FloatingActionButton to clip in the future.

I've also added a widgets-fn example to demo the fn material widgets.

This CL introduces a bug into Drawer whereby you can get ink splashes
everywhere in the drawer. In the future, we'll need to separate out the
different material aspects to get non-splashable materials.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1003553002
parent 6987f508
......@@ -74,11 +74,11 @@ class StockArrow extends Component {
return new Container(
inlineStyle: 'border-color: $border',
style: _style,
styles: [_style],
children: [
new Container(
inlineStyle: 'border-$type-color: $border',
style: up ? _upStyle : _downStyle
styles: [up ? _upStyle : _downStyle]
)
]
);
......
......@@ -47,23 +47,23 @@ class StockRow extends Component {
),
new Container(
key: 'Ticker',
style: _tickerStyle,
styles: [_tickerStyle],
children: [new Text(stock.symbol)]
),
new Container(
key: 'LastSale',
style: _lastSaleStyle,
styles: [_lastSaleStyle],
children: [new Text(lastSale)]
),
new Container(
key: 'Change',
style: _changeStyle,
styles: [_changeStyle],
children: [new Text(changeInPrice)]
)
];
return new Material(
style: _style,
styles: [_style],
children: children
);
}
......
......@@ -64,6 +64,7 @@ class StocksApp extends App {
Node build() {
var drawer = new Drawer(
animation: _drawerAnimation,
level: 3,
children: [
new DrawerHeader(
children: [new Text('Stocks')]
......@@ -103,19 +104,19 @@ class StocksApp extends App {
var toolbar = new Toolbar(
children: [
new Icon(key: 'menu', style: _iconStyle,
new Icon(key: 'menu', styles: [_iconStyle],
size: 24,
type: 'navigation/menu_white')
..events.listen('click', _drawerAnimation.toggle),
new Container(
style: _titleStyle,
styles: [_titleStyle],
children: [title]
),
new Icon(key: 'search', style: _iconStyle,
new Icon(key: 'search', styles: [_iconStyle],
size: 24,
type: 'action/search_white')
..events.listen('click', _handleSearchClick),
new Icon(key: 'more_white', style: _iconStyle,
new Icon(key: 'more_white', styles: [_iconStyle],
size: 24,
type: 'navigation/more_vert_white')
]
......@@ -124,14 +125,14 @@ class StocksApp extends App {
var list = new Stocklist(stocks: _sortedStocks, query: _searchQuery);
var fab = new FloatingActionButton(content: new Icon(
type: 'content/add_white', size: 24));
type: 'content/add_white', size: 24), level: 3);
return new Container(
key: 'StocksApp',
children: [
new Container(
key: 'Content',
style: _style,
styles: [_style],
children: [toolbar, list]
),
fab,
......
#!mojo mojo:sky_viewer
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<sky>
<import src="/sky/framework/debug/shake-to-reload.sky" />
<script>
import 'widgets_app.dart';
main() {
new WidgetsApp();
}
</script>
</sky>
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import '../../framework/fn.dart';
import '../../framework/components/button.dart';
class WidgetsApp extends App {
Node build() {
return new Button(content: new Text('Go'), level: 1);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment