73 Commits

Author SHA1 Message Date
Hixie
e97a10ed74 [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
2015-05-15 15:16:25 -07:00
Hixie
9466cbbcb4 [Effen] remove the last traces of the 'display' property from the effen component library.
Previously, the fn "Text" class rendered as a single block of text.
Now, there's a "Paragraph" class that contains "TextFragment"s, and "Text" is just a component that places a single TextFragment into a single Paragraph.
This allows other components, notably the Input component, to build more complicated paragraphs of styled text, without using 'display'.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1139123007
2015-05-14 15:21:29 -07:00
Hixie
80318f6e81 [Effen] Remove 'display' from drawer_header.dart.
This moves DrawerHeader to using FlexContainer instead of Container and 'display', in the continuing quest to remove our dependency on CSS.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1139123005
2015-05-14 14:08:30 -07:00
Hixie
8b19459c9e [Effen] remove more CSS
This continues my attempt to remove our dependency on CSS.
It adds support for column-based flex to FlexContainer.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1132113007
2015-05-14 13:20:11 -07:00
Hixie
17aeeb1c51 [Effen] Make the stock app use the radio button widget so that it's being tested.
Changes:
- adds a couple of radio buttons to the drawer menu list.
- makes menu items support being tapped and reporting the tap.
- hooks up the checkbox to actually support being checked.
- changes the drawer menu items to make more sense in a stock app.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1137373004
2015-05-14 13:16:35 -07:00
Hixie
636d169c7f [Effen] remove some redundant styles
Some of the styles we have aren't really needed, so remove them to make it clearer what we weed to actually support to keep the stocks app running.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1128173007
2015-05-14 10:21:55 -07:00
Hixie
878336e8a2 [Effen] Make the drawer not be included in the build output when the drawer is not shown.
This is a prerequisite to dropping 'display:none'.
Included in this CL is making AnimatedValue able to animate more than one field.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1126333006
2015-05-14 09:44:22 -07:00
Hixie
396a04df4a [Effen] Use the checkbox widget in the stocks app.
- add a checkbox to the stock app, so that we're testing the checkbox widget
  (it's not currently wired up to anything, that can come later)
- make InkSplash use FlexContainer so that we can use flex in the popup menu items
- make effen's Text be more similar to Image and Container, so that it can be styled
- make layout.dart's RenderCSSText correctly support being styled
- also fixes a bug with the stock list where we were rendering one too few a row when scrolling
- check in the code to dump the DOM so I don't have to keep remembering how to do this

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1134163003
2015-05-12 14:39:43 -07:00
Hixie
02045e37a4 [Effen] Move 'flex' out of CSS also. (mark II)
This introduces a new kind of ContentNode similar to Style but which
instead of changing the styles that apply to the node, provides new
settings to apply to the "parentData" structure.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1122413006
2015-05-12 10:40:43 -07:00
Benjamin Lerman
42fc77f4b4 Revert "[Effen] Move 'flex' out of CSS also."
This reverts commit 1a4db2e964de8a2eba7c76c0904027150cc0c387.

This broke the bots.

TBR=github.com@spam.hixie.ch

Review URL: https://codereview.chromium.org/1137153002
2015-05-12 14:25:34 +02:00
Hixie
8873061dff [Effen] Move 'flex' out of CSS also.
This introduces a new kind of ContentNode similar to Style but which
instead of changing the styles that apply to the node, provides new
settings to apply to the "parentData" structure.

If you have better ideas for the class names here let me know.

Note that the layout.dart backend of this is hacky (more so than
before, even); once we have something other than the DOM and CSS to
back it, it'll get rewritten.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1129893006
2015-05-11 16:20:20 -07:00
Hixie
dd1d195482 [Effen] Convert action_bar.dart to using a FlexContainer.
FlexContainer is a (pretend) new layout primitive that implements Flex layout.
It's only pretend because right now it's still just backed by CSS.
This is a step along the way to removing all the CSS from fn.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1128743003
2015-05-11 15:06:23 -07:00
Hixie
e8ead8bbbe [Effen] Port fn.dart from the legacy sky.Node backend to the RenderNode backend, which is currently just a sky.Node-backed shim, but will eventually be the core Sky interface for layout and painting.
- the custom layout class in fn is removed by this patch; a new class
  will be added in a later CL

- the version of layout.dart in this CL is a subset of what we're
  targetting on the long run with
     https://codereview.chromium.org/1093633002

- a couple of lines of dead code are removed in this CL also

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1117143003
2015-05-08 13:06:47 -07:00
Eric Seidel
d04c87cbbc Rename view-configuration to view_configuration to make analyzer happy.
Analyzer was complaining about '-' not being an allowed character
in dart file names.

R=jamesr@chromium.org
2015-05-04 14:18:19 -07:00
Hixie
8c4d2556e6 [Effen] fix some dart warnings (mostly unused imports)
R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1104233003
2015-04-27 10:54:26 -07:00
Hixie
122a5220a1 [Effen] stop using custom layout for now, since it's in flux
TBR=hansmuller

Review URL: https://codereview.chromium.org/1102393002
2015-04-27 09:18:01 -07:00
Hixie
a2e1ec82f5 [Effen] Tapping on a menu while it's closing should not make it instantly disappear.
This tries to make the menu controller more careful about the state
transitions it goes through, in particular, not firing off animations
while we're already closing (since that used to trigger the "we're
done animating" callback which then closes the menu forcibly).

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1074883005
2015-04-23 13:20:39 -07:00
Hixie
830f8bf0f7 [Effen] Prevent scrolling past the bottom of a scrollable list.
- make the ScrollBehavior instance long-lived, rather than recreating
  it each time we update the list contents.
- have OverscrollBehavior track the total height of the contents and
  the height of the scrollable region, so that it can determine when
  to stop scrolling down.
- teach OverscrollBehavior about how to determine when to stop
  scrolling down, and how to bounce when it's too far down.
- replace the 'energy' concept in Particles with a method that sets
  the energy and direction at the same time, instead of assuming that
  the direction is always positive when setting energy.
- make FixedHeightScrollable lists track the number of items in the
  list and have them update their ScrollBehavior regarding this
  information as it changes.
- track how many items are currently showing in the list stock list.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1097373002
2015-04-21 13:20:30 -07:00
Hixie
0b125319e5 [Effen] Make the material splashes a bit lighter.
TBR=eseidel

Review URL: https://codereview.chromium.org/1065643003
2015-04-20 16:08:25 -07:00
Hixie
2f37fc0928 [Effen] Typo in splash code: s/sise/size/
TBR=eseidel

Review URL: https://codereview.chromium.org/1066513006
2015-04-20 15:55:11 -07:00
Hixie
1b76bf43d1 [Effen] Reduce splashes when scrolling.
Pipe the remaining time for an animation all the way out to the AnimatedValue.
Make splashes abortable, which causes them to continue to fade but no longer grow, by having them fade in 100ms or however long the animation was still going to go for, whichever is quickest.
Make Scrollables support objects registering with them to be told when scrolling happens.
Make UINode support subclasses being informed when _remove() was called.
Hook all that together to make splashes go away when scrolling by having them register with any ancestor Scrollables such that when those scroll, all the splashes get aborted. Unregister when removed.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1092423003
2015-04-20 15:51:24 -07:00
Hixie
f646c8ac58 Make the keyboard reappear when you tap on a text field after having dismissed the keyboard.
- the keyboard service now has a showByRequest() method that invokes Android's InputMethodManager's imm.showSoftInput with no flags set.
- the Input component calls through to the keyboard service's showByRequest() when it receives a pointer down.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1089163005
2015-04-20 11:45:33 -07:00
Hixie
0e24ccd944 [Effen] Custom layout. For now, FixedHeightScrollable uses a custom BlockLayout algorithm, mostly as a proof of concept.
R=ojan@chromium.org

Review URL: https://codereview.chromium.org/1064983002
2015-04-14 10:38:05 -07:00
Hans Muller
ef3df2f4fb Scrollable should use scrollTo() instead of setting _scrollOffset directly, when starting an animation.
I'd missed this case when adding Scrollable.scrollTo()
https://codereview.chromium.org/1074033002

R=ianh@google.com

Review URL: https://codereview.chromium.org/1082163002
2015-04-14 10:01:44 -07:00
Hans Muller
b215015056 Added Scrollable.scrollTo()
A subclass could override this method to limit scrolling or to initialize the scroll offset.

R=ianh@google.com

Review URL: https://codereview.chromium.org/1074033002
2015-04-09 17:02:49 -07:00
Eric Seidel
e8140cd33f Unbreak widgets_app.dart (by disabling PopupMenu for now)
Also fix button.dart to include ink_well.dart.

R=ojan@chromium.org

Review URL: https://codereview.chromium.org/1058013003
2015-04-07 11:17:26 -07:00
Ojan Vafai
88f38ce0e6 Remove all uses of display:block and display:inline-block.
-Make display:flex, flex-direction: column, flex-shrink: 1 the default.
-Simplify StyleAdjuster::adjustStyleForAlignment to remove special cases we
won't need as we make flex the default and remove absolute positioning.
-Fix a bug this exposed in column flexboxes where we'd apply the wrong edge
of border/padding/margin.
-For now leave the default of align-items:stretch. The main change here is
that iframe/img will do width:auto the same as blocks (i.e. the width of
the parent). I think this is a good change, but we'll have to see how it feels
in practice.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1061163002
2015-04-06 16:44:12 -07:00
Hixie
c0067cceba [Effen] s/Node/UINode/, s/Element/WrapperNode/, s/EventTarget/EventListenerNode/
R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1043283003
2015-04-01 09:46:28 -07:00
Adam Barth
707968b1db Menu in StocksApp should dismiss when tapping elsewhere
When the StocksApp menu is showing, the user shouldn't be able to interact with
the rest of the app. Instead, taps outside the menu should dismiss the menu.

This CL makes that happen by adding a ModalOverlay on top of the app. We might
want to do something fancier in the future using event delegation, but this
works for now.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1031093002
2015-03-25 10:43:35 -07:00
Adam Barth
171ff643ef Disentangle Material and InkSplash
Most of the elements that want to be Material (i.e., have a level and cast a
shadow) don't want to be InkWells (i.e., have an ink splash effect). This CL
disentangles these two components, fixing bugs in the Drawer and in the
PopupMenu. Separating these concepts also lets us use Material for the
ActionBar and the FloatingActionButton.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1037673002
2015-03-25 10:43:12 -07:00
Adam Barth
4f29d04e2e Add an implict animation between ActionBar backgrounds
This CL uses CSS transition to add an implicit animation between purple
ActionBar and the light grey "search" action bar. It's unclear to me how best
to create implicit animations in this system, but using a CSS transition works
surprisingly well.

Also, fix the typography style for the placeholder in the search box.
Previously it was white on Grey[50], which was extremely hard to see.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1036783002
2015-03-25 10:42:42 -07:00
Adam Barth
bfd2651acb Remove the |style| parameter from Material
There's no reason for Material to take a |style| parameter anymore. Clients can
simply use StyleNode instead.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1030963005
2015-03-25 10:42:19 -07:00
Adam Barth
c6fa902d79 Remove the |style| parameter to InkWell
There's no reason for InkWell to take a |style| parameter anymore. Clients can
simply use StyleNode instead.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1019443003
2015-03-25 10:41:38 -07:00
Adam Barth
f2ce04fb3d Menu in StocksApp should animate out
This CL teaches PopupMenu how to animate out as well as in. Also, I've changed
the PopupMenuItem animations to be driven from the PopupMenu itself, which
makes it easier to run the animation in reverse when closing the menu.

TBR=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1033913002
2015-03-25 10:40:29 -07:00
Adam Barth
040c83d59a Clean up stock_app.dart
This CL cleans up stock_app.dart to better separate concerns now that we have
StyleNode. Also, this CL introduces IconButton, which will grow to include an
ink effect in the future, and makes the background of the search bar white.

R=ojan@chromium.org

Review URL: https://codereview.chromium.org/1007893005
2015-03-24 18:00:33 -07:00
Adam Barth
f3df64fa3d Let Dart code running in Sky add events to the trace timeline
This will let us form a wholistic picture of work done in the framework and in
the engine.

R=ojan@chromium.org, rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1028243003
2015-03-23 14:48:06 -07:00
Adam Barth
9703e7f46f Load stocks data off the network
Instead of hard-coding the stock data in the Dart file, this CL moves the data
to a JSON file and loads that file over the network. This change improves load
time for the Stocks app from 3 seconds to 2 seconds.

Also, this CL removes shake-to-reload from the Stocks app because that also
slows down load time (due to the two module systems fighting each other).

R=rafaelw@chromium.org, ojan@chromium.org

Review URL: https://codereview.chromium.org/1021723005
2015-03-23 09:59:50 -07:00
Adam Barth
f8b3596df6 Use StyleNode in StockMenu
StockMenu was creating a container for the sole purpose of applying style to
PopupMenu. Now we just use a StyleNode.

Also, I've reverted the change to make box-sizing default to border-box. It
turns out that CL wasn't effective because we didn't use the initialBoxSizing
function to initialize box sizing. I've made us use initialBoxSizing but switch
the default back to content-box because actually using border-box breaks a
bunch of stuff.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1024083003
2015-03-20 10:16:24 -07:00
Adam Barth
9a5aea3737 Introduce Scaffold to Sky framework
This CL extracts a Scaffold component from StockApp. The Scaffold component
lets you create an "app-like" layout with an action bar, a drawer, etc.

R=ojan@chromium.org, rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1027813002
2015-03-20 09:34:06 -07:00
Rafael Weinstein
082ca7c2c0 [Effen] add StyleNode
This patch adds a new (non-Render) StyleNode which takes two arguments: A (content) node, which it wraps and a Style object.

This allows for styles to be applied to Nodes which are constructed elsewhere (e.g. passed in as arguments).

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1027653002
2015-03-16 12:27:25 -07:00
Rafael Weinstein
86dc24f938 [Effen] Add AnimatedComponent base class
This patch adds a base AnimatedComponent from which most components that animated should derive. It takes care of listening & unlistening from the animations during did(Un)mount as well as binding the animated value to a private field and scheduling the component for build.

Note that this patch removes the did(Un)mount overridable methods from Component and replaces them with a callback mechanism which is less brittle.

BUG=
R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1027633003
2015-03-16 03:18:17 -07:00
Adam Barth
97abc0dadd Improve Material ink effects
1) Factors InkWell out of Material so that components can use an ink well
   without needing the shadow/level machinery.

2) Makes the ink effect move at a different velocity once the tap has actually
   occurred, converging with the spec. We don't have the right speeds yet, but
   at least we're approaching the right shape.

3) To support (2), added a primaryPointer attribute to GestureEvents to let
   authors coorelate gesturetapdown events with later gesturetap events.

4) To support (2), modernized SplashAnimation to used AnimatedValue and friends.

5) Added more constants to view-configuration.dart that match Android.

I've also removed the cancelling of the ink effect on scroll. The proper way to
do that is to notice that someone in the event chain is listening for
scrollstart and delay the beginning of the ink effect for some period of time.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1019023003
2015-03-19 11:17:48 -07:00
Adam Barth
953145ba63 Default box-sizing to border-box
content-box is crazy banana-pants.

R=ojan@chromium.org

Review URL: https://codereview.chromium.org/1015253002
2015-03-19 10:55:03 -07:00
Rafael Weinstein
e8318f65a7 Change how events are handled in Effen
This patch removes the mutable API to event handling (Nodes no longer have a events object with which to add listeners).

Instead, a new (non-Render) Node is introduced: EventTarget. This node represents a location in the Effen tree which can handle events as they bubble.

Note that this also changes the implementation to use event delegation (one set of listeners at the sky.document level) rather than direct listeners on leaf nodes.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1019633004
2015-03-15 12:33:30 -07:00
Adam Barth
420098c97c Improve the openning animation for PopupMenu
We're now doing all of the elements of the popup menu entrance animation from
the material design spec, but our timing and curves might not be exactly right
yet. I haven't started on the exit animation.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1017193004
2015-03-18 15:21:48 -07:00
Adam Barth
10d63a0744 Begin work on the PopupMenu entrance animation
This CL also refactors how animations work, particularly for the Drawer. I've
renamed DrawerAnimation to DrawerController and switched it from being an
Animation to having an Animation. I've also renamed Animation to AnimatedValue
to capture the idea that the class actually presents the value being animated.
Finally, I've factored AnimatedValueListener out of Drawer so that it can be
used by PopupMenuItem as well.

Finally, I've added a scheduleBuild convienence function to Component instead
of having to call setState(() {}), which has come up a couple times.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1016093002
2015-03-18 11:31:07 -07:00
Adam Barth
4b6783ceee Add a menu to the stocks app
We should probably move this menu into a view for an individual stock, but for
now add it to the main stock screen.

R=ojan@chromium.org, eseidel@chromium.org

Review URL: https://codereview.chromium.org/1008003007
2015-03-17 19:21:36 -07:00
Adam Barth
4d6063101b Add a basic popup menu widget
Currently this widget is demoed in widgets-fn, but I'll move it into stocks-fn
soon.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1017873002
2015-03-17 14:18:13 -07:00
Adam Barth
28d09890e3 Cleanup events related to material splashes
This CL is a warmup for using a more sophisticated gesture disambiguation.

1) Use gesturetap instead of click. We should probably remove click events
   because folks should use gesturetap to integrate with the gesture system.

2) Handle the case where you swipe the drawer during an animation. Previously
   we had an assert which triggered in some multitouch scenarios. We'll
   eventually move this over to gestureswipe.

3) Remove an extra container for ink splashes. There's no need to group all the
   ink splashes in a container. They can all just be children of the Material
   component itself. This structure is left over from when Material was a base
   class.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1013713005
2015-03-16 20:53:55 -07:00
Adam Barth
a2904c14d3 Introduce sky/framework/theme/typography.dart
This CL adds typography information to the Sky theme. The values are from the
Material Design spec. I've also applied these values to the stocks app and the
various components.

We're not geting precisely the right typography in some cases because of
https://github.com/domokit/mojo/issues/65.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1006363004
2015-03-16 20:53:26 -07:00