polymer-ui-menu-button: quick impl for top anchoring

googlearchive · Aug 8, 2013 · d727f02 · d727f02
1 parent ebea891
commit d727f02
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/polymer-ui-menu-button/index.html b/polymer-ui-menu-button/index.html
@@ -29,12 +29,12 @@
 			<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
 			<div flex>Toolbar: polymer-ui-light-theme</div>
 			<polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
-			<polymer-ui-menu-button selected="0" valign="right">
+			<polymer-ui-menu-button selected="0" align="right">
 				<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
 			</polymer-ui-menu-button>
-			<polymer-ui-menu-button selected="0" valign="right">
+			<polymer-ui-menu-button selected="0" align="right">
 				<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
@@ -46,6 +46,15 @@
 			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 			<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
 		</polymer-ui-menu-button>
+		<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
+			<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
+		</polymer-ui-menu-button>
+		<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
+			<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
+		</polymer-ui-menu-button>
 		<br><br><br><br><br><br><br><br><br><br>
 	</div>
 </body>

diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.css b/polymer-ui-menu-button/polymer-ui-menu-button.css
@@ -17,14 +17,18 @@
 	margin: 7px 0 0 7px;
 }
 
-#menuOverlay[valign=right] {
+#menuOverlay[align=right] {
   position: absolute !important;
 	right: 10px;
 }
 
+#menuOverlay[valign=top] {
+	bottom: 36px;
+}
+
 @media screen and (max-width: 800px) {
   #menuOverlay,
-	#menuOverlay[valign=right] {
+	#menuOverlay[align=right] {
     left: 0;
     width: 100%;
     -webkit-transform: none;
@@ -64,3 +68,17 @@
 	border-bottom-color: white;
 	margin-top: -16px;
 }
+
+#arrow[valign=top] {
+	top: -10px;
+}
+
+[valign=top] .arrow {
+	margin: 0px 4px 0;
+	border-color: #cfcfcf transparent transparent transparent;
+}
+
+[valign=top] .arrow-inner {
+	border-top-color: white;
+	margin-top: -18px;
+}
diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.html b/polymer-ui-menu-button/polymer-ui-menu-button.html
@@ -13,17 +13,17 @@
 <link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html">
 <link rel="import" href="../polymer-ui-menu/polymer-ui-menu.html">
 
-<polymer-element name="polymer-ui-menu-button" attributes="src icon opened responsive valign selected selectedItem selectedClass valueattr multi">
+<polymer-element name="polymer-ui-menu-button" attributes="src icon opened responsive align valign selected selectedItem selectedClass valueattr multi">
   <template>
     <link rel="stylesheet" href="polymer-ui-menu-button.css">
 		<link rel="stylesheet" href="../../polymer-elements/polymer-overlay/polymer-overlay-global.css">
 		<polymer-ui-icon-button id="button" on-tap="toggle" src="{{src}}" icon="{{icon}}" active="{{opened}}">
-			<div id="arrow">
+			<div id="arrow" valign="{{valign}}">
 				<div class="arrow"></div>
 				<div class="arrow arrow-inner"></div>
 			</div>
 		</polymer-ui-icon-button>
-		<div id="menuOverlay" valign="{{valign}}">
+		<div id="menuOverlay" align="{{align}}" valign="{{valign}}">
 			<polymer-ui-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" multi="{{multi}}">
 				<content select="*"></content>
 			</polymer-ui-menu>
@@ -38,7 +38,8 @@
       src: '',
       selected: '',
       opened: false,
-      valign: 'center',
+      align: 'center',
+			valign: 'bottom',
       multi: false,
 			mediaQuery: 'max-width: 800px',
 			mediaChangeAction: function(e) {