Disable buttons until we are connected.

Author: dastaple

app/start.js

@@ -292,11 +292,15 @@ BounceUI.prototype.setup_menu = function() {
     });
     $('#scan').click(() => _ui.start_scan());
     this.connectMenu = $('#connections');
-
-    $('#play').click( ()=>_ui.run());
-    $('#stop').click( ()=>_ui.currentMcu.stop());
 };
 
+BounceUI.prototype.enable_connected_menu_items_ = function() {
+    $('#play').removeClass('disabled');
+    $('#stop').removeClass('disabled');
+    $('#play').click( ()=>this.run());
+    $('#stop').click( ()=>this.currentMcu.stop());    
+};    
+
 BounceUI.prototype.new_document = function() {
     /* todo - request confirmation */
     this._is_preparing = true;
@@ -350,6 +354,7 @@ BounceUI.prototype.start_scan = function() {
             mcu_console.writeLine("Connecting.. outer");
             _ui.connect_menu_item_clicked_(connectItem, mcu);
             _ui.connectMenu.hide();
+            _ui.enable_connected_menu_items_();
             return false;
         });
     });

bounce.css

@@ -88,14 +88,19 @@ html, body {
     padding-bottom: 20px;
     margin: 0;
 }
+
+.layered-button.disabled, .layered-button.disabled > i, .layered-button.disabled > control, .layered-button.disabled > :hover, .layered-button.disabled:hover {
+    color: darkgray;
+    background-color: lightgray;
+}
+
 .layered-button > i {
     padding: 4px;
 }
 .layered-button > .control  {
     display: inline;
     font-size: 1em;
     border-left: 2px solid black;
-    color: darkgray;
 }
 .layered-button > .control:hover  {
     color: white;

bounce_window.html

@@ -37,10 +37,10 @@
                 <ul id="connections" class="toggle-list">
                 </ul>
             </div>
-            <div id="play" class="layered-button">
+            <div id="play" class="layered-button disabled">
                 <i class="fa fa-play" aria-hidden="true"></i>
             </div>
-            <div id="stop" class="layered-button">
+            <div id="stop" class="layered-button disabled">
                 <i class="fa fa-stop" aria-hidden="true"></i>
             </div>