third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html - Issue 2633633002: Polymer: Remove unused app-layout element

Unified Diff: third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

Issue 2633633002: Polymer: Remove unused app-layout element (Closed)

Patch Set: Fix closure Created 3 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/app-layout/app-header-layout/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

diff --git a/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html b/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

deleted file mode 100644

index 62c4fc2a8f14117d3c3cd5485b77c5fc06ac0973..0000000000000000000000000000000000000000

--- a/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

+++ /dev/null

@@ -1,318 +0,0 @@

-<!--

-@license

-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

-Code distributed by Google as part of the polymer project is also

-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt

---><html><head><link rel="import" href="../../polymer/polymer.html">

-<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">

-<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">

-<link rel="import" href="../app-scroll-effects/app-scroll-effects-behavior.html">

-<!--

-app-header is container element for app-toolbars at the top of the screen that can have scroll

-effects. By default, an app-header moves away from the viewport when scrolling down and

-if using `reveals`, the header slides back when scrolling back up. For example:

-```html

-<app-header reveals>

- <app-toolbar>

- <div title>App name</div>

- </app-toolbar>

-</app-header>

-```

-app-header can also condense when scrolling down. To achieve this behavior, the header

-must have a larger height than the `primary` element in the light DOM. For example:

-```html

-<app-header style="height: 96px;" condenses fixed>

- <app-toolbar style="height: 64px;">

- <div title>App name</div>

- </app-toolbar>

-</app-header>

-```

-In this case the header is initially `96px` tall, and it shrinks to `64px` when scrolling down.

-That is what is meant by "condensing".

-### Primary element

-As the header condenses, the immediate children of app-header are stacked up.

-In this case, the primary element is the immediate child that would always stayed above

-the others as the header condenses. By default, the `primary` element is the first app-toolbar

-that is an immediate children of app-header.

-```html

-<app-header condenses>

- <app-toolbar> Primary element </app-toolbar>

-</app-header>

-```

-```html

-<app-header condenses>

- <app-toolbar></app-toolbar>

- <app-toolbar primary> Primary element </app-toolbar>

-</app-header>

-```

-The primary element must be a direct child of app-header.

-### Scroll target

-The app-header's `scrollTarget` property allows to customize the scrollable element to which

-the header responds when the user scrolls. By default, app-header uses the document as

-the scroll target, but you can customize this property by setting the id of the element, e.g.

-```html

-<div id="scrollingRegion" style="overflow-y: auto;">

- <app-header scroll-target="scrollingRegion">

- </app-header>

-</div>

-```

-In this case, the `scrollTarget` property points to the outer div element. Alternatively,

-you can set this property programmatically:

-```js

-appHeader.scrollTarget = document.querySelector("#scrollingRegion");

-```

-## Backgrounds

-app-header has two background layers that can be used for styling when the header is condensed

-or when the scrollable element is scrolled to the top.

-## Scroll effects

-Scroll effects are _optional_ visual effects applied in app-header based on scroll position. For example,

-The [Material Design scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)

-recommends effects that can be installed via the `effects` property. e.g.

-```html

-<app-header effects="waterfall">

- <app-toolbar>App name</app-toolbar>

-</app-header>

-```

-#### Importing the effects

-To use the scroll effects, you must explicitly import them in addition to `app-header`:

-```html

-<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">

-```

-#### List of effects

-* **blend-background**

-Fades in/out two background elements by applying CSS opacity based on scroll position.

-You can use this effect to smoothly change the background color or image of the header.

-For example, using the mixin `--app-header-background-rear-layer` lets you assign a different

-background when the header is condensed:

-```css

-app-header {

- background-color: red;

- --app-header-background-rear-layer: {

- /* The header is blue when condensed */

- background-color: blue;

- };

-```

-* **fade-background**

-Upon scrolling past a threshold, this effect will trigger an opacity transition to

-fade in/out the backgrounds. Compared to the `blend-background` effect,

-this effect doesn't interpolate the opacity based on scroll position.

-* **parallax-background**

-A simple parallax effect that vertically translates the backgrounds based on a fraction

-of the scroll position. For example:

-```css

-app-header {

- --app-header-background-front-layer: {

- background-image: url(...);

- };

-```

-```html

-<app-header style="height: 300px;" effects="parallax-background">

- <app-toolbar>App name</app-toolbar>

-</app-header>

-```

-The fraction determines how far the background moves relative to the scroll position.

-This value can be assigned via the `scalar` config value and it is typically a value

-between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.

-* **resize-title**

-Progressively interpolates the size of the title from the element with the `title` attribute

-to the element with the `condensed-title` attribute as the header condenses. For example:

-```html

-<app-header condenses reveals effects="resize-title">

- <app-toolbar>

- <h4 condensed-title>App name</h4>

- </app-toolbar>

- <app-toolbar>

- <h1 title>App name</h1>

- </app-toolbar>

-</app-header>

-```

-* **resize-snapped-title**

-Upon scrolling past a threshold, this effect fades in/out the titles using opacity transitions.

-Similarly to `resize-title`, the `title` and `condensed-title` elements must be placed in the

-light DOM.

-* **waterfall**

-Toggles the shadow property in app-header to create a sense of depth (as recommended in the

-MD spec) between the header and the underneath content. You can change the shadow by

-customizing the `--app-header-shadow` mixin. For example:

-```css

-app-header {

- --app-header-shadow: {

- box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);

- };

-```

-```html

-<app-header condenses reveals effects="waterfall">

- <app-toolbar>

- <h1 title>App name</h1>

- </app-toolbar>

-</app-header>

-```

-* **material**

-Installs the waterfall, resize-title, blend-background and parallax-background effects.

-### Content attributes

-Attribute | Description | Default

-----------|---------------------|----------------------------------------

-`primary` | Element that remains at the top when the header condenses. | The first app-toolbar in the light DOM.

-## Styling

-Mixin | Description | Default

-------|-------------|----------

-`--app-header-background-front-layer` | Applies to the front layer of the background. | {}

-`--app-header-background-rear-layer` | Applies to the rear layer of the background. | {}

-`--app-header-shadow` | Applies to the shadow. | {}

-@group App Elements

-@element app-header

-@demo app-header/demo/blend-background-1.html Blend Background Image

-@demo app-header/demo/blend-background-2.html Blend 2 Background Images

-@demo app-header/demo/blend-background-3.html Blend Background Colors

-@demo app-header/demo/contacts.html Contacts Demo

-@demo app-header/demo/give.html Resize Snapped Title Demo

-@demo app-header/demo/music.html Reveals Demo

-@demo app-header/demo/no-effects.html Condenses and Reveals Demo

-@demo app-header/demo/notes.html Fixed with Dynamic Shadow Demo

-@demo app-header/demo/custom-primary-element.html Custom Primary Element Demo

--->

-</head><body><dom-module id="app-header">

- <template>

- <style>

- :host {

- position: relative;

- display: block;

- transition-timing-function: linear;

- transition-property: -webkit-transform;

- transition-property: transform;

- }

- :host::after {

- position: absolute;

- right: 0px;

- bottom: -5px;

- left: 0px;

- width: 100%;

- height: 5px;

- content: "";

- transition: opacity 0.4s;

- pointer-events: none;

- opacity: 0;

- box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

- will-change: opacity;

- @apply(--app-header-shadow);

- }

- :host([shadow])::after {

- opacity: 1;

- }

- #contentContainer > ::content [condensed-title] {

- -webkit-transform-origin: left top;

- transform-origin: left top;

- white-space: nowrap;

- opacity: 0;

- }

- #contentContainer > ::content [title] {

- -webkit-transform-origin: left top;

- transform-origin: left top;

- white-space: nowrap;

- }

- #background {

- @apply(--layout-fit);

- overflow: hidden;

- }

- #backgroundFrontLayer,

- #backgroundRearLayer {

- @apply(--layout-fit);

- height: 100%;

- pointer-events: none;

- background-size: cover;

- }

- #backgroundFrontLayer {

- @apply(--app-header-background-front-layer);

- }

- #backgroundRearLayer {

- opacity: 0;

- @apply(--app-header-background-rear-layer);

- }

- #contentContainer {

- position: relative;

- width: 100%;

- height: 100%;

- }

- :host([disabled]),

- :host([disabled])::after,

- :host([disabled]) #backgroundFrontLayer,

- :host([disabled]) #backgroundRearLayer,

- :host([disabled]) ::content > app-toolbar:first-of-type,

- :host([disabled]) ::content > [primary],

- /* Silent scrolling should not run CSS transitions */

- :host-context(.app-layout-silent-scroll),

- :host-context(.app-layout-silent-scroll)::after,

- :host-context(.app-layout-silent-scroll) #backgroundFrontLayer,

- :host-context(.app-layout-silent-scroll) #backgroundRearLayer,

- :host-context(.app-layout-silent-scroll) ::content > app-toolbar:first-of-type,

- :host-context(.app-layout-silent-scroll) ::content > [primary] {

- transition: none !important;

- }

- </style>

- <div id="contentContainer">

- <content id="content"></content>

- </div>

- </template>

- </dom-module>

-<script src="app-header-extracted.js"></script></body></html>