Allow more customisation of loot-dropdown menu

Allow label floating and the dropdown's vertical alignment to be
specified.

src/gui/html/elements/editable-table.html

@@ -26,7 +26,7 @@
 <template id="messageRow">
   <tr>
     <td style="width: 100px;">
-      <loot-dropdown-menu class="type" value="say" vertical-align="bottom">
+      <loot-dropdown-menu class="type" value="say" no-label-float>
         <paper-item value="say">Note</paper-item>
         <paper-item value="warn">Warning</paper-item>
         <paper-item value="error">Error</paper-item>
@@ -35,7 +35,7 @@
     <td><paper-input error-message="A content string is required." class="content" required auto-validate no-label-float></paper-input></td>
     <td><paper-input class="condition" no-label-float></paper-input></td>
     <td>
-      <loot-dropdown-menu class="language" vertical-align="bottom">
+      <loot-dropdown-menu class="language" no-label-float>
         <!-- Language <option> elements go here. -->
       </loot-dropdown-menu>
     </td>
@@ -50,7 +50,7 @@
 <template id="tagRow">
   <tr>
     <td style="width: 100px;">
-      <loot-dropdown-menu class="type" value="add" vertical-align="bottom">
+      <loot-dropdown-menu class="type" value="add" no-label-float>
         <paper-item value="add">Add</paper-item>
         <paper-item value="remove">Remove</paper-item>
       </loot-dropdown-menu>
@@ -96,7 +96,7 @@
   <tr>
     <td><paper-input error-message="A name is required." class="name" required auto-validate no-label-float></paper-input></td>
     <td>
-      <loot-dropdown-menu class="type" vertical-align="bottom">
+      <loot-dropdown-menu class="type" no-label-float>
         <!-- Game <option> elements go here. -->
       </loot-dropdown-menu>
     </td>

src/gui/html/elements/loot-dropdown-menu.html

@@ -39,7 +39,7 @@ it a <select>-like API. This means:
         };
       }
     </style>
-    <paper-dropdown-menu disabled$="[[disabled]]" no-label-float>
+    <paper-dropdown-menu disabled$="[[disabled]]" no-label-float="[[noLabelFloat]]" label="[[label]]" vertical-align="[[verticalAlign]]">
       <paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{value}}">
         <content></content>
       </paper-listbox>
@@ -59,6 +59,16 @@ it a <select>-like API. This means:
           notify: true,
           reflectToAttribute: true,
         },
+        noLabelFloat: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        verticalAlign: {
+          type: String,
+          value: 'top',
+          reflectToAttribute: true,
+        },
       },
     });
   </script>

src/gui/html/index.html

@@ -205,7 +205,7 @@
         <paper-icon-button icon="menu" id="drawerToggle" paper-drawer-toggle></paper-icon-button>
         <paper-icon-button id="jumpToGeneralInfo" icon="home"></paper-icon-button>
         <paper-tooltip for="jumpToGeneralInfo">Jump To General Information</paper-tooltip>
-        <loot-dropdown-menu id="gameMenu" class="dark">
+        <loot-dropdown-menu id="gameMenu" class="dark" no-label-float>
           <!-- Generated game <li> elements go here. -->
         </loot-dropdown-menu>
         <!-- right-align the rest of the toolbar items. -->
@@ -383,7 +383,7 @@
       <div>
         <div>
           <div>Default Game</div>
-          <loot-dropdown-menu id="defaultGameSelect">
+          <loot-dropdown-menu id="defaultGameSelect" no-label-float>
             <paper-item value="auto">Autodetect</paper-item>
             <!-- Game <option> elements go here. -->
           </loot-dropdown-menu>
@@ -391,7 +391,7 @@
         <div>
           <span id="languageLabel">Language</span>
           <paper-tooltip for="languageLabel">Language changes will be applied after LOOT is restarted.</paper-tooltip>
-          <loot-dropdown-menu id="languageSelect">
+          <loot-dropdown-menu id="languageSelect" no-label-float>
             <!-- Language <option> elements go here. -->
           </loot-dropdown-menu>
         </div>