mode dropdown

web/src/css/style.css

@@ -2,7 +2,7 @@
 label { display: block; }
 .radio-option { padding: 0 5px; cursor: pointer; }
 .command-buttons { list-style: none; margin: 0; padding: 0; }
-.command-buttons li { display: inline-block; margin-right: 1em; }
+.command-buttons li { display: inline-block; margin-right: 1em; overflow: auto; }
 .form-entry { margin: 0 0 20px 0; }
 .form-entry .form-control { width: 20em; }
 .form-entry label { display: inline-block; }
@@ -11,6 +11,8 @@ label:not(.error) .error-info { display: none; }
 .error-info:before { content: '('; }
 .error-info:after { content: ')'; }
 .header-btn { margin: 20px; }
+.dropdown { position: initial; overflow: auto; }
+.dropdown-menu li { display: block; }
 #sniffed-traffic { max-height: 50em; overflow-y: auto; }
 .btn-secondary {
   background-color: #fff;

web/src/index.html

@@ -317,7 +317,7 @@
         </ul>
         <p></p>
         <ul class="command-buttons">
-          <div class="mode-option inline" data-for="rgb,rgbw,rgb_cct,fut089">
+          <div class="mode-option inline" data-for="rgb">
             <li>
               <div class="plus-minus-group">
                 <button type="button" class="btn btn-default btn-number command-btn" data-command="previous_mode">
@@ -331,6 +331,18 @@
               </div>
             </li>
           </div>
+          <div class="mode-option inline" data-for="rgbw,rgb_cct,fut089">
+            <li>
+              <div class="dropdown">
+                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+                  Mode
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu mode-dropdown">
+                </ul>
+              </div>
+            </li>
+          </div>
           <div class="mode-option inline" data-for="rgb,rgbw,rgb_cct,fut089">
             <li>
               <div class="plus-minus-group">

web/src/js/script.js

@@ -399,6 +399,16 @@ $(function() {
     $(this).closest('tr').remove();
   });
 
+  for (var i = 0; i < 9; i++) {
+    $('.mode-dropdown').append('<li><a href="#" data-mode-value="' + i + '">' + i + '</a></li>');
+  }
+
+  $('body').on('click', '.mode-dropdown li a', function(e) {
+    updateGroup({mode: $(this).data('mode-value')});
+    e.preventDefault();
+    return false;
+  });
+
   selectize = $('#deviceId').selectize({
     create: true,
     sortField: 'text',