Merge pull request #2210 from vidartf/tags-ui-review

Adjust tags UI styling

notebook/static/notebook/js/celltoolbarpresets/tags.js

@@ -13,7 +13,7 @@ define([
         return a.filter(function(n) {
             return b.indexOf(n) === -1;
         });
-    }
+    };
 
     var write_tag = function(cell, name, add) {
         if (add) {
@@ -43,12 +43,12 @@ define([
         }
         cell.events.trigger('set_dirty.Notebook', {value: true});
         return true;
-    }
+    };
 
     var preprocess_input = function(input) {
         // Split on whitespace:
         return input.split(/\s/);
-    }
+    };
 
     var add_tag = function(cell, tag_container, on_remove) {
         return function(name) {
@@ -111,9 +111,9 @@ define([
             .addClass('cell-tag')
             .text(name);
 
-        var remove_button = $('<a/>')
+        var remove_button = $('<i/>')
             .addClass('remove-tag-btn')
-            .text('X')
+            .addClass('fa fa-times')
             .click( function(ev) {
                 if (ev.button === 0) {
                     on_remove(name);
@@ -148,7 +148,7 @@ define([
             }
         });
         var input_container = $('<span/>')
-            .addClass('tags-input')
+            .addClass('tags-input');
         add_dialog_button(input_container, cell, on_add, on_remove);
         button_container.append(input_container
                 .append(text)

notebook/static/notebook/less/tagbar.less

@@ -35,6 +35,35 @@
     background: linear-gradient(to right, rgba(0,0,0,0), #EEE);
 }
 
-.tags-dialog-btn {
-    margin-right: 4px;
+.tags-input > * {
+    margin-left: 4px;
+}
+
+.cell-tag,
+.tags-input input,
+.tags-input button {
+    .form-control();
+    .input-sm();
+    // undo some of the sizing caused by the above mixins
+    width: inherit;
+    font-size: inherit;
+    height: 22px;
+    padding: 0px;
+
+    display: inline-block;
+}
+
+.cell-tag,
+.tags-input button {
+    padding: 0px 4px;
+}
+
+.cell-tag {
+    background-color: #fff;
+}
+
+.tags-input input[type=text]:focus {
+    outline: none;
+    box-shadow: none;
+    border-color: #ccc;
 }