| Index: third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html
|
| diff --git a/third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html b/third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html
|
| deleted file mode 100644
|
| index e3c7a03ad1453e90b813340c6faa1cc072f38822..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html
|
| +++ /dev/null
|
| @@ -1,386 +0,0 @@
|
| -<!--
|
| -Copyright (c) 2015 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
|
| --->
|
| -
|
| -<link rel="import" href="../polymer/polymer.html">
|
| -<link rel="import" href="../paper-styles/paper-styles.html">
|
| -
|
| -<!--
|
| -`paper-toolbar` is a horizontal bar containing items that can be used for
|
| -label, navigation, search and actions. The items place inside the
|
| -`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
|
| -`paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
|
| -sizing.
|
| -
|
| -Example:
|
| -
|
| - <paper-toolbar>
|
| - <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
|
| - <div class="title">Title</div>
|
| - <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
|
| - </paper-toolbar>
|
| -
|
| -`paper-toolbar` has a standard height, but can made be taller by setting `tall`
|
| -class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
|
| -
|
| - <paper-toolbar class="tall">
|
| - <paper-icon-button icon="menu"></paper-icon-button>
|
| - </paper-toolbar>
|
| -
|
| -Apply `medium-tall` class to make the toolbar medium tall. This will make the
|
| -toolbar 2x the normal height.
|
| -
|
| - <paper-toolbar class="medium-tall">
|
| - <paper-icon-button icon="menu"></paper-icon-button>
|
| - </paper-toolbar>
|
| -
|
| -When `tall`, items can pin to either the top (default), middle or bottom. Use
|
| -`middle` class for middle content and `bottom` class for bottom content.
|
| -
|
| - <paper-toolbar class="tall">
|
| - <paper-icon-button icon="menu"></paper-icon-button>
|
| - <div class="middle title">Middle Title</div>
|
| - <div class="bottom title">Bottom Title</div>
|
| - </paper-toolbar>
|
| -
|
| -For `medium-tall` toolbar, the middle and bottom contents overlap and are
|
| -pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
|
| -still honored separately.
|
| -
|
| -To make an element completely fit at the bottom of the toolbar, use `fit` along
|
| -with `bottom`.
|
| -
|
| - <paper-toolbar class="tall">
|
| - <div id="progressBar" class="bottom fit"></div>
|
| - </paper-toolbar>
|
| -
|
| -### Styling
|
| -
|
| -The following custom properties and mixins are available for styling:
|
| -
|
| -Custom property | Description | Default
|
| -----------------|-------------|----------
|
| -`--paper-toolbar-background` | Toolbar background color | `--default-primary-color`
|
| -`--paper-toolbar-color` | Toolbar foreground color | `--text-primary-color`
|
| -`--paper-toolbar` | Mixin applied to the toolbar | `{}`
|
| -
|
| -### Accessibility
|
| -
|
| -`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
|
| -be used as the label of the toolbar via `aria-labelledby`.
|
| -
|
| -@demo demo/index.html
|
| --->
|
| -
|
| -<dom-module id="paper-toolbar">
|
| -
|
| - <style>
|
| - :host {
|
| - /* technical */
|
| - display: block;
|
| - position: relative;
|
| - box-sizing: border-box;
|
| - -moz-box-sizing: border-box;
|
| -
|
| - /* size */
|
| - height: 64px;
|
| -
|
| - background: var(--paper-toolbar-background, --default-primary-color);
|
| - color: var(--paper-toolbar-color, --text-primary-color);
|
| -
|
| - @apply(--paper-toolbar);
|
| - }
|
| -
|
| - :host(.animate) {
|
| - /* transition */
|
| - transition: height 0.18s ease-in;
|
| - }
|
| -
|
| - :host(.medium-tall) {
|
| - height: 128px;
|
| - }
|
| -
|
| - :host(.tall) {
|
| - height: 192px;
|
| - }
|
| -
|
| - .toolbar-tools {
|
| - position: relative;
|
| - height: 64px;
|
| - padding: 0 16px;
|
| - pointer-events: none;
|
| - }
|
| -
|
| - /*
|
| - * TODO: Where should media query breakpoints live so they can be shared between elements?
|
| - */
|
| -
|
| - @media (max-width: 639px) {
|
| - :host {
|
| - height: 56px;
|
| - }
|
| -
|
| - :host(.medium-tall) {
|
| - height: 112px;
|
| - }
|
| -
|
| - :host(.tall) {
|
| - height: 168px;
|
| - }
|
| -
|
| - .toolbar-tools {
|
| - height: 56px;
|
| - }
|
| - }
|
| -
|
| - #topBar {
|
| - position: relative;
|
| - }
|
| -
|
| - /* middle bar */
|
| - #middleBar {
|
| - position: absolute;
|
| - top: 0;
|
| - right: 0;
|
| - left: 0;
|
| - }
|
| -
|
| - :host(.tall) #middleBar,
|
| - :host(.medium-tall) #middleBar {
|
| - -webkit-transform: translateY(100%);
|
| - transform: translateY(100%);
|
| - }
|
| -
|
| - /* bottom bar */
|
| - #bottomBar {
|
| - position: absolute;
|
| - right: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - }
|
| -
|
| - /*
|
| - * make elements (e.g. buttons) respond to mouse/touch events
|
| - *
|
| - * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
|
| - * absorb events. All children must have pointer events re-enabled to work as
|
| - * expected.
|
| - */
|
| - .toolbar-tools > ::content > *:not([disabled]) {
|
| - pointer-events: auto;
|
| - }
|
| -
|
| - .toolbar-tools > ::content .title {
|
| - @apply(--paper-font-title);
|
| - @apply(--layout-flex);
|
| -
|
| - pointer-events: none;
|
| - text-overflow: ellipsis;
|
| - white-space: nowrap;
|
| - overflow: hidden;
|
| -
|
| - /*
|
| - * Polymer/polymer/issues/1525
|
| - * --paper-font-title defines a `font-weight`
|
| - * let's override its value, but we need `important!`
|
| - * because all mixins are resolved in rule's selector that has higher precedence
|
| - * than the current selector.
|
| - */
|
| - font-weight: 400 !important;
|
| - }
|
| -
|
| - /**
|
| - * TODO: Refactor these selectors
|
| - * Work in progress.
|
| - */
|
| - .toolbar-tools > ::content paper-icon-button[icon=menu] {
|
| - margin-right: 24px;
|
| - }
|
| -
|
| - .toolbar-tools > ::content > .title,
|
| - .toolbar-tools > ::content[select=".middle"] > .title,
|
| - .toolbar-tools > ::content[select=".bottom"] > .title {
|
| - margin-left: 56px;
|
| - }
|
| -
|
| - .toolbar-tools > ::content > paper-icon-button + .title,
|
| - .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
|
| - .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
|
| - margin-left: 0;
|
| - }
|
| -
|
| - .toolbar-tools > ::content > .fit {
|
| - position: absolute;
|
| - top: auto;
|
| - right: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - width: auto;
|
| - margin: 0;
|
| - }
|
| -
|
| - </style>
|
| -
|
| - <template>
|
| -
|
| - <div id="topBar" class$="[[_computeBarClassName(justify)]]">
|
| - <content select=":not(.middle):not(.bottom)"></content>
|
| - </div>
|
| -
|
| - <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
|
| - <content select=".middle"></content>
|
| - </div>
|
| -
|
| - <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
|
| - <content select=".bottom"></content>
|
| - </div>
|
| -
|
| - </template>
|
| -
|
| -</dom-module>
|
| -
|
| -<script>
|
| -
|
| - (function() {
|
| -
|
| - 'use strict';
|
| -
|
| - function classNames(obj) {
|
| - var classNames = [];
|
| - for (var key in obj) {
|
| - if (obj.hasOwnProperty(key) && obj[key]) {
|
| - classNames.push(key);
|
| - }
|
| - }
|
| -
|
| - return classNames.join(' ');
|
| - }
|
| -
|
| - Polymer({
|
| -
|
| - is: 'paper-toolbar',
|
| -
|
| - hostAttributes: {
|
| - 'role': 'toolbar'
|
| - },
|
| -
|
| - properties: {
|
| -
|
| - /**
|
| - * Controls how the items are aligned horizontally when they are placed
|
| - * at the bottom.
|
| - * Options are `start`, `center`, `end`, `justified` and `around`.
|
| - *
|
| - * @attribute bottomJustify
|
| - * @type string
|
| - * @default ''
|
| - */
|
| - bottomJustify: {
|
| - type: String,
|
| - value: ''
|
| - },
|
| -
|
| - /**
|
| - * Controls how the items are aligned horizontally.
|
| - * Options are `start`, `center`, `end`, `justified` and `around`.
|
| - *
|
| - * @attribute justify
|
| - * @type string
|
| - * @default ''
|
| - */
|
| - justify: {
|
| - type: String,
|
| - value: ''
|
| - },
|
| -
|
| - /**
|
| - * Controls how the items are aligned horizontally when they are placed
|
| - * in the middle.
|
| - * Options are `start`, `center`, `end`, `justified` and `around`.
|
| - *
|
| - * @attribute middleJustify
|
| - * @type string
|
| - * @default ''
|
| - */
|
| - middleJustify: {
|
| - type: String,
|
| - value: ''
|
| - }
|
| -
|
| - },
|
| -
|
| - attached: function() {
|
| - this._observer = this._observe(this);
|
| - this._updateAriaLabelledBy();
|
| - },
|
| -
|
| - detached: function() {
|
| - if (this._observer) {
|
| - this._observer.disconnect();
|
| - }
|
| - },
|
| -
|
| - _observe: function(node) {
|
| - var observer = new MutationObserver(function() {
|
| - this._updateAriaLabelledBy();
|
| - }.bind(this));
|
| - observer.observe(node, {
|
| - childList: true,
|
| - subtree: true
|
| - });
|
| - return observer;
|
| - },
|
| -
|
| - _updateAriaLabelledBy: function() {
|
| - var labelledBy = [];
|
| - var contents = Polymer.dom(this.root).querySelectorAll('content');
|
| - for (var content, index = 0; content = contents[index]; index++) {
|
| - var nodes = Polymer.dom(content).getDistributedNodes();
|
| - for (var node, jndex = 0; node = nodes[jndex]; jndex++) {
|
| - if (node.classList && node.classList.contains('title')) {
|
| - if (node.id) {
|
| - labelledBy.push(node.id);
|
| - } else {
|
| - var id = 'paper-toolbar-label-' + Math.floor(Math.random() * 10000);
|
| - node.id = id;
|
| - labelledBy.push(id);
|
| - }
|
| - }
|
| - }
|
| - }
|
| - if (labelledBy.length > 0) {
|
| - this.setAttribute('aria-labelledby', labelledBy.join(' '));
|
| - }
|
| - },
|
| -
|
| - _computeBarClassName: function(barJustify) {
|
| - var classObj = {
|
| - 'center': true,
|
| - 'horizontal': true,
|
| - 'layout': true,
|
| - 'toolbar-tools': true
|
| - };
|
| -
|
| - // If a blank string or any falsy value is given, no other class name is
|
| - // added.
|
| - if (barJustify) {
|
| - var justifyClassName = (barJustify === 'justified') ?
|
| - barJustify :
|
| - barJustify + '-justified';
|
| -
|
| - classObj[justifyClassName] = true;
|
| - }
|
| -
|
| - return classNames(classObj);
|
| - }
|
| -
|
| - });
|
| -
|
| - }());
|
| -
|
| -</script>
|
|
|