implement with core-popup-menu

bower.json

@@ -4,8 +4,8 @@
   "dependencies": {
     "polymer": "Polymer/polymer#master",
     "core-icon-button": "Polymer/core-icon-button#master",
-    "core-menu": "Polymer/core-menu#master",
-    "core-overlay": "Polymer/core-overlay#master",
+    "core-item": "Polymer/core-item#master",
+    "core-popup-menu": "Polymer/core-popup-menu#master",
     "core-toolbar": "Polymer/core-toolbar#master"
   }
 }

core-menu-button.html

@@ -30,100 +30,80 @@
 -->
 <link href="../polymer/polymer.html" rel="import">
 <link href="../core-icon-button/core-icon-button.html" rel="import">
-<link href="../core-menu/core-menu.html" rel="import">
-<link href="../core-overlay/core-overlay.html" rel="import">
+<link href="../core-popup-menu/core-popup-menu.html" rel="import">
 
 <polymer-element name="core-menu-button" attributes="icon label src selected opened halign valign valueattr multi inlineMenu">
   <template>
     <link rel="stylesheet" href="core-menu-button.css">
-    <core-overlay target="{{$.overlay}}" opened="{{opened}}" layered?="{{!inlineMenu}}"></core-overlay>
     <core-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon}}" active="{{opened}}"><span>{{label}}</span></core-icon-button>
-    <div id="overlay" halign="{{halign}}" valign="{{valign}}">
-      <style>
-        #overlay {
-          position: absolute;
-          left: 0px;
-          top: 40px;
-          padding: 8px;
-          background: #fff;
-          border: 1px solid #ccc;
-          border-radius: 3px;
-          /* overlay styling must be complete */
-          font-size: 1rem;
-        }
-
-        core-menu {
-          margin: 0;
-        }
-
-        #overlay[halign=right] {
-          left: auto;
-          right: 0px;
-        }
-
-        #overlay[valign=top] {
-          top: auto;
-          bottom: 40px;
-        }
-      </style>
-      <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" multi="{{multi}}" on-core-select="{{closeAction}}">
-        <content select="*"></content>
-      </core-menu>
-    </div>
+    <core-popup-menu id="menu" relatedTarget="{{$.button}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" on-core-select="{{closeAction}}">
+      <content select="*"></content>
+    </core-popup-menu>
   </template>
   <script>
     Polymer('core-menu-button', {
-      /**
-       * The icon to display.
-       * @attribute icon
-       * @type string
-       */
-      icon: 'dots',
-      src: '',
-      /**
-       * The index of the selected menu item.
-       * @attribute selected
-       * @type number
-       */
-      selected: '',
-      /**
-       * Set to true to open the menu.
-       * @attribute opened
-       * @type boolean
-       */
-      opened: false,
-      /**
-       * Set to true to cause the menu popup to be displayed inline rather 
-       * than in its own layer.
-       * @attribute inlineMenu
-       * @type boolean
-       */
-      inlineMenu: false,
-      /**
-       * Horizontally align the overlay with the button. Accepted values are
-       * ["left", "center", "right"].
-       * @attribute halign
-       * @type string
-       */
-      halign: 'center',
-      /**
-       * Display the overlay on top or below the button. Accepted values are
-       * ["top", "bottom"].
-       * @attribute valign
-       * @type string
-       */
-      valign: 'bottom',
-      multi: false,
+
+      publish: {
+
+        /**
+         * The icon to display.
+         * @attribute icon
+         * @type string
+         */
+        icon: 'dots',
+
+        src: '',
+
+        /**
+         * The index of the selected menu item.
+         * @attribute selected
+         * @type number
+         */
+        selected: '',
+
+        /**
+         * Set to true to open the menu.
+         * @attribute opened
+         * @type boolean
+         */
+        opened: false,
+
+        /**
+         * Set to true to cause the menu popup to be displayed inline rather 
+         * than in its own layer.
+         * @attribute inlineMenu
+         * @type boolean
+         */
+        inlineMenu: false,
+
+        /**
+         * Horizontally align the overlay with the button.
+         * @attribute halign
+         * @type string
+         */
+        halign: 'auto',
+
+        /**
+         * Display the overlay on top or below the button.
+         * @attribute valign
+         * @type string
+         */
+        valign: 'auto'
+
+      },
+
       closeAction: function() {
         this.opened = false;
       },
+
       /**
        * Toggle the opened state of the dropdown.
        * @method toggle
        */
       toggle: function() {
         this.opened = !this.opened;
       },
+
       /**
        * The selected menu item.
        * @property selection
@@ -132,6 +112,7 @@
       get selection() {
         return this.$.menu.selection;
       }
+
     });
   </script>
 </polymer-element>

demo.html

@@ -23,6 +23,14 @@
       overflow: hidden;
     }
 
+    core-menu-button::shadow #menu {
+    	border: 1px solid #ccc;
+    }
+
+    core-item {
+    	padding: 12px;
+    }
+
 		.small::shadow core-icon-button {
 			padding: 12px;
 		}
@@ -66,17 +74,17 @@
 
 		</core-menu-button>
 
-		<div core-flex>Toolbar</div>
+		<div flex>Toolbar</div>
 
-		<core-menu-button icon="add" halign="right">
+		<core-menu-button icon="add" halign="right" valign="top">
 
 			<core-item icon="star-rate" label="Rate"></core-item>
 			<core-item icon="today" label="Today"></core-item>
 			<core-item icon="keep" label="Keep"></core-item>
 
 		</core-menu-button>
 
-		<core-menu-button icon="more-vert" halign="right" valign="top">
+		<core-menu-button icon="more-vert" valign="top">
 
 			<core-item icon="visibility" label="Visibility"></core-item>
 			<core-item icon="extension" label="Extension"></core-item>