third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Unified Diff: third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 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

Download patch

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-header-panel/index.html ('k') | third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

diff --git a/third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html b/third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

new file mode 100644

index 0000000000000000000000000000000000000000..9a6ec359a206c73b179c7f0bbb0ec9564845ee80

--- /dev/null

+++ b/third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

@@ -0,0 +1,244 @@

+<!--

+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">

+<!--

+`paper-header-panel` contains a header section and a content panel section.

+__Important:__ The `paper-header-panel` will not display if its parent does not have a height.

+Using layout classes, you can make the `paper-header-panel` fill the screen

+ <body class="fullbleed layout vertical">

+ <paper-header-panel class="flex">

+ <paper-toolbar>

+ <div>Hello World!</div>

+ </paper-toolbar>

+ </paper-header-panel>

+ </body>

+Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the

+header section.

+Example:

+ <paper-header-panel>

+ <paper-toolbar>Header</paper-toolbar>

+ <div>Content goes here...</div>

+ </paper-header-panel>

+If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that

+element.

+Example:

+ <paper-header-panel>

+ <div class="paper-header">Header</div>

+ <div>Content goes here...</div>

+ </paper-header-panel>

+To have the content fit to the main area, use the `fit` class.

+ <paper-header-panel>

+ <div class="paper-header">standard</div>

+ <div class="fit">content fits 100% below the header</div>

+ </paper-header-panel>

+Modes

+Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and

+`cover`. Default is `standard`.

+Mode | Description

+----------------|-------------

+`standard` | The header is a step above the panel. The header will consume the panel at the point of entry, preventing it from passing through to the opposite side.

+`seamed` | The header is presented as seamed with the panel.

+`waterfall` | Similar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step.

+`waterfall-tall` | The header is initially taller (`tall` class is added to the header). As the user scrolls, the header separates (forming an edge) while condensing (`tall` class is removed from the header).

+`scroll` | The header keeps its seam with the panel, and is pushed off screen.

+`cover` | The panel covers the whole `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially covering the header.

+Example:

+ <paper-header-panel mode="waterfall">

+ <div class="paper-header">standard</div>

+ <div class="content fit">content fits 100% below the header</div>

+ </paper-header-panel>

+Styling header panel:

+To change the shadow that shows up underneath the header:

+ paper-header-panel {

+ --paper-header-panel-shadow: {

+ height: 6px;

+ bottom: -6px;

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

+ };

+ }

+To change the panel container in different modes:

+ paper-slider {

+ --paper-header-panel-standard-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-cover-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-waterfall-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-waterfall-tall-container: {

+ border: 1px solid gray;

+ };

+ }

+@group Paper Elements

+@element paper-header-panel

+@demo demo/index.html

+@hero hero.svg

+-->

+</head><body><dom-module id="paper-header-panel">

+ <style>

+ :host {

+ @apply(--layout);

+ @apply(--layout-vertical);

+ display: block;

+ position: relative;

+ height: 100%;

+ /* Create a stack context, we will need it for the shadow*/

+ z-index: 0;

+ }

+ #mainContainer {

+ @apply(--layout-flex);

+ position: relative;

+ overflow-y: auto;

+ overflow-x: hidden;

+ -webkit-overflow-scrolling: touch;

+ flex-basis: 0.0001px;

+ }

+ /*

+ * mode: scroll

+ */

+ :host([mode=scroll]) #mainContainer {

+ @apply(--paper-header-panel-scroll-container);

+ overflow: visible;

+ }

+ :host([mode=scroll]) {

+ overflow-y: auto;

+ overflow-x: hidden;

+ -webkit-overflow-scrolling: touch;

+ }

+ /*

+ * mode: cover

+ */

+ :host([mode=cover]) #mainContainer {

+ @apply(--paper-header-panel-cover-container);

+ position: absolute;

+ top: 0;

+ right: 0;

+ bottom: 0;

+ left: 0;

+ }

+ /*

+ * mode: standard

+ */

+ :host([mode=standard]) #mainContainer {

+ @apply(--paper-header-panel-standard-container);

+ }

+ /*

+ * mode: waterfall

+ */

+ :host([mode=waterfall]) #mainContainer {

+ @apply(--paper-header-panel-waterfall-container);

+ }

+ /*

+ * mode: waterfall-tall

+ */

+ :host([mode=waterfall-tall]) #mainContainer {

+ @apply(--paper-header-panel-waterfall-tall-container);

+ }

+ :host ::content paper-toolbar,

+ :host ::content .paper-header {

+ position: relative;

+ overflow: visible !important;

+ }

+ :host ::content paper-toolbar:after,

+ :host ::content .paper-header:after {

+ @apply(--paper-header-panel-shadow);

+ -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;

+ transition: opacity 0.5s, transform 0.5s;

+ opacity: 0;

+ content: "";

+ width: 100%;

+ position: absolute;

+ left: 0px;

+ right: 0px;

+ z-index: 1;

+ -webkit-transform: scale3d(1, 0, 1);

+ -webkit-transform-origin: 0% 0%;

+ transform: scale3d(1, 0, 1);

+ transform-origin: 0% 0%;

+ }

+ :host ::content paper-toolbar.has-shadow:after,

+ :host ::content .paper-header.has-shadow:after {

+ opacity: 1;

+ -webkit-transform: scale3d(1, 1, 1);

+ transform: scale3d(1, 1, 1);

+ }

+ </style>

+ <template>

+ <content id="headerContent" select="paper-toolbar, .paper-header"></content>

+ <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">

+ <content id="mainContent" select="*"></content>

+ </div>

+ </template>

+</dom-module>

+<style is="custom-style">

+ :root {

+ /**

+ * Default paper header panel shadow

+ */

+ --paper-header-panel-shadow: {

+ height: 6px;

+ bottom: -6px;

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

+ };

+ }

+</style>

+<script src="paper-header-panel-extracted.js"></script></body></html>