use core-dropdown

googlearchive · Sep 4, 2014 · 2ec6218 · 2ec6218
1 parent 668e343
commit 2ec6218
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 29 deletions.
diff --git a/bower.json b/bower.json
@@ -4,9 +4,10 @@
   "dependencies": {
     "polymer": "Polymer/polymer#master",
     "core-animation": "Polymer/core-animation#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",
     "core-transition": "Polymer/core-transition#master",
     "paper-focusable": "Polymer/paper-focusable#master",
     "paper-icon-button": "Polymer/paper-icon-button#master",

diff --git a/paper-menu-button-transition.html b/paper-menu-button-transition.html
@@ -78,10 +78,7 @@
             fill: 'forwards'
           }));
 
-          var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.querySelector('core-menu'), 'content').getDistributedNodes() : node.shadowRoot.querySelector('core-menu::shadow content').getDistributedNodes().array();
-          var items = nodes.filter(function(n) {
-            return n.nodeType === Node.ELEMENT_NODE;
-          });
+          var items = node.querySelector('#menu').items;
           var itemDelay = offset + (1 - offset) / 2;
           var itemDuration = this.duration * (1 - itemDelay) / items.length;
           items.forEach(function(item, i) {
@@ -91,7 +88,7 @@
               }, {
                 'opacity': 1
               }], {
-                delay: this.duration * itemDelay + itemDuration * (i - 2),
+                delay: this.duration * itemDelay + itemDuration * (i + 2),
                 duration: itemDuration,
                 fill: 'both'
               }));

diff --git a/paper-menu-button.css b/paper-menu-button.css
@@ -13,7 +13,6 @@ license that can be found in the LICENSE file.
   user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
-  overflow: hidden;
 }
 
 :host([disabled]) {
@@ -45,11 +44,14 @@ core-icon::shadow svg {
   fill: #c9c9c9;
 }
 
-#menu {
-  position: fixed;
+#dropdown {
   background-color: transparent;
+}
+
+#menu {
   padding-top: 8px;
   padding-bottom: 8px;
+  margin: 0;
 }
 
 .paper-menu-button-overlay-ink {

diff --git a/paper-menu-button.html b/paper-menu-button.html
@@ -43,35 +43,34 @@
 @extends paper-focusable
 -->
 <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-popup-menu/core-popup-menu.html" rel="import">
+<link href="../core-menu/core-menu.html" rel="import">
+
 <link href="../paper-focusable/paper-focusable.html" rel="import">
 <link href="../paper-shadow/paper-shadow.html" rel="import">
+
 <link href="paper-menu-button-transition.html" rel="import">
 
 <polymer-element name="paper-menu-button" extends="paper-focusable" attributes="src icon opened halign valign slow" on-tap="{{tapAction}}">
   <template>
     <link rel="stylesheet" href="paper-menu-button.css">
-    <!--
-    <paper-menu-button-overlay target="{{$.overlay}}" relatedTarget="{{}}" halign="{{halign}}" valign="{{valign}}" opened="{{opened}}" transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}"></paper-menu-button-overlay>
-    <paper-menu-button-overlay-container id="overlay">
-      <paper-shadow target="{{$.overlayBg}}" z="0" hasPosition></paper-shadow>
+
+    <core-icon src="{{src}}" icon="{{icon}}"></core-icon>
+
+    <core-dropdown id="dropdown" relatedTarget="{{}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}" on-core-transitionend="{{transitionEndAction}}">
+
+      <paper-shadow id="shadow" z="0" target="{{$.dropdown}}"></paper-shadow>
+
       <div class="paper-menu-button-overlay-ink"></div>
       <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>
+
       <core-menu id="menu">
         <content></content>
       </core-menu>
-    </paper-menu-button-overlay-container>
-    -->
-
-    <core-icon src="{{src}}" icon="{{icon}}"></core-icon>
 
-    <core-popup-menu id="menu" relatedTarget="{{}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}" on-core-transitionend="{{transitionEndAction}}">
-      <paper-shadow id="shadow" z="0" target="{{$.menu}}"></paper-shadow>
-      <div class="paper-menu-button-overlay-ink"></div>
-      <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>
-      <content select="*"></content>
-    </core-popup-menu>
+    </core-dropdown>
 
   </template>
   <script>
@@ -89,26 +88,26 @@
         opened: false,
 
         /**
-         * The horizontal alignment of the pulldown menu relative to the button.
+         * The horizontal alignment of the menu relative to the button.
          *
          * @attribute halign
          * @type 'left' | 'right'
          * @default 'left'
          */
-        halign: { value: 'auto', reflect: true },
+        halign: 'left',
 
         /**
-         * The vertical alignment of the pulldown menu relative to the button.
+         * The vertical alignment of the menu relative to the button.
          *
          * @attribute valign
          * @type 'bottom' | 'top'
          * @default 'top'
          */
-        valign: {value: 'auto', reflect: true}
+        valign: 'top',
       },
 
       /**
-       * The URL of an image for the icon.  Should not use `icon` property
+       * The URL of an image for the icon. Should not use `icon` property
        * if you are using this property.
        *
        * @attribute src