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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: polymer_0.5.0/bower_components/paper-dropdown/demo.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 12 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 | « polymer_0.5.0/bower_components/paper-dropdown/bower.json ('k') | polymer_0.5.0/bower_components/paper-dropdown/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: polymer_0.5.0/bower_components/paper-dropdown/demo.html
diff --git a/bower_components/paper-menu-button/demo.html b/polymer_0.5.0/bower_components/paper-dropdown/demo.html
similarity index 77%
rename from bower_components/paper-menu-button/demo.html
rename to polymer_0.5.0/bower_components/paper-dropdown/demo.html
index 3f7d4f3565f03db939a7eac4850e0d7be491e2ad..d23962db6c64768726996127d615b551a434285a 100644
--- a/bower_components/paper-menu-button/demo.html
+++ b/polymer_0.5.0/bower_components/paper-dropdown/demo.html
@@ -15,54 +15,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
- <title>paper-menu-button</title>
+ <title>paper-dropdown</title>
- <script src="../platform/platform.js"></script>
+ <script src="../webcomponentsjs/webcomponents.js"></script>
+ <link href="../core-collapse/core-collapse.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
+ <link href="../paper-icon-button/paper-icon-button.html" rel="import">
<link href="../paper-item/paper-item.html" rel="import">
- <link href="paper-menu-button.html" rel="import">
+ <link href="paper-dropdown.html" rel="import">
<style shim-shadowdom>
body {
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 16px;
- }
-
- html, body {
- height: 100%;
+ font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+ font-size: 14px;
margin: 0;
+ padding: 24px;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
}
- .toolbar {
- color: #fff;
- font-size: 16px;
- padding: 12px;
- }
-
- .toolbar-1 {
- background-color: #3b78e7;
+ section {
+ padding: 20px 0;
}
- .toolbar-2 {
- background-color: #4285f4;
+ section > div {
+ padding: 14px;
+ font-size: 16px;
}
- .toolbar-3 {
- background-color: #5e97f6;
+ x-trigger {
+ z-index: auto;
}
- .bottom-toolbar-1 {
- background-color: #0d904f;
+ html /deep/ paper-dropdown:not(.no-padding)::shadow #scroller {
+ box-sizing: border-box;
+ padding: 8px;
}
- .bottom-toolbar-2 {
- background-color: #0f9d58;
+ .with-margin {
+ margin: 12px;
}
- .bottom-toolbar-3 {
- background-color: #33ac71;
+ .open-below {
+ top: 38px;
}
</style>
@@ -70,73 +67,124 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</head>
<body>
+ <polymer-element name="x-trigger" extends="paper-icon-button" relative on-tap="{{toggle}}" noink>
+ <template>
+ <shadow></shadow>
+ <content></content>
+ </template>
+ <script>
+ Polymer({
+ toggle: function() {
+ if (!this.dropdown) {
+ this.dropdown = this.querySelector('paper-dropdown');
+ }
+ this.dropdown && this.dropdown.toggle();
+ }
+ });
+ </script>
+ </polymer-element>
+
<template is="auto-binding">
- <div layout vertical fit>
-
- <div class="toolbar toolbar-1" layout horizontal center>
-
- <paper-menu-button icon="menu">
- <template repeat="{{pastries}}">
- <paper-item>{{}}</paper-item>
- </template>
- </paper-menu-button>
-
- <paper-menu-button icon="menu" noTransition>
- <template repeat="{{countries}}">
- <paper-item>{{name}}</paper-item>
- </template>
- </paper-menu-button>
-
- <div flex></div>
-
- <paper-menu-button icon="more-vert" halign="right" noTransition>
- <template repeat="{{countries}}">
- <paper-item>{{name}}</paper-item>
- </template>
- </paper-menu-button>
-
- <paper-menu-button icon="more-vert" halign="right">
- <template repeat="{{pastries}}">
- <paper-item>{{}}</paper-item>
- </template>
- </paper-menu-button>
-
- </div>
-
- <div flex></div>
-
- <div class="toolbar bottom-toolbar-1" layout horizontal center>
-
- <paper-menu-button icon="menu" valign="bottom">
- <template repeat="{{pastries}}">
- <paper-item>{{}}</paper-item>
- </template>
- </paper-menu-button>
-
- <paper-menu-button icon="menu" valign="bottom" noTransition>
- <template repeat="{{countries}}">
- <paper-item>{{name}}</paper-item>
- </template>
- </paper-menu-button>
-
- <div flex></div>
-
- <paper-menu-button icon="more-vert" halign="right" valign="bottom" noTransition>
- <template repeat="{{countries}}">
- <paper-item>{{name}}</paper-item>
- </template>
- </paper-menu-button>
-
- <paper-menu-button icon="more-vert" halign="right" valign="bottom">
- <template repeat="{{pastries}}">
- <paper-item>{{}}</paper-item>
- </template>
- </paper-menu-button>
-
- </div>
-
- </div>
+ <section>
+
+ <div>Absolutely positioned dropdowns</div>
+
+ <x-trigger icon="menu">
+ <paper-dropdown>
+ halign = left
+ <br>
+ valign = top
+ </paper-dropdown>
+ </x-trigger>
+
+ <x-trigger icon="menu">
+ <paper-dropdown valign="bottom">
+ halign = left
+ <br>
+ valign = bottom
+ </paper-dropdown>
+ </x-trigger>
+
+ <x-trigger icon="menu">
+ <paper-dropdown halign="right">
+ halign = right
+ <br>
+ valign = top
+ </paper-dropdown>
+ </x-trigger>
+
+ <x-trigger icon="menu">
+ <paper-dropdown class="no-padding">
+ <div class="menu">
+ <paper-item>Item 1</paper-item>
+ <paper-item>Item 2</paper-item>
+ <paper-item>Item 3</paper-item>
+ </div>
+ </paper-dropdown>
+ </x-trigger>
+
+ </section>
+
+ <section>
+
+ <div>Layered dropdowns</div>
+
+ <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
+
+ <br>
+
+ <core-collapse id="collapse">
+
+ <x-trigger icon="menu">
+ <paper-dropdown layered>
+ halign = left
+ <br>
+ valign = top
+ </paper-dropdown>
+ </x-trigger>
+
+ </core-collapse>
+
+ </section>
+
+ <section>
+
+ <div>Scrolling and margin</div>
+
+ <x-trigger icon="menu">
+ <paper-dropdown>
+ no margin<br>
+ <br>
+ <template repeat="{{countries}}">
+ {{name}}<br>
+ </template>
+ </paper-dropdown>
+ </x-trigger>
+
+ <x-trigger icon="menu">
+ <paper-dropdown class="with-margin">
+ with margin<br>
+ <br>
+ <template repeat="{{countries}}">
+ {{name}}<br>
+ </template>
+ </paper-dropdown>
+ </x-trigger>
+
+ </section>
+
+ <section>
+
+ <div>Custom position</div>
+
+ <x-trigger icon="menu">
+ <paper-dropdown class="open-below">
+ top: 38px
+ </paper-dropdown>
+ </x-trigger>
+
+ </section>
</template>
« no previous file with comments | « polymer_0.5.0/bower_components/paper-dropdown/bower.json ('k') | polymer_0.5.0/bower_components/paper-dropdown/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698