polymerelements / app-layout Goto Github PK

On mobile it would be great to have a close event so that e.g. a site change can be made only after the drawer was closed in order to avoid lag.

I think the intention here was to use the word threshold? https://github.com/PolymerLabs/app-layout/blob/master/x-header/x-header.html#L81-L89

https://github.com/PolymerLabs/app-layout/blob/master/helpers/helpers.html#L47

Repro:

Navigate to http://polymerlabs.github.io/app-layout/templates/pesto/
Hit the back button
Note that the back button history is spammed with the url.

Hi,
When using an app-drawer inside an app-drawer-layout and we resize the page to make app-drawer disappear, the app-header is not resizing well.
Step to reproduce:

1. Go in demo5.html in IE (I used IE 11 for my test)
2. Click on explorer box to reduce windows size (The bug only appear in a one shot resize, not when resizing windows by the corner). The internet explorer window should be at a point that make the drawer disappear after clicking the resize button.
3. We can see that the app-header doesn’t fill the remaining space of the drawer.

Screen shot:

Note: I do not only see this bug in app-header. In my app, I have an element that use iron-resize to take the width of the app-header-layout inside the app-drawer-layout and I got the same problem. It seems that the iron-resize event is trigger before the app-drawer have disappear.

When you go back from shrine-detail to shrine-list selection bar will disappear.

What is carbon-router element? I cant find it anywhere

I tried with the help of an app-header-layout, an app-header and a couple of app-toolbars to do the following but I couldn't get it to work, should the following be possible?

• top fixed height toolbar
• bottom toolbar that starts off a certain size and then condenses to a smaller size on scroll

I could get the two toolbars, and the condense to smaller size but the top toolbar always scrolled off screen which is the one I wanted to stay put.

Thanks in advance

I've previously talked to @justinfagnani about what we can do to make the publishing template more reusable out of the box 🏃.

Could we look at making the data for the below less coupled to the current implementation?

• Inline categories: https://github.com/PolymerLabs/app-layout/blob/master/templates/publishing/src/blog-app.html#L252
• Inline reference to film categories: https://github.com/PolymerLabs/app-layout/blob/master/templates/publishing/src/blog-app.html#L245 and https://github.com/PolymerLabs/app-layout/blob/master/templates/publishing/src/blog-app.html#L231
• Use of static category reference: https://github.com/PolymerLabs/app-layout/blob/master/templates/publishing/src/blog-app.html#L225
• nav-menu includes an inline list of menu items that could be pulled from some external data source instead https://github.com/PolymerLabs/app-layout/blob/master/templates/publishing/src/blog-app.html#L183

We already use an external JSON file for articles so maybe something similar for the rest of the app?

cc @robdodson who did https://github.com/PolymerLabs/zuperkulblog-progressive in case he has other thoughts here.

On Chrome desktop (and possibly other browsers), in layouts featuring app-header, if the scrollbar is added or removed, the width of the header doesn't update to reflect this.

To reproduce (although a bit tedious), go to Pesto, and with developer tools, delete cards until the scrollbar disappears.

White-space will remain where the scrollbar previously was.

Resizing the browser window fixes this, as does document.querySelector('app-header').resetLayout();, for example.

Is this a bug, or should I be calling resetLayout() after making changes to my page that could affect the scrollbar?

Right now app-layout's bower.json relies on iron-list#custom-scroller, which has not been merged to master (PolymerElements/iron-list#85). We should remove this specific dependency.

Issue opened in PolymerElements/paper-drawer-panel#120

From spec

Mini variant

In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer.

[…]

The mini variant is also an acceptable closed state for a temporary navigation drawer.

Would be a usefull feature, it's a challenge to have a fluid and logic transition. Any suggestions ?

app-header-layout

1. reset layout (fixes timing issue) - p0 - fixed by #84

resetLayout: function() {
  // this is cheap
  this._updateScroller();
  this.debounce('_resetLayout', function() {
    this._updateContentPosition();
    this._updateFixedNodesPosition();
});

1. Mixin for the content - p0 - fixed by #84

#contentContainer {
  position: relative;
  overflow-y: hidden;
  @apply(--app-header-layout-content);
}

app-header

1. snaps property. Let's allow a way to transition from state A to B without interpolating the values based on the scroll position. This is good for performance, and cleaner UX. - p0 - PR: #99
2. compute the header transform Y position from the progress. This would make the implementation more cohesive - p1

  this._runEffects(progress, mayHeaderMove ? this._deltaHeight * progress : 0);
  this._transformHeader(mayHeaderMove ? this._deltaHeight * progress : 0);

1. migrate to IronScrollTargetBehavior - p1
2. a way to scroll without scroll transitions. aka :host-context(disabled-transition) p0
   Proposed API: Polymer.AppLayout.scrollTo(scrollLeft: Number, scrollTop: Number, target: Element?) -> void PR: #90

Port the fix from paper-drawer-panel

make the view port narrow, open the menu, widen the view port, you now have menu + tabs until you close the menu.

In my layout, using app-header-layout, paddingTop is set in _updateContentPosition and it leaves a 65px gap at the top of my content, between the header and my content. If I comment out this line in then everything works as expected and my content fits exactly underneath the header: https://github.com/PolymerLabs/app-layout/blob/master/app-header-layout/app-header-layout.html#L175

I've created a temporary fork to continue work on my app, but can you give me a hint how I can get around this issue without commenting out this line of code?

To reproduce:

• open app-layout/demo/demo2.html on mobile, e.g iPhone
• try to touch scroll on the drawer

Observed:
the main content behind the scrim scroll.

Expected:
the main content behind the scrim should not scroll.

We used to have code in DocumentScrollBehavior to help decide shouldEnableDocScroll. The code is problematic and we commented that out. We need to find another solution to solve this.

• Run the jsbin: http://jsbin.com/mumagoquni/edit?html,output
• Resize the window so is in narrow mode.
• Click the left-arrow button to open the inner drawer.
• Then click the menu button to open the outer drawer.
• Now click on the input to focus it.
• You will see Maximum call stack size exceeded error in the console

Let's make the tests green again

We have quite a few effects (e.g. blend-background, parallax-background, resize-title...). But currently it is not clear to the users what do they need to setup in order to use them. For example, for the effect parallax-background, we expect the user to use the mixin --app-header-background-front-layer to set the background image. And for resize-title, the users need to put the attribute title on the node that represents the condensed title and resize-title attribute for "large" title.

We also need documentation on how to create custom effect.

Using CSS custom properties and media queries to build a responsive grid container component.

Hi,

I want to put my app-header in a polymer elements to use it across my application. However there are some functionality that doesn't work when doing that. For example, if i put the fixed attribute on the app-header, the header doesn't stay fixed in the page.

e.g. app-scrollpos-control and app-toolbar demos are missing one level of ../

iron-scroll-target-behavior has now been released:
https://github.com/PolymerElements/iron-scroll-target-behavior

Probably because of how the scroll works on these devices, <app-header reveals> seems weird. It doesn't reveals while scrolling, but only when scroll stops, causing the toolbar's position to flash.

Is this a known issue? Is there any solution?

• Allow for position other than fixed
• Animate width (maybe?) - to allow parent node to collapse around it.

What this allows for is 2 fold.

1. app-drawer can now be dropped into an existing nav container and expand/collapse that container
2. becomes a drop in replacement for non floating/blocking menus.

Adding this line of css:
app-drawer #contentContainer{ will-change: transform; } greatly improves the transition animation of the app drawer. Especially on older mobile devices there is notable difference.

Currently dragging and releasing the drawer will use a fixed transition each time, making the experience feel somewhat unresponsive and not as good as the native drawers. We should calculate the velocity based on the drag events and apply that for closing animation.

when using browser's native print, position: fixed header inside app-header-layout shows up.. in its current position w/ regard to document scroll pos.

eg:

  content
  content
--------------
Hai toolbar
--------------
  content

This rule added app-header-layout may be a good start..

  @media print {
    :host > ::content > app-header,
    :host > ::content > [underlay-content] {
      position: absolute;
    }
  }

try app-header/demo/demo1.html?dom=shadow and you can see the title is not transformed correctly when you scroll

Animations to support:

• https://www.google.com/design/spec/what-is-material/environment.html
• https://design.google.com/
• https://developers.google.com/web/showcase/?hl=en
• https://elements.polymer-project.org/elements/paper-scroll-header-panel?view=demo:demo/index.html&active=paper-scroll-header-panel
• PolymerElements/paper-scroll-header-panel#47
• https://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling
• PolymerElements/paper-scroll-header-panel#25

When we open the drawer, the scroll bar disappear on the site’s content leading to app-header not resizing and unexpected issue on layout. For example, I have a layout with one item per row but when I open the app-drawer it displays on two rows because the scroll-bar disappear. You can see this problem in the demo2.html file when you are on a mobile size. Here is images of the bug in my app:

When the app drawer is close:

When I open the drawer:

You can see that the app-header have not resized and that the content is now display two card per rows.

Since Polymer no longer supports inheritance, may I humbly suggest leveraging Behaviors much more!

Please see: PolymerElements/paper-scroll-header-panel#50 (comment)

I felt completely trapped when I tried to compose my main layout from smaller blocks since they were all seemingly hardcoded to use specific elements, parent/child relationships and selectors.

Along the same lines, I'd also suggest using shared styles much more for the same reasons, to empower the developer to combine and compose as needed!

It would be nice to have an app-footer component for footers and menus, etc...similar to app header but for the bottom of the screen...putting too much control in the header violates the thumbzone on mobile...

How about add this as hostAttribute in app-toolbar by default?

Polylint failed for app-header

Property isAttached not found in 'properties' for element 'app-header'

isAttached is used by resetLayout() but undeclared

When trying to modify the Pesto app, to use neon-animated-pages instead of iron-pages to do animated transitions between pages, i found 2 bugs:

1. app-header does not resize correctly when stretching window, opening/closing drawer
2. The navigate back button dissapears when going into detail view

Hi, in pattern > transform navigation, there is a function "onLayoutChange" that accepts parameter "wide", and then checks if it is true. Where did this parameter come from and where is it defined ?
onLayoutChange: function(wide) { if (wide && drawer.opened) { ... } }
I'm trying to understand how it works, thanks.

• If you’re on the homepage scrolled down such that the header is in a shrinked state, and then tap on a recipe to navigate to the recipe page, the header on the recipe page starts out green and then quickly fades to transparent. This feels like a jank.
• If you’re on the homepage scrolled down such that the header is in a shrinked state, and then navigate to a recipe page, and then navigate back using the top-left back arrow, it appears that on that navigation back to the homepage the header is initially in its expanded state, before it quickly snaps back to its shrinked state. This feels like a jank.

We can now use Polymer.AppLayout.scroll({top: top, behavior: 'silent'}) to scroll to a position without running scroll effects. I think Pesto is using app-scrollpos-control so we can just fix it there.

From PolymerElements/paper-drawer-panel#101

When using the paper-drawer-panel in a top level body tag with dir="rtl", the drawer panel appears on the same side as when dir="ltr". We'd expect the panel to switch sides.

is there a way to style the app-scrim inside the app-drawer-layout with a custom property? Because the z-index is quite low, I have other elements on my page which are appearing above it now.

It would be nice to be able to have two drawers (left and right).

When I upgraded to master - paper-dialog shows up behind the overlay backdrop and is not accessible. Downgrading to 0.0.14 fixed the problem. Wanted to let you know, unfortunately I don't have the time to debug. Loving app-layout btw :)

When using app-header-layout, if any element in the main content area (#contentContainer) has a tabindex, it will receive focus before anything inside the app-header.

You can see this occur via app-layout/templates/shrine/index.html

Here is some example code (slightly modified app-layout/demo/demo2.html) --

    <app-header-layout>

      <app-header fixed effects="waterfall">
        <app-toolbar>
          <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
          <div spacer title>My Drive</div>
          <button id="one">Focus me first?</button>
        </app-toolbar>
      </app-header>

      <div content>
        <sample-content size="100"></sample-content>
        <button id="two">Wrong focus order</button>
      </div>

    </app-header-layout>

I've only been able to workaround this by moving #contentContainer such that is the last element in app-header-layout and assigning explicit z-indexing in the css rules to ensure contentContainer always scrolls below the header.

edit explicit z-indexing screws up some things throughout the app. one example is paper-checkbox's ink focus behavior showing up behind the content

I find this to be much faster than the standard layout on browsers other than Chrome (where Chrome seems to perform just as well on both), however I miss being able to swipe in the side drawer.

Is this a feature that's likely to be implemented? I notice on the Polymer docs site that you can swipe to close the drawer, but not open.

Is this a feature that you're likely to implement?

Thanks!

e.g. https://github.com/PolymerLabs/app-layout/blob/master/app-box/app-box.html#L63

<dom-module id="app-box">
  <template>
    <style>
    ...
    </style>
    ...
  </template>
  ...
</dom-module>

From: PolymerElements/paper-drawer-panel#121

From the spec, the drawer can be

• permanent

  Recommended default for desktop

• persistent #103

  Persistent navigation drawers are acceptable for all sizes larger than mobile.

• temporary

  Recommended for:
  Tablet
  Required for:
  Mobile

So I propose some changes on attributes :

• replace "responsiveWidth" by "tabletWidth" and "mobileWidth"
• replace "narrow" by "mobile", "tablet" and "desktop"
• remove "forceNarrow"
• add "tabletMode" and "desktopMode" ( = "permanent" | "persistent" | "temporary")

Getting errors in console, and the drawer doesn't appear at all, neither does the related hamburger button:
Uncaught TypeError: Cannot set property 'opened' of undefined
(anonymous function) @ app-drawer-layout.html:188
Debouncer.complete @ polymer-mini.html:2097
boundComplete @ polymer-mini.html:2076
Polymer.Async._atEndOfMicrotask @ polymer-mini.html:2053
window.MutationObserver.observe.characterData @ polymer-mini.html:2068

The anonymous function points to:
resetLayout: function() {
....
-> this.drawer.opened = !this.narrow;
....