Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3064)

Unified Diff: polymer_1.0.4/bower_components/paper-toolbar/paper-toolbar.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 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
Index: polymer_1.0.4/bower_components/paper-toolbar/paper-toolbar.html
diff --git a/polymer_1.0.4/bower_components/paper-toolbar/paper-toolbar.html b/polymer_1.0.4/bower_components/paper-toolbar/paper-toolbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..153305e27f66df10c7e85a06f21b740bb84ee182
--- /dev/null
+++ b/polymer_1.0.4/bower_components/paper-toolbar/paper-toolbar.html
@@ -0,0 +1,368 @@
+<!--
+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.
+
+### 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;
+ }
+ </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>
« no previous file with comments | « polymer_1.0.4/bower_components/paper-toolbar/index.html ('k') | polymer_1.0.4/bower_components/paper-toolbar/test/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698