Merge pull request #420 from PolymerElements/2.0-preview-master

2.0 preview master
PolymerElements · Mar 6, 2017 · 68c8646 · 68c8646
2 parents 40a24b7 + d768305
commit 68c8646
Show file tree

Hide file tree

Showing 18 changed files with 342 additions and 159 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -4,7 +4,7 @@ dist: trusty
 node_js: stable
 addons:
   sauce_connect: true
-  firefox: '46.0'
+  firefox: latest
   apt:
     sources:
       - google-chrome

diff --git a/README.md b/README.md
@@ -1,13 +1,97 @@
-# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout)
+# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=2.0-preview)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/app-layout)
 
+A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.
 
-[<img src="https://app-layout-assets.appspot.com/assets/docs/app-layout.png" width="300" height="210">](https://polymerelements.github.io/app-layout/)
+<!---
+```
+<custom-element-demo height="368">
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="app-drawer/app-drawer.html">
+    <link rel="import" href="app-header/app-header.html">
+    <link rel="import" href="app-toolbar/app-toolbar.html">
+    <link rel="import" href="demo/sample-content.html">
+    <link rel="import" href="../iron-icons/iron-icons.html">
+    <link rel="import" href="../paper-icon-button/paper-icon-button.html">
+    <link rel="import" href="../paper-progress/paper-progress.html">
+    <style is="custom-style">
+      html, body {
+        margin: 0;
+        font-family: 'Roboto', 'Noto', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background: #f1f1f1;
+        max-height: 368px;
+      }
+      app-toolbar {
+        background-color: #4285f4;
+        color: #fff;
+      }
+
+      paper-icon-button {
+        --paper-icon-button-ink-color: white;
+      }
+
+      paper-icon-button + [main-title] {
+        margin-left: 24px;
+      }
+      paper-progress {
+        display: block;
+        width: 100%;
+        --paper-progress-active-color: rgba(255, 255, 255, 0.5);
+        --paper-progress-container-color: transparent;
+      }
+      app-header {
+        @apply --layout-fixed-top;
+        color: #fff;
+        --app-header-background-rear-layer: {
+          background-color: #ef6c00;
+        };
+      }
+      app-drawer {
+        --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
+        --app-drawer-content-container: {
+          background-color: #B0BEC5;
+        }
+      }
+      sample-content {
+        padding-top: 64px;
+      }
+    </style>
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<app-header reveals>
+  <app-toolbar>
+    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
+    <div main-title>My app</div>
+    <paper-icon-button icon="delete"></paper-icon-button>
+    <paper-icon-button icon="search"></paper-icon-button>
+    <paper-icon-button icon="close"></paper-icon-button>
+    <paper-progress value="10" indeterminate bottom-item></paper-progress>
+  </app-toolbar>
+</app-header>
+<app-drawer id="drawer" swipe-open></app-drawer>
+<sample-content size="10"></sample-content>
+```
+
+## Install
+
+```bash
+$ bower install PolymerElements/app-layout --save
+```
+
+## Import
 
-https://polymerelements.github.io/app-layout/
+```html
+<link rel="import" href="/bower_components/app-layout/app-layout.html">
+```
 
-For additional documentation, please check out [Responsive app layout](https://www.polymer-project.org/1.0/toolbox/app-layout).
+## What is inside
 
-A set of layout elements for your app. It includes:
+### Elements
 
 - [app-box](/app-box) - A container element that can have scroll effects - visual effects based on scroll position.
 
@@ -25,14 +109,50 @@ A set of layout elements for your app. It includes:
 
 - [app-toolbar](/app-toolbar) - A horizontal toolbar containing items that can be used for label, navigation, search and actions.
 
-### Install
+### Templates
 
-```bash
-$ bower install PolymerElements/app-layout --save
-```
+The templates are a means to define, illustrate and share best practices in App Layout. Pick a template and customize it:
 
-### Import
+- **Getting started**
+([Demo](https://polymerelements.github.io/app-layout/templates/getting-started) - [Source](/templates/getting-started))
 
-```html
-<link rel="import" href="/bower_components/app-layout/app-layout.html">
-```
+- **Landing page**
+([Demo](https://polymerelements.github.io/app-layout/templates/landing-page) - [Source](/templates/landing-page))
+
+- **Publishing: Zuperkülblog**
+([Demo](https://polymerelements.github.io/app-layout/templates/publishing) - [Source](/templates/publishing))
+
+- **Shop: Shrine**
+([Demo](https://polymerelements.github.io/app-layout/templates/shrine) - [Source](/templates/shrine))
+
+- **Blog: Pesto**
+([Demo](https://polymerelements.github.io/app-layout/templates/pesto) - [Source](/templates/pesto))
+
+- **Scroll effects: Test drive**
+([Demo](https://polymerelements.github.io/app-layout/templates/test-drive) - [Source](/templates/test-drive))
+
+### Patterns
+
+Sample code for various UI patterns:
+
+- **Transform navigation:**
+As more screen space is available, side navigation can transform into tabs.
+([Demo](https://polymerelements.github.io/app-layout/patterns/transform-navigation/index.html) - [Source](/patterns/transform-navigation/x-app.html))
+
+- **Expand Card:**
+Content cards may expand to take up more horizontal space.
+([Demo](https://polymerelements.github.io/app-layout/patterns/expand-card/index.html) - [Source](/patterns/expand-card/index.html))
+
+## Users
+
+Here are some web apps built with App Layout:
+
+- [Google I/O 2016](https://events.google.com/io2016/)
+- [Polymer summit](https://www.polymer-project.org/summit)
+- [Pica](https://frankiefu.github.io/pica/)
+
+## Tools and References
+
+- [Responsive App Layout](https://www.polymer-project.org/1.0/toolbox/app-layout)
+- [Polymer App Toolbox](https://www.polymer-project.org/1.0/toolbox/)
+- [Material Design Adaptive UI Pattern](https://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-patterns)
diff --git a/app-drawer-layout/test/app-drawer-layout.html b/app-drawer-layout/test/app-drawer-layout.html
@@ -123,8 +123,8 @@
             assert.isTrue(notifyResizeSpy.called);
 
             done();
-          }, 100);
-        }, 100);
+          }, 150);
+        }, 150);
       });
 
       test('drawer-toggle', function(done) {
@@ -146,7 +146,7 @@
           Polymer.Base.fire('click', null /* detail */, { node: drawerLayout.querySelector('[drawer-toggle]') });
           assert.isTrue(drawer.opened);
           done();
-        }, 100);
+        }, 150);
 
       });
 

diff --git a/app-drawer/app-drawer.html b/app-drawer/app-drawer.html
@@ -236,6 +236,14 @@
         noFocusTrap: {
           type: Boolean,
           value: false
+        },
+
+        /**
+         * Disables swiping on the drawer.
+         */
+        disableSwipe: {
+          type: Boolean,
+          value: false
         }
       },
 
@@ -265,14 +273,6 @@
         Polymer.RenderStatus.afterNextRender(this, function() {
           this._styleTransitionDuration(this.transitionDuration);
           this._boundEscKeydownHandler = this._escKeydownHandler.bind(this);
-          this._resetDrawerState();
-
-          // contentContainer will transition on opened state changed, and scrim will
-          // transition on persistent state changed when opened - these are the
-          // transitions we are interested in.
-          this.$.scrim.addEventListener('transitionend', this._transitionend.bind(this));
-          this.$.contentContainer.addEventListener('transitionend', this._transitionend.bind(this));
-
           this.addEventListener('keydown', this._tabKeydownHandler.bind(this))
 
           // Only listen for horizontal track so you can vertically scroll inside the drawer.
@@ -343,7 +343,7 @@
       },
 
       _track: function(event) {
-        if (this.persistent) {
+        if (this.persistent || this.disableSwipe) {
           return;
         }
 
@@ -419,8 +419,9 @@
         }
 
         if (isInEndState) {
-          // Reset drawer state now since there will be no transitionend event.
-          this._resetDrawerState();
+          this.debounce('_resetDrawerState', this._resetDrawerState);
+        } else {
+          this.debounce('_resetDrawerState', this._resetDrawerState, this.transitionDuration);
         }
 
         this._styleTransitionDuration(this.transitionDuration);
@@ -492,20 +493,12 @@
 
         // Calculate the amount of time needed to finish the transition based on the
         // initial slope of the timing function.
-        this._styleTransitionDuration(this._FLING_INITIAL_SLOPE * dx / velocity);
+        var t = this._FLING_INITIAL_SLOPE * dx / velocity
+        this._styleTransitionDuration(t);
         this._styleTransitionTimingFunction(this._FLING_TIMING_FUNCTION);
 
         this._resetDrawerTranslate();
-      },
-
-      _transitionend: function() {
-        // If the drawer was flinging, we need to reset the style attributes.
-        if (this._drawerState === this._DRAWER_STATE.FLINGING) {
-          this._styleTransitionDuration(this.transitionDuration);
-          this._styleTransitionTimingFunction('');
-          this.style.visibility = '';
-        }
-        this._resetDrawerState();
+        this.debounce('_resetDrawerState', this._resetDrawerState, t);
       },
 
       _styleTransitionDuration: function(duration) {
@@ -540,6 +533,14 @@
 
       _resetDrawerState: function() {
         var oldState = this._drawerState;
+
+        // If the drawer was flinging, we need to reset the style attributes.
+        if (oldState === this._DRAWER_STATE.FLINGING) {
+          this._styleTransitionDuration(this.transitionDuration);
+          this._styleTransitionTimingFunction('');
+          this.style.visibility = '';
+        }
+
         if (this.opened) {
           this._drawerState = this.persistent ?
             this._DRAWER_STATE.OPENED_PERSISTENT : this._DRAWER_STATE.OPENED;
@@ -635,10 +636,9 @@
       },
 
       _openedPersistentChanged: function() {
-        if (this.transitionDuration === 0) {
-          // Reset drawer state now since there will be no transitionend event.
-          this._resetDrawerState();
-        }
+        // Use a debounce timer instead of transitionend since transitionend won't fire when
+        // app-drawer is display: none.
+        this.debounce('_resetDrawerState', this._resetDrawerState, this.transitionDuration);
       },
 
       _MIN_FLING_THRESHOLD: 0.2,