Fixing styling issues with CellToolbar.

* Width of CellToolbar was off on Linux Chrome+Firefox.
* Minor styling cleanups.

IPython/frontend/html/notebook/static/css/celltoolbar.css

@@ -1,38 +1,30 @@
-/*Css for the metadata edit area*/
+/* Css for the metadata edit area */
 
-.celltoolbar{
-    border:thin solid #DDD;
-    margin-left:81px;
-    border-bottom:none;
+
+.celltoolbar {
+    border: thin solid #DDD;
+    margin-left: 0px;
+    border-bottom: none;
     background : #EEE;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
-    display:none;
 }
 
-.code_cell .celltoolbar{
-    margin-left:81px;
-}
-
-.text_cell .celltoolbar{
-    margin-left:0px;
-}
-
-.celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{
+.no_input_radius {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
-.celltoolbar-on .celltoolbar {
-    display:block;
+.text_cell .ctb_prompt {
+    display: none;
 }
 
-.celltoolbar ui-button {
-    border :none;
+.code_cell .ctb_prompt {
+    display: block;
 }
 
 .button_container {
- float:right;
+    float: right;
 }
 
 .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
@@ -40,14 +32,22 @@
     border : none;
 }
 
-.celltoolbar select {
-    margin:10px;
-    margin-top:0px;
-    margin-bottom:0px;
+.celltoolbar .button_container select {
+    margin: 10px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    font-size: 77%;
+}
+
+.celltoolbar label span {
+    font-size: 77%;
 }
 
 .celltoolbar input[type=checkbox] {
-    margin-bottom:1px;
-
+    margin-bottom: 1px;
+}
+
+.celltoolbar ui-button {
+    border: none;
 }
 

IPython/frontend/html/notebook/static/js/cell.js

@@ -51,7 +51,6 @@ var IPython = (function (IPython) {
      * @method create_element
      */
     Cell.prototype.create_element = function () {
-        this.celltoolbar = new IPython.CellToolbar(this);
     };
 
 

IPython/frontend/html/notebook/static/js/celltoolbar.js

@@ -19,7 +19,6 @@
 var IPython = (function (IPython) {
     "use strict";
 
-
     /**
      * @constructor
      * @class CellToolbar
@@ -27,30 +26,54 @@ var IPython = (function (IPython) {
      */
     var CellToolbar = function (cell) {
         CellToolbar._instances.push(this);
-        this.inner_element = $('<div/>');
         this.cell = cell;
-        this.element = $('<div/>').addClass('celltoolbar')
-                .append(this.inner_element)
+        this.create_element();
         this.rebuild();
         return this;
     };
 
+
+    CellToolbar.prototype.create_element = function () {
+        this.inner_element = $('<div/>');
+        var ctb_element = $('<div/>').addClass('celltoolbar')
+            .append(this.inner_element);
+        this.element = $('<div/>').addClass('ctb_wrapper hbox');
+        ctb_element.addClass('box-flex1');
+        var ctb_prompt = $('<div/>').addClass('ctb_prompt prompt');
+        this.element.append(ctb_prompt).append(ctb_element);
+    };
+
+
     CellToolbar.dropdown_preset_element = $('<select/>')
         .addClass('ui-widget ui-widget-content')
         .attr('id', 'celltoolbar_selector')
         .append($('<option/>').attr('value', '').text('None'))
 
-    CellToolbar.dropdown_preset_element.change(function(){
+
+    CellToolbar.dropdown_preset_element.change(function() {
         var val = CellToolbar.dropdown_preset_element.val()
         if(val ==''){
-            $('body').removeClass('celltoolbar-on')
+            CellToolbar.hide();
         } else {
-            $('body').addClass('celltoolbar-on')
-            CellToolbar.activate_preset(val)
+            CellToolbar.show();
+            CellToolbar.activate_preset(val);
         }
     })
 
 
+    CellToolbar.hide = function () {
+        $('.ctb_wrapper').hide();
+        $('.input_area').addClass('no_input_radius');
+        $('.text_cell_input').addClass('no_input_radius');
+    }
+
+
+    CellToolbar.show = function () {
+        $('.ctb_wrapper').show();
+        $('.input_area').removeClass('no_input_radius');
+        $('.text_cell_input').removeClass('no_input_radius');
+    }
+
 
     /**
      * Class variable that should contain a dict of all availlable callback
@@ -274,7 +297,7 @@ var IPython = (function (IPython) {
             var button_container = $(div)
 
             var chkb = $('<input/>').attr('type', 'checkbox');
-            var lbl = $('<label/>').append($('<span/>').text(name).css('font-size', '77%'));
+            var lbl = $('<label/>').append($('<span/>').text(name));
             lbl.append(chkb);
             chkb.attr("checked", getter(cell));
 
@@ -334,8 +357,8 @@ var IPython = (function (IPython) {
         label= label? label: "";
         return function(div, cell) {
             var button_container = $(div)
-            var lbl = $("<label/>").append($('<span/>').text(label).css('font-size', '77%'));
-            var select = $('<select/>');
+            var lbl = $("<label/>").append($('<span/>').text(label));
+            var select = $('<select/>').addClass('ui-widget ui-widget-content');
             for(var itemn in list_list){
                 var opt = $('<option/>');
                         opt.attr('value', list_list[itemn][1])

IPython/frontend/html/notebook/static/js/codecell.js

@@ -61,8 +61,11 @@ var IPython = (function (IPython) {
         IPython.Cell.prototype.create_element.apply(this, arguments);
 
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
-        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
+
+        this.celltoolbar = new IPython.CellToolbar(this);
+        cell.append(this.celltoolbar.element);
+
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
         var input_area = $('<div/>').addClass('input_area box-flex1');

IPython/frontend/html/notebook/static/js/textcell.js

@@ -44,8 +44,9 @@ var IPython = (function (IPython) {
     TextCell.prototype.create_element = function () {
         IPython.Cell.prototype.create_element.apply(this, arguments);
         var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
-        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
+        this.celltoolbar = new IPython.CellToolbar(this);
+        cell.append(this.celltoolbar.element);
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,