use core-dropdown

googlearchive · Sep 4, 2014 · ec6d149 · ec6d149
1 parent da69cb5
commit ec6d149
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
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-button": "Polymer/core-icon-button#master",
     "core-item": "Polymer/core-item#master",
-    "core-popup-menu": "Polymer/core-popup-menu#master",
+    "core-menu": "Polymer/core-menu#master",
     "core-toolbar": "Polymer/core-toolbar#master"
   }
 }
diff --git a/core-menu-button.html b/core-menu-button.html
@@ -29,16 +29,19 @@
  */
 -->
 <link href="../polymer/polymer.html" rel="import">
+<link href="../core-dropdown/core-dropdown.html" rel="import">
 <link href="../core-icon-button/core-icon-button.html" rel="import">
-<link href="../core-popup-menu/core-popup-menu.html" rel="import">
+<link href="../core-menu/core-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-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon}}" active="{{opened}}"><span>{{label}}</span></core-icon-button>
-    <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>
+    <core-dropdown id="dropdown" relatedTarget="{{$.button}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}">
+      <core-menu selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" on-core-select="{{closeAction}}">
+        <content select="*"></content>
+      </core-menu>
+    </core-dropdown>
   </template>
   <script>
     Polymer('core-menu-button', {

diff --git a/demo.html b/demo.html
@@ -20,10 +20,9 @@
 
     core-toolbar {
       background-color: #cfa0e9;
-      overflow: hidden;
     }
 
-    core-menu-button::shadow #menu {
+    core-menu-button::shadow #dropdown {
     	border: 1px solid #ccc;
     }
 
@@ -84,7 +83,7 @@
 
 		</core-menu-button>
 
-		<core-menu-button icon="more-vert" valign="top">
+		<core-menu-button icon="more-vert" valign="top" halign="right">
 
 			<core-item icon="visibility" label="Visibility"></core-item>
 			<core-item icon="extension" label="Extension"></core-item>