From f1ee932514d04c0a3f5a0e55f188dff198a17aa7 Mon Sep 17 00:00:00 2001 From: Ralph Thomas Date: Sat, 10 Jan 2015 12:28:58 -0800 Subject: [PATCH] constraints: clean up examples more; each will need some more explaining words. --- constraints/article.css | 12 +++++++----- constraints/examples/simple.css | 10 +++++++++- constraints/examples/simple.js | 7 ++++--- constraints/index.html | 30 ++++++++++++++++-------------- 4 files changed, 36 insertions(+), 23 deletions(-) diff --git a/constraints/article.css b/constraints/article.css index 4a8da97..21d2c04 100644 --- a/constraints/article.css +++ b/constraints/article.css @@ -4,10 +4,12 @@ body { font-size: 22px; } .content { - margin: 40px 10%; - margin-bottom: 0; + padding: 40px 10%; + padding-bottom: 0; } -div { +.constraints { + padding: 40px 10%; + background-color: #ededed; } .title { font-weight: bold; @@ -32,8 +34,8 @@ li { .example { box-sizing: border-box; width: 100%; - background-color: #404040; - color: white; + background-color: #ddd; + color: black; border: none; padding: 10px; overflow: hidden; diff --git a/constraints/examples/simple.css b/constraints/examples/simple.css index b27340d..eaee5a5 100644 --- a/constraints/examples/simple.css +++ b/constraints/examples/simple.css @@ -15,7 +15,15 @@ .gravity-example { position: relative; - height: 250px; + margin: auto; + width: 300px; + height: 350px; +} +.gravity-example>.box { +/* + border-radius: 100px; + background-color: red; + */ } .pager-example { diff --git a/constraints/examples/simple.js b/constraints/examples/simple.js index 6d29347..bd16e99 100644 --- a/constraints/examples/simple.js +++ b/constraints/examples/simple.js @@ -67,7 +67,8 @@ function makeScrollingExample(parentElement, bunching) { p.bottom = new c.Variable({ name: 'list-item-' + i + '-bottom' }); // Make items 300px wide. - p.right = 300; + p.x = 5; + p.right = 295; // If we're bunching and this is the first item then let it get bigger // and smaller... @@ -128,11 +129,11 @@ function makeGravityExample(parentElement) { var parentHeight = parentElement.offsetHeight; - var b = new Box('Drag Up'); + var b = new Box('Heavy Box'); b.y = new c.Variable({name: 'box-y'}); b.bottom = new c.Variable({name: 'box-bottom'}); b.x = 0; - b.right = 200; + b.right = 300; context.addBox(b); diff --git a/constraints/index.html b/constraints/index.html index b5a0124..e5b77f9 100644 --- a/constraints/index.html +++ b/constraints/index.html @@ -23,7 +23,7 @@ background-color: white; color: black; border-radius: 8px; - box-shadow: 0 1px 4px black; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); padding: 5px; font-size: 18px; font-family: sans-serif; @@ -59,8 +59,10 @@

Here are some more examples with links to the source. In all cases there's significantly less code and the code is cleaner using Slalom than the imperative alternative.

-Drag this list vertically
-

+Drag these lists vertically
+
+

+
Constraints:
The list items are 40px tall: @@ -73,13 +75,13 @@ The last list item's bottom can't be more than the parent height:
panel[last].bottom >= parentHeight spring
-

Second example is the "Panels" UI from the old Twitter for iPad. It doesn't feel like scrolling at all to use (the panels each half the width of the screen or more, and it implements snap points which I have yet to come up with a motion constraint for). Notice how the panels bounce relative to each other when animating back from the motion constraint.

-Drag the panels horizontally and release to impart velocity. -

+Drag the panels horizontally and release to impart velocity. +
+
Constraints:
The left edge of each panel can't go past the left edge of the panel that came before, plus 10px. @@ -90,23 +92,18 @@ The first panel's left edge is pinned to zero. This is motion constraint meaning that when violated it has a physical effect on the system. Here it applies a spring, but it could rebound or completely stop the motion.
panel[first].left = 0 spring
- - -
-

Android 5 notifications. Just like scrolling but with some extra constraints to do the bunching. I'll add resizing of notifications (like the GMail expandable one) and multitouch next. It falls out of the constraints.

-
-
-

Using gravity instead of friction...

+Throw the box upwards

Paging/snapping for photos.

+Drag the photos horizontally
@@ -114,7 +111,9 @@

Scaling. This is using a vertical drag to do scaling. With more flexible gesture processing we could use the horizontal part of the gesture to scroll horizontally, too.

+Drag the image upwards to grow it.
+
We manipulate the box's "y" variable for vertical drags.
Constraints:
@@ -137,11 +136,11 @@
  • There's slip! If you drag from the middle of the box, you'll see that the part of the image you grabbed slips out from under your finger. That's because the manipulator is just operating on the box's y coordinate. If we wanted to avoid slip then we'd have to create a new variable when the finger goes down, relate it to y (i.e.: fingery = box.y - 123 * scale, based on the current scale and finger start position) and then manipulate fingery instead of box.y. This isn't very hard, but the current Manipulator code doesn't support it.
    • -

    iOS Control Center and Notification panel example; interruptible.

    + Drag downwards from the top to show the notification drawer, drag upwards from the bottom to show the control center
    @@ -155,6 +154,7 @@

    iOS app switcher; icons move faster than the content but a single pair of motion constraints are all that's needed because of being able to discover the relationships between variables by inspecting the simplex tableau.

    + Drag horizontally on the "apps" or "icons"
    @@ -163,6 +163,7 @@

    Window 7-style overscroll.

    + Drag the image vertically to scroll
    @@ -175,6 +176,7 @@

    Google Maps transition to details view.

    +Drag upwards on the blue info bar to see more information