paper-dropdown -> paper-dropdown-menu, use core-dropdown

googlearchive · Sep 4, 2014 · 156063c · 156063c
1 parent 0c4e211
commit 156063c
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,6 @@
-!!!WORK IN PROGRESS!!!
-=======================
-
-paper-dropdown
-=============
+paper-dropdown-menu
+===================
 
 owner: @morethanreal
 
-See the [component page](http://polymer-project.org/docs/elements/core-elements.html#paper-dropdown) for more information.
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#paper-dropdown-menu) for more information.
diff --git a/bower.json b/bower.json
@@ -3,9 +3,10 @@
   "private": false,
   "dependencies": {
     "polymer": "Polymer/polymer#master",
+    "core-dropdown": "Polymer/core-dropdown#master",
     "core-icon": "Polymer/core-icon#master",
     "core-icons": "Polymer/core-icons#master",
-    "core-popup-menu": "Polymer/core-popup-menu#master",
+    "core-menu": "Polymer/core-menu#master",
     "paper-item": "Polymer/paper-item#master",
     "paper-shadow": "Polymer/paper-shadow#master"
   }

diff --git a/demo.html b/demo.html
@@ -11,13 +11,13 @@
   <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-dropdown</title>
+  <title>paper-dropdown-menu</title>
 
   <script src="../platform/platform.js"></script>
 
   <link href="../font-roboto/roboto.html" rel="import">
   <link href="../paper-item/paper-item.html" rel="import">
-  <link href="paper-dropdown.html" rel="import">
+  <link href="paper-dropdown-menu.html" rel="import">
 
   <style shim-shadowdom>
     html, body {
@@ -34,55 +34,55 @@
       padding: 12px;
     }
 
-    body /deep/ paper-dropdown.narrow {
+    body /deep/ paper-dropdown-menu.narrow {
       max-width: 100px;
     }
   </style>
 
 </head>
 <body unresolved>
 
-  <polymer-element name="dropdown-demo">
+  <polymer-element name="dropdown-demo" on-core-select="{{selectAction}}">
   <template>
     <section layout vertical fit>
       <section layout horizontal>
 
-        <paper-dropdown>
+        <paper-dropdown-menu>
           <template repeat="{{countries}}">
             <paper-item label="{{name}}"></paper-item>
           </template>
-        </paper-dropdown>
+        </paper-dropdown-menu>
 
 <!--         <div style="margin:0 12px;">
           narrow:
-          <paper-dropdown class="narrow">
+          <paper-dropdown-menu class="narrow">
             <template repeat="{{countries}}">
               <paper-item label="{{name}}"></paper-item>
             </template>
-          </paper-dropdown>
+          </paper-dropdown-menu>
         </div>
 -->
 
         <div flex></div>
 
-        <paper-dropdown halign="right">
+        <paper-dropdown-menu halign="right">
           <template repeat="{{countries}}">
             <paper-item label="{{name}}"></paper-item>
           </template>
-        </paper-dropdown>
+        </paper-dropdown-menu>
       </section>
 
       <div flex center center>
       </div>
 
       <section>
         drop-up:
-        <paper-dropdown valign="top" valueattr="label" label="Favorite pastry" selected="Donut">
+        <paper-dropdown-menu valign="bottom" valueattr="label" label="Favorite pastry" selected="Donut">
           <paper-item label="Croissant"></paper-item>
           <paper-item label="Donut"></paper-item>
           <paper-item label="Financier"></paper-item>
           <paper-item label="Madeleine"></paper-item>
-        </paper-dropdown>
+        </paper-dropdown-menu>
       </section>
 
     </section>
@@ -334,7 +334,11 @@
         {name: 'Yemen', code: 'YE'},
         {name: 'Zambia', code: 'ZM'},
         {name: 'Zimbabwe', code: 'ZW'}
-      ]
+      ],
+
+      selectAction: function(e, details) {
+        console.log('select', details.selected, details.item);
+      }
     });
   </script>
   </polymer-element>

diff --git a/paper-dropdown.css → paper-dropdown-menu.css b/paper-dropdown.css → paper-dropdown-menu.css
@@ -43,6 +43,13 @@ core-icon {
   margin: 0.3em 0 0.2em 0.25em;
 }
 
-#menu::shadow #menu {
-  margin: 8px 0;
+#menu {
+  padding: 8px 0;
+  margin: 0;
 }
+
+.menu-container {
+  overflow: auto;
+  max-height: 100%;
+  max-width: 100%;
+}
diff --git a/paper-dropdown.html → paper-dropdown-menu.html b/paper-dropdown.html → paper-dropdown-menu.html
@@ -32,7 +32,7 @@
 
 Example:
 
-    paper-dropdown::shadow #menu {
+    paper-dropdown::shadow #dropdown {
         background-color: #eee;
         border: 1px solid #ccc;
     }
@@ -54,15 +54,18 @@
   @param {Object} detail.item the item element
 -->
 <link href="../polymer/polymer.html" rel="import">
+
+<link href="../core-dropdown/core-dropdown.html" rel="import">
 <link href="../core-icon/core-icon.html" rel="import">
 <link href="../core-icons/core-icons.html" rel="import">
-<link href="../core-popup-menu/core-popup-menu.html" rel="import">
+<link href="../core-menu/core-menu.html" rel="import">
+
 <link href="../paper-shadow/paper-shadow.html" rel="import">
 
-<polymer-element name="paper-dropdown">
+<polymer-element name="paper-dropdown-menu">
 <template>
 
-  <link href="paper-dropdown.css" rel="stylesheet">
+  <link href="paper-dropdown-menu.css" rel="stylesheet">
 
   <div id="control" layout horizontal selected?="{{selectedItem}}" on-tap="{{toggle}}">
     <div flex>
@@ -71,10 +74,17 @@
     <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}"></core-icon>
   </div>
 
-  <core-popup-menu id="menu" relatedTarget="{{$.control}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}"selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}">
-    <paper-shadow z="1" target="{{$.menu}}" hasPosition></paper-shadow>
-    <content select="*"></content>
-  </core-popup-menu>
+  <core-dropdown id="dropdown" relatedTarget="{{$.control}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" margin="12">
+
+    <paper-shadow z="1" target="{{$.dropdown}}" hasPosition></paper-shadow>
+
+    <div class="menu-container">
+      <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}">
+        <content></content>
+      </core-menu>
+    </div>
+
+  </core-dropdown>
 
 </template>
 <script>
@@ -165,15 +175,15 @@
        * @type "left"|"right"
        * @default "left"
        */
-      halign: {value: 'left', reflect: true},
+      halign: 'left',
 
       /**
        * Vertically align the dropdown menu with the control.
        * @attribute valign
        * @type "top"|"bottom"
        * @default "bottom"
        */
-      valign: {value: 'bottom', reflect: true}
+      valign: 'top'
 
     },