| Index: third_party/polymer/components/core-scaffold/core-scaffold.html
|
| diff --git a/third_party/polymer/components/core-scaffold/core-scaffold.html b/third_party/polymer/components/core-scaffold/core-scaffold.html
|
| deleted file mode 100644
|
| index d789b19861fb546d0dcdfbe11a50ec01b2a3bf6f..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components/core-scaffold/core-scaffold.html
|
| +++ /dev/null
|
| @@ -1,252 +0,0 @@
|
| -<!--
|
| -Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| -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
|
| --->
|
| -
|
| -<!--
|
| -`core-scaffold` provides general application layout, introducing a
|
| -responsive scaffold containing a header, toolbar, menu, title and
|
| -areas for application content.
|
| -
|
| -Example:
|
| -
|
| - <core-scaffold>
|
| - <core-header-panel navigation flex mode="seamed">
|
| - <core-toolbar>Application</core-toolbar>
|
| - <core-menu theme="core-light-theme">
|
| - <core-item icon="settings" label="item1"></core-item>
|
| - <core-item icon="settings" label="item2"></core-item>
|
| - </core-menu>
|
| - </core-header-panel>
|
| - <div tool>Title</div>
|
| - <div>Main content goes here...</div>
|
| - </core-scaffold>
|
| -
|
| -Use `mode` to control the header and scrolling behavior of `core-header-panel`
|
| -and `responsiveWidth` to change the layout of the scaffold. Use 'disableSwipe'
|
| -to disable swipe-to-open on toolbar.
|
| -
|
| -Use `rightDrawer` to move position of folding toolbar to the right instead of
|
| -left (default). This will also position content to the left of the menu button
|
| -instead of the right. You can use `flex` within your `tool` content to push the menu
|
| -button to the far right:
|
| -
|
| - <core-scaffold rightDrawer>
|
| - <div tool flex >Title</div>
|
| - </core-scaffold>
|
| -
|
| -You may also add `middle` or `bottom` classes to your `tool` content when using tall
|
| -modes to adjust vertical content positioning in the core-toolbar (e.g. when using
|
| -mode="waterfall-tall"):
|
| -
|
| - <core-scaffold rightDrawer mode="waterfall-tall">
|
| - <div tool flex >Title</div>
|
| - <div tool horizontal layout flex center-justified class="middle">Title-middle</div>
|
| - <div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>
|
| - </core-scaffold>
|
| -
|
| -To have the content fit to the main area, use `fit` attribute.
|
| -
|
| - <core-scaffold>
|
| - <core-header-panel navigation flex mode="seamed">
|
| - ....
|
| - </core-header-panel>
|
| - <div tool>Title</div>
|
| - <div fit>Content fits to the main area</div>
|
| - </core-scaffold>
|
| -
|
| -@group Polymer Core Elements
|
| -@element core-scaffold
|
| -@homepage github.io
|
| --->
|
| -
|
| -<link rel="import" href="../core-toolbar/core-toolbar.html">
|
| -<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
|
| -<link rel="import" href="../core-header-panel/core-header-panel.html">
|
| -<link rel="import" href="../core-icon-button/core-icon-button.html">
|
| -
|
| -<polymer-element name="core-scaffold">
|
| -<template>
|
| -
|
| - <style>
|
| -
|
| - :host {
|
| - display: block;
|
| - }
|
| -
|
| - [drawer] {
|
| - background-color: #fff;
|
| - box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
|
| - }
|
| -
|
| - [main] {
|
| - height: 100%;
|
| - background-color: #eee;
|
| - }
|
| -
|
| - core-toolbar {
|
| - background-color: #526E9C;
|
| - color: #fff;
|
| - }
|
| -
|
| - #drawerPanel:not([narrow]) #menuButton {
|
| - display: none;
|
| - }
|
| -
|
| - </style>
|
| -
|
| - <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="{{drawerWidth}}" rightDrawer="{{rightDrawer}}" responsiveWidth="{{responsiveWidth}}" disableSwipe="{{disableSwipe}}">
|
| -
|
| - <div vertical layout drawer>
|
| -
|
| - <content select="[navigation], nav"></content>
|
| -
|
| - </div>
|
| -
|
| - <core-header-panel id="headerPanel" main mode="{{mode}}">
|
| -
|
| - <core-toolbar>
|
| - <template if="{{!rightDrawer}}">
|
| - <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
|
| - </template>
|
| - <content select="[tool]"></content>
|
| - <template if="{{rightDrawer}}">
|
| - <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
|
| - </template>
|
| - </core-toolbar>
|
| -
|
| - <content select="*"></content>
|
| -
|
| - </core-header-panel>
|
| -
|
| - </core-drawer-panel>
|
| -
|
| -</template>
|
| -<script>
|
| -
|
| - Polymer('core-scaffold', {
|
| -
|
| - /**
|
| - * Fired when the main content has been scrolled. `event.detail.target` returns
|
| - * the scrollable element which you can use to access scroll info such as
|
| - * `scrollTop`.
|
| - *
|
| - * <core-scaffold on-scroll="{{scrollHandler}}">
|
| - * ...
|
| - * </core-scaffold>
|
| - *
|
| - *
|
| - * scrollHandler: function(event) {
|
| - * var scroller = event.detail.target;
|
| - * console.log(scroller.scrollTop);
|
| - * }
|
| - *
|
| - * @event scroll
|
| - */
|
| -
|
| - publish: {
|
| -
|
| - /**
|
| - * Width of the drawer panel.
|
| - *
|
| - * @attribute drawerWidth
|
| - * @type string
|
| - * @default '256px'
|
| - */
|
| - drawerWidth: '256px',
|
| -
|
| - /**
|
| - * When the browser window size is smaller than the `responsiveWidth`,
|
| - * `core-drawer-panel` changes to a narrow layout. In narrow layout,
|
| - * the drawer will be stacked on top of the main panel.
|
| - *
|
| - * @attribute responsiveWidth
|
| - * @type string
|
| - * @default '600px'
|
| - */
|
| - responsiveWidth: '600px',
|
| -
|
| - /**
|
| - * If true, position the drawer to the right. Also place menu icon to
|
| - * the right of the content instead of left.
|
| - *
|
| - * @attribute rightDrawer
|
| - * @type boolean
|
| - * @default false
|
| - */
|
| - rightDrawer: false,
|
| -
|
| - /**
|
| - * If true, swipe to open/close the drawer is disabled.
|
| - *
|
| - * @attribute disableSwipe
|
| - * @type boolean
|
| - * @default false
|
| - */
|
| - disableSwipe: false,
|
| -
|
| - /**
|
| - * Used to control the header and scrolling behaviour of `core-header-panel`
|
| - *
|
| - * @attribute mode
|
| - * @type string
|
| - * @default 'seamed'
|
| - */
|
| - mode: {value: 'seamed', reflect: true}
|
| - },
|
| -
|
| - ready: function() {
|
| - this._scrollHandler = this.scroll.bind(this);
|
| - this.$.headerPanel.addEventListener('scroll', this._scrollHandler);
|
| - },
|
| -
|
| - detached: function() {
|
| - this.$.headerPanel.removeEventListener('scroll', this._scrollHandler);
|
| - },
|
| -
|
| - /**
|
| - * Toggle the drawer panel
|
| - * @method togglePanel
|
| - */
|
| - togglePanel: function() {
|
| - this.$.drawerPanel.togglePanel();
|
| - },
|
| -
|
| - /**
|
| - * Open the drawer panel
|
| - * @method openDrawer
|
| - */
|
| - openDrawer: function() {
|
| - this.$.drawerPanel.openDrawer();
|
| - },
|
| -
|
| - /**
|
| - * Close the drawer panel
|
| - * @method closeDrawer
|
| - */
|
| - closeDrawer: function() {
|
| - this.$.drawerPanel.closeDrawer();
|
| - },
|
| -
|
| - /**
|
| - * Returns the scrollable element on the main area.
|
| - *
|
| - * @property scroller
|
| - * @type Object
|
| - */
|
| - get scroller() {
|
| - return this.$.headerPanel.scroller;
|
| - },
|
| -
|
| - scroll: function(e) {
|
| - this.fire('scroll', {target: e.detail.target}, this, false);
|
| - }
|
| -
|
| - });
|
| -
|
| -</script>
|
| -</polymer-element>
|
|
|