Make maintoolbar select dropdowns look nice

IPython/html/static/notebook/js/maintoolbar.js

@@ -1,219 +1,221 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2011 The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // ToolBar
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
     var MainToolBar = function (selector) {
         IPython.ToolBar.apply(this, arguments);
         this.construct();
         this.add_celltype_list();
         this.add_celltoolbar_list();
         this.bind_events();
     };
 
     MainToolBar.prototype = new IPython.ToolBar();
 
     MainToolBar.prototype.construct = function () {
         this.add_buttons_group([
                 {
                     id : 'save_b',
                     label : 'Save and Checkpoint',
                     icon : 'icon-save',
                     callback : function () {
                         IPython.notebook.save_checkpoint();
                         }
                 }
             ]);
 
         this.add_buttons_group([
                 {
                     id : 'insert_below_b',
                     label : 'Insert Cell Below',
                     icon : 'icon-plus-sign',
                     callback : function () {
                         IPython.notebook.insert_cell_below('code');
                         IPython.notebook.select_next();
                         IPython.notebook.focus_cell();
                         }
                 }
             ],'insert_above_below');
 
         this.add_buttons_group([
                 {
                     id : 'cut_b',
                     label : 'Cut Cell',
                     icon : 'icon-cut',
                     callback : function () {
                         IPython.notebook.cut_cell();
                         }
                 },
                 {
                     id : 'copy_b',
                     label : 'Copy Cell',
                     icon : 'icon-copy',
                     callback : function () {
                         IPython.notebook.copy_cell();
                         }
                 },
                 {
                     id : 'paste_b',
                     label : 'Paste Cell Below',
                     icon : 'icon-paste',
                     callback : function () {
                         IPython.notebook.paste_cell_below();
                         }
                 }
             ],'cut_copy_paste');
 
         this.add_buttons_group([
                 {
                     id : 'move_up_b',
                     label : 'Move Cell Up',
                     icon : 'icon-arrow-up',
                     callback : function () {
                         IPython.notebook.move_cell_up();
                         }
                 },
                 {
                     id : 'move_down_b',
                     label : 'Move Cell Down',
                     icon : 'icon-arrow-down',
                     callback : function () {
                         IPython.notebook.move_cell_down();
                         }
                 }
             ],'move_up_down');
         
 
         this.add_buttons_group([
                 {
                     id : 'run_b',
                     label : 'Run Cell',
                     icon : 'icon-play',
                     callback : function () {
                         // emulate default shift-enter behavior
                         IPython.notebook.execute_cell_and_select_below();
                     }
                 },
                 {
                     id : 'interrupt_b',
                     label : 'Interrupt',
                     icon : 'icon-stop',
                     callback : function () {
                         IPython.notebook.session.interrupt_kernel();
                         }
                 },
                 {
                     id : 'repeat_b',
                     label : 'Restart Kernel',
                     icon : 'icon-repeat',
                     callback : function () {
                         IPython.notebook.restart_kernel();
                         }
                 }
             ],'run_int');
     };
     
     MainToolBar.prototype.add_celltype_list = function () {
         this.element
             .append($('<select/>')
                 .attr('id','cell_type')
+                .addClass('form-control select-xs')
                 // .addClass('ui-widget-content')
                 .append($('<option/>').attr('value','code').text('Code'))
                 .append($('<option/>').attr('value','markdown').text('Markdown'))
                 .append($('<option/>').attr('value','raw').text('Raw NBConvert'))
                 .append($('<option/>').attr('value','heading1').text('Heading 1'))
                 .append($('<option/>').attr('value','heading2').text('Heading 2'))
                 .append($('<option/>').attr('value','heading3').text('Heading 3'))
                 .append($('<option/>').attr('value','heading4').text('Heading 4'))
                 .append($('<option/>').attr('value','heading5').text('Heading 5'))
                 .append($('<option/>').attr('value','heading6').text('Heading 6'))
             );
     };
 
 
     MainToolBar.prototype.add_celltoolbar_list = function () {
         var label = $('<span/>').addClass("navbar-text").text('Cell Toolbar:');
         var select = $('<select/>')
             // .addClass('ui-widget-content')
             .attr('id', 'ctb_select')
+            .addClass('form-control select-xs')
             .append($('<option/>').attr('value', '').text('None'));
         this.element.append(label).append(select);
         select.change(function() {
                 var val = $(this).val()
                 if (val =='') {
                     IPython.CellToolbar.global_hide();
                     delete IPython.notebook.metadata.celltoolbar;
                 } else {
                     IPython.CellToolbar.global_show();
                     IPython.CellToolbar.activate_preset(val);
                     IPython.notebook.metadata.celltoolbar = val;
                 }
             });
         // Setup the currently registered presets.
         var presets = IPython.CellToolbar.list_presets();
         for (var i=0; i<presets.length; i++) {
             var name = presets[i];
             select.append($('<option/>').attr('value', name).text(name));
         }
         // Setup future preset registrations.
         $([IPython.events]).on('preset_added.CellToolbar', function (event, data) {
             var name = data.name;
             select.append($('<option/>').attr('value', name).text(name));
         });
         // Update select value when a preset is activated.
         $([IPython.events]).on('preset_activated.CellToolbar', function (event, data) {
             if (select.val() !== data.name)
                 select.val(data.name);
         });
     };
 
 
     MainToolBar.prototype.bind_events = function () {
         var that = this;
         
         this.element.find('#cell_type').change(function () {
             var cell_type = $(this).val();
             if (cell_type === 'code') {
                 IPython.notebook.to_code();
             } else if (cell_type === 'markdown')  {
                 IPython.notebook.to_markdown();
             } else if (cell_type === 'raw')  {
                 IPython.notebook.to_raw();
             } else if (cell_type === 'heading1')  {
                 IPython.notebook.to_heading(undefined, 1);
             } else if (cell_type === 'heading2')  {
                 IPython.notebook.to_heading(undefined, 2);
             } else if (cell_type === 'heading3')  {
                 IPython.notebook.to_heading(undefined, 3);
             } else if (cell_type === 'heading4')  {
                 IPython.notebook.to_heading(undefined, 4);
             } else if (cell_type === 'heading5')  {
                 IPython.notebook.to_heading(undefined, 5);
             } else if (cell_type === 'heading6')  {
                 IPython.notebook.to_heading(undefined, 6);
             }
         });
         $([IPython.events]).on('selected_cell_type_changed.Notebook', function (event, data) {
             if (data.cell_type === 'heading') {
                 that.element.find('#cell_type').val(data.cell_type+data.level);
             } else {
                 that.element.find('#cell_type').val(data.cell_type);
             }
         });
     };
 
     IPython.MainToolBar = MainToolBar;
 
     return IPython;
 
 }(IPython));

IPython/html/static/notebook/less/toolbar.less

@@ -1,42 +1,51 b''
 .toolbar {
     padding: 0px;
     margin-left: -5px;
     margin-top: -5px;
 
     select, label {
         width: auto;
         vertical-align:middle;
         margin-right:2px;
         margin-bottom:0px;
         display: inline;
         font-size: 92%;
         margin-left:0.3em;
         margin-right:0.3em;
         padding: 0px;
         padding-top: 3px;
     }
     .btn {
         padding: 2px 8px;
     }
 }
 
 .toolbar .btn-group {
   margin-top: 0px;
   margin-left: 5px;
 }
 
 .toolbar-inner {
   border: none !important;
   .box-shadow(none) !important;
 }
 
 #maintoolbar {
   margin-bottom: 0px;
   margin-top: -2px;
   border: 0px;
   min-height: 27px;
 }
 
 #maintoolbar .navbar-text {
   float: none;
+  vertical-align: middle;
+  text-align: right;
+  margin-left: 5px;
+  margin-right: 0px;
+  margin-top: 0px
+}
+
+.select-xs {
+  height: @btn_small_height;
 }

IPython/html/static/tree/less/tree.less

@@ -1,149 +1,149 b''
 
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 @dashboard_tb_pad: 4px;
 @dashboard_lr_pad: 7px;
 // These are the total heights of the Bootstrap small and mini buttons. These values
 // are not less variables so we have to track them statically.
-@btn_small_height: 26px;
+@btn_small_height: 24px;
 @btn_mini_height: 22px;
 @dark_dashboard_color: darken(@border_color, 30%);
 
 ul#tabs {
     margin-bottom: @dashboard_tb_pad;
 }
 
 ul#tabs a {
     padding-top: @dashboard_tb_pad;
     padding-bottom: @dashboard_tb_pad;
 }
 
 ul.breadcrumb {
     a:focus, a:hover {
         text-decoration: none;
     }
     i.icon-home {
         font-size: 16px;
         margin-right: 4px;
     }
     
     span {
         color: @dark_dashboard_color;
     }
 }
 
 .list_toolbar {
     padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
     vertical-align: middle;
 
     .tree-buttons {
         padding-top: 2px;
     }
 }
 
 .list_toolbar [class*="span"] {
     min-height: @btn_small_height;
 }
 
 .list_header {
     font-weight: bold;
 }
 
 .list_container {
   margin-top: @dashboard_tb_pad;
   margin-bottom: 5*@dashboard_tb_pad;
   border: 1px solid @border_color;
   border-radius: 4px;
 }
 
 .list_container > div {
   border-bottom: 1px solid @border_color;
   &:hover .list-item{
     background-color: red;
   };
 }
 
 .list_container > div:last-child {
   border: none;
 }
 
 .list_item {
   &:hover .list_item {
     background-color: #ddd;
   };
   a {text-decoration: none;}
 }
 
 .action_col {
     text-align: right;
 }
 
 .list_header>div, .list_item>div {
     padding-top: @dashboard_tb_pad;
     padding-bottom: @dashboard_tb_pad;
     padding-left: @dashboard_lr_pad;
     padding-right: @dashboard_lr_pad;
     line-height: @btn_mini_height;
 }
 
 .item_name {
     line-height: @btn_mini_height;
     height: @btn_small_height;
 }
 
 .item_icon {
     font-size: 14px; 
     color: @dark_dashboard_color;
     margin-right: @dashboard_lr_pad;
 }
 
 .item_buttons {
     line-height: 1em;
 }
 
 .toolbar_info {
     height: @btn_small_height;
     line-height: @btn_small_height;
 }
 
 input.nbname_input, input.engine_num_input {
     // These settings give these inputs a height that matches @btn_mini_height = 22
     padding-top: 3px;
     padding-bottom: 3px;
     height: @btn_mini_height;
     line-height: 14px;
     margin: 0px;
 }
 
 input.engine_num_input {
     width: 60px;
 }
 
 .highlight_text {
     color: blue;
 }
 
 #project_name > .breadcrumb {
     padding: 0px;
     margin-bottom: 0px;
     background-color: transparent;
     font-weight: bold;
    
 }
 
 .tab-content .row {
     margin-left: 0px;
     margin-right: 0px;
 }
 
 .folder_icon:before {
     .icon(@folder-close-alt)
 }
 
 .notebook_icon:before {
     .icon(@book)
 }