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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: polymer_0.5.0/bower_components/core-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/core-dropdown/core-dropdown-base.html ('k') | polymer_0.5.0/bower_components/core-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/core-dropdown/demo.html
diff --git a/bower_components/core-menu-button/demo.html b/polymer_0.5.0/bower_components/core-dropdown/demo.html
similarity index 79%
rename from bower_components/core-menu-button/demo.html
rename to polymer_0.5.0/bower_components/core-dropdown/demo.html
index c922ba4c2d41ba8096505d4e467005d6abcc0f26..1d42ac75bd8b481a1ea4143096f68247010e37cc 100644
--- a/bower_components/core-menu-button/demo.html
+++ b/polymer_0.5.0/bower_components/core-dropdown/demo.html
@@ -15,54 +15,49 @@ 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>core-menu-button</title>
+ <title>core-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="../core-item/core-item.html" rel="import">
+ <link href="../core-icon-button/core-icon-button.html" rel="import">
- <link href="core-menu-button.html" rel="import">
+ <link href="core-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;
- }
-
- .toolbar-2 {
- background-color: #4285f4;
+ section {
+ padding: 20px 0;
}
- .toolbar-3 {
- background-color: #5e97f6;
+ section > div {
+ padding: 14px;
+ font-size: 16px;
}
- .bottom-toolbar-1 {
- background-color: #0d904f;
+ html /deep/ core-dropdown {
+ background-color: #eee;
+ color: #000;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ 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 +65,110 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</head>
<body>
+ <polymer-element name="x-trigger" extends="core-icon-button" relative on-tap="{{toggle}}">
+ <script>
+ Polymer({
+ toggle: function() {
+ if (!this.dropdown) {
+ this.dropdown = this.querySelector('core-dropdown');
+ }
+ this.dropdown && this.dropdown.toggle();
+ }
+ });
+ </script>
+ </polymer-element>
+
<template is="auto-binding">
- <div layout vertical fit on-core-select="{{selectAction}}" on-core-activate="{{activateAction}}">
+ <section>
+
+ <div>Absolutely positioned dropdowns</div>
+
+ <x-trigger icon="menu">
+ <core-dropdown>
+ halign = left
+ <br>
+ valign = top
+ </core-dropdown>
+ </x-trigger>
+
+ <x-trigger icon="menu">
+ <core-dropdown valign="bottom">
+ halign = left
+ <br>
+ valign = bottom
+ </core-dropdown>
+ </x-trigger>
- <div class="toolbar toolbar-1" layout horizontal center>
+ <x-trigger icon="menu">
+ <core-dropdown halign="right">
+ halign = right
+ <br>
+ valign = top
+ </core-dropdown>
+ </x-trigger>
- <core-menu-button icon="menu">
- <template repeat="{{pastries}}">
- <core-item>{{}}</core-item>
- </template>
- </core-menu-button>
+ </section>
- <core-menu-button icon="menu">
- <template repeat="{{countries}}">
- <core-item>{{name}}</core-item>
- </template>
- </core-menu-button>
+ <section>
- <div flex></div>
+ <div>Layered dropdowns</div>
- <core-menu-button icon="more-vert" halign="right">
- <template repeat="{{countries}}">
- <core-item>{{name}}</core-item>
- </template>
- </core-menu-button>
+ <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
- <core-menu-button icon="more-vert" halign="right">
- <template repeat="{{pastries}}">
- <core-item>{{}}</core-item>
- </template>
- </core-menu-button>
+ <br>
- </div>
+ <core-collapse id="collapse">
- <div flex></div>
+ <x-trigger icon="menu">
+ <core-dropdown layered>
+ halign = left
+ <br>
+ valign = top
+ </core-dropdown>
+ </x-trigger>
- <div class="toolbar bottom-toolbar-1" layout horizontal center>
+ </core-collapse>
- <core-menu-button icon="menu" valign="bottom">
- <template repeat="{{pastries}}">
- <core-item>{{}}</core-item>
- </template>
- </core-menu-button>
+ </section>
- <core-menu-button icon="menu" valign="bottom">
- <template repeat="{{countries}}">
- <core-item>{{name}}</core-item>
- </template>
- </core-menu-button>
+ <section>
- <div flex></div>
+ <div>Scrolling and margin</div>
- <core-menu-button icon="more-vert" halign="right" valign="bottom">
- <template repeat="{{countries}}">
- <core-item>{{name}}</core-item>
- </template>
- </core-menu-button>
+ <x-trigger icon="menu">
+ <core-dropdown>
+ no margin<br>
+ <br>
+ <template repeat="{{countries}}">
+ {{name}}<br>
+ </template>
+ </core-dropdown>
+ </x-trigger>
- <core-menu-button icon="more-vert" halign="right" valign="bottom">
- <template repeat="{{pastries}}">
- <core-item>{{}}</core-item>
- </template>
- </core-menu-button>
+ <x-trigger icon="menu">
+ <core-dropdown class="with-margin">
+ with margin<br>
+ <br>
+ <template repeat="{{countries}}">
+ {{name}}<br>
+ </template>
+ </core-dropdown>
+ </x-trigger>
- </div>
+ </section>
- </div>
+ <section>
+
+ <div>Custom position</div>
+
+ <x-trigger icon="menu">
+ <core-dropdown class="open-below">
+ top: 38px
+ </core-dropdown>
+ </x-trigger>
+
+ </section>
</template>
@@ -402,14 +434,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
'Sfogliatelle'
];
- scope.selectAction = function(e) {
- console.log('core-select', e.target.selectedItem && e.target.selectedItem.textContent);
- };
-
- scope.activateAction = function(e) {
- console.log('core-activate', e.target.selectedItem && e.target.selectedItem.textContent);
- };
-
</script>
</body>
« no previous file with comments | « polymer_0.5.0/bower_components/core-dropdown/core-dropdown-base.html ('k') | polymer_0.5.0/bower_components/core-dropdown/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698