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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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, 11 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <html> 11 <html>
12 <head> 12 <head>
13 13
14 <meta charset="utf-8"> 14 <meta charset="utf-8">
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1.0, user-scalable=yes"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1.0, user-scalable=yes">
17 17
18 <title>core-menu-button</title> 18 <title>core-dropdown</title>
19 19
20 <script src="../platform/platform.js"></script> 20 <script src="../webcomponentsjs/webcomponents.js"></script>
21 21
22 <link href="../core-collapse/core-collapse.html" rel="import">
22 <link href="../core-icons/core-icons.html" rel="import"> 23 <link href="../core-icons/core-icons.html" rel="import">
23 <link href="../core-item/core-item.html" rel="import"> 24 <link href="../core-icon-button/core-icon-button.html" rel="import">
24 25
25 <link href="core-menu-button.html" rel="import"> 26 <link href="core-dropdown.html" rel="import">
26 27
27 <style shim-shadowdom> 28 <style shim-shadowdom>
28 body { 29 body {
29 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 30 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
31 font-size: 14px;
32 margin: 0;
33 padding: 24px;
34 -webkit-tap-highlight-color: rgba(0,0,0,0);
35 -webkit-touch-callout: none;
36 }
37
38 section {
39 padding: 20px 0;
40 }
41
42 section > div {
43 padding: 14px;
30 font-size: 16px; 44 font-size: 16px;
31 } 45 }
32 46
33 html, body { 47 html /deep/ core-dropdown {
34 height: 100%; 48 background-color: #eee;
35 margin: 0; 49 color: #000;
50 border: 1px solid #ccc;
51 border-radius: 3px;
52 padding: 8px;
36 } 53 }
37 54
38 .toolbar { 55 .with-margin {
39 color: #fff; 56 margin: 12px;
40 font-size: 16px;
41 padding: 12px;
42 } 57 }
43 58
44 .toolbar-1 { 59 .open-below {
45 background-color: #3b78e7; 60 top: 38px;
46 }
47
48 .toolbar-2 {
49 background-color: #4285f4;
50 }
51
52 .toolbar-3 {
53 background-color: #5e97f6;
54 }
55
56 .bottom-toolbar-1 {
57 background-color: #0d904f;
58 }
59
60 .bottom-toolbar-2 {
61 background-color: #0f9d58;
62 }
63
64 .bottom-toolbar-3 {
65 background-color: #33ac71;
66 } 61 }
67 62
68 </style> 63 </style>
69 64
70 </head> 65 </head>
71 <body> 66 <body>
72 67
68 <polymer-element name="x-trigger" extends="core-icon-button" relative on-tap=" {{toggle}}">
69 <script>
70 Polymer({
71 toggle: function() {
72 if (!this.dropdown) {
73 this.dropdown = this.querySelector('core-dropdown');
74 }
75 this.dropdown && this.dropdown.toggle();
76 }
77 });
78 </script>
79 </polymer-element>
80
73 <template is="auto-binding"> 81 <template is="auto-binding">
74 82
75 <div layout vertical fit on-core-select="{{selectAction}}" on-core-activate="{ {activateAction}}"> 83 <section>
76 84
77 <div class="toolbar toolbar-1" layout horizontal center> 85 <div>Absolutely positioned dropdowns</div>
78 86
79 <core-menu-button icon="menu"> 87 <x-trigger icon="menu">
80 <template repeat="{{pastries}}"> 88 <core-dropdown>
81 <core-item>{{}}</core-item> 89 halign = left
82 </template> 90 <br>
83 </core-menu-button> 91 valign = top
92 </core-dropdown>
93 </x-trigger>
84 94
85 <core-menu-button icon="menu"> 95 <x-trigger icon="menu">
86 <template repeat="{{countries}}"> 96 <core-dropdown valign="bottom">
87 <core-item>{{name}}</core-item> 97 halign = left
88 </template> 98 <br>
89 </core-menu-button> 99 valign = bottom
100 </core-dropdown>
101 </x-trigger>
90 102
91 <div flex></div> 103 <x-trigger icon="menu">
104 <core-dropdown halign="right">
105 halign = right
106 <br>
107 valign = top
108 </core-dropdown>
109 </x-trigger>
92 110
93 <core-menu-button icon="more-vert" halign="right"> 111 </section>
94 <template repeat="{{countries}}">
95 <core-item>{{name}}</core-item>
96 </template>
97 </core-menu-button>
98 112
99 <core-menu-button icon="more-vert" halign="right"> 113 <section>
100 <template repeat="{{pastries}}">
101 <core-item>{{}}</core-item>
102 </template>
103 </core-menu-button>
104 114
105 </div> 115 <div>Layered dropdowns</div>
106 116
107 <div flex></div> 117 <button onclick="document.getElementById('collapse').toggle()">toggle core -collapse</button>
108 118
109 <div class="toolbar bottom-toolbar-1" layout horizontal center> 119 <br>
110 120
111 <core-menu-button icon="menu" valign="bottom"> 121 <core-collapse id="collapse">
112 <template repeat="{{pastries}}">
113 <core-item>{{}}</core-item>
114 </template>
115 </core-menu-button>
116 122
117 <core-menu-button icon="menu" valign="bottom"> 123 <x-trigger icon="menu">
118 <template repeat="{{countries}}"> 124 <core-dropdown layered>
119 <core-item>{{name}}</core-item> 125 halign = left
120 </template> 126 <br>
121 </core-menu-button> 127 valign = top
128 </core-dropdown>
129 </x-trigger>
122 130
123 <div flex></div> 131 </core-collapse>
124 132
125 <core-menu-button icon="more-vert" halign="right" valign="bottom"> 133 </section>
126 <template repeat="{{countries}}">
127 <core-item>{{name}}</core-item>
128 </template>
129 </core-menu-button>
130 134
131 <core-menu-button icon="more-vert" halign="right" valign="bottom"> 135 <section>
132 <template repeat="{{pastries}}">
133 <core-item>{{}}</core-item>
134 </template>
135 </core-menu-button>
136 136
137 </div> 137 <div>Scrolling and margin</div>
138 138
139 </div> 139 <x-trigger icon="menu">
140 <core-dropdown>
141 no margin<br>
142 <br>
143 <template repeat="{{countries}}">
144 {{name}}<br>
145 </template>
146 </core-dropdown>
147 </x-trigger>
148
149 <x-trigger icon="menu">
150 <core-dropdown class="with-margin">
151 with margin<br>
152 <br>
153 <template repeat="{{countries}}">
154 {{name}}<br>
155 </template>
156 </core-dropdown>
157 </x-trigger>
158
159 </section>
160
161 <section>
162
163 <div>Custom position</div>
164
165 <x-trigger icon="menu">
166 <core-dropdown class="open-below">
167 top: 38px
168 </core-dropdown>
169 </x-trigger>
170
171 </section>
140 172
141 </template> 173 </template>
142 174
143 <script> 175 <script>
144 176
145 scope = document.querySelector('template[is=auto-binding]'); 177 scope = document.querySelector('template[is=auto-binding]');
146 178
147 scope.countries = [ 179 scope.countries = [
148 {name: 'Afghanistan', code: 'AF'}, 180 {name: 'Afghanistan', code: 'AF'},
149 {name: 'Åland Islands', code: 'AX'}, 181 {name: 'Åland Islands', code: 'AX'},
(...skipping 245 matching lines...) Expand 10 before | Expand all | Expand 10 after
395 'Croissant', 427 'Croissant',
396 'Donut', 428 'Donut',
397 'Financier', 429 'Financier',
398 'Jello', 430 'Jello',
399 'Madeleine', 431 'Madeleine',
400 'Pound cake', 432 'Pound cake',
401 'Pretzel', 433 'Pretzel',
402 'Sfogliatelle' 434 'Sfogliatelle'
403 ]; 435 ];
404 436
405 scope.selectAction = function(e) {
406 console.log('core-select', e.target.selectedItem && e.target.selectedItem. textContent);
407 };
408
409 scope.activateAction = function(e) {
410 console.log('core-activate', e.target.selectedItem && e.target.selectedIte m.textContent);
411 };
412
413 </script> 437 </script>
414 438
415 </body> 439 </body>
416 </html> 440 </html>
OLDNEW
« 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