INT-401 saved connections can be deleted

Author: rueckstiess

src/connect/connection.jade

@@ -0,0 +1,4 @@
+li.list-group-item
+  .close-icon(data-hook='close')
+    i.fa.fa-close
+  a(data-hook='name')

src/connect/index.js

@@ -4,21 +4,33 @@ var Connection = require('../models/connection');
 var format = require('util').format;
 var $ = require('jquery');
 var app = require('ampersand-app');
+var debug = require('debug')('scout:connect:index');
 
 var ConnectionView = View.extend({
   props: {
-    model: Connection
-  },
+    model: Connection,
+    hover: {
+      type: 'boolean',
+      default: false
+    }
+  }, 
   events: {
-    click: 'onClick',
-    dblclick: 'onDoubleClick'
+    'click': 'onClick',
+    'dblclick': 'onDoubleClick',
+    'mouseover': 'onMouseOver',
+    'mouseout': 'onMouseOut',
+    'click [data-hook=close]': 'onCloseClick'
   },
   bindings: {
     'model.name': {
       hook: 'name'
+    },
+    'hover': {
+      type: 'toggle',
+      hook: 'close'
     }
   },
-  template: '<li class="list-group-item"><a data-hook="name"></a></li>',
+  template: require('./connection.jade'),
   onClick: function(event) {
     event.stopPropagation();
     event.preventDefault();
@@ -30,6 +42,17 @@ var ConnectionView = View.extend({
   onDoubleClick: function(event) {
     this.onClick(event);
     this.parent.parent.onSubmit(event);
+  },
+  onCloseClick: function(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.model.destroy();
+  },
+  onMouseOver: function(event) {
+    this.hover = true;
+  },
+  onMouseOut: function(event) {
+    this.hover = false;
   }
 });
 

styles/sidebar.less

@@ -59,6 +59,15 @@
       background: none;
       color: @gray5;
 
+      &:hover {
+        background: lighten(@slate0, 5%);
+        a {
+          color: @pw;
+          border-left: 4px solid lighten(@slate0, 5%);
+          text-decoration: none;
+        }
+      }
+
       a {
         display: block;
         color: @gray5;
@@ -68,14 +77,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
         border-left: 4px solid transparent;
-
-        &:hover {
-          color: @pw;
-          text-decoration: none;
-          background: lighten(@slate0, 5%);
-          border-left: 4px solid lighten(@slate0, 5%);
-        }
       }
+
       i {
         color: lighten(@text-color, 40%);
         line-height: 24px;
@@ -97,6 +100,15 @@
 
         }
       }
+
+      .close-icon {
+        position: absolute;
+        right: 0px;
+
+        &:hover i {
+          color: @pw;
+        }
+      }
     }
   }
   .sidebar-controls {