Review #2

IPython/html/static/base/js/dialog.js

@@ -1,161 +1,161
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Utility for modal dialogs with bootstrap
 //============================================================================
 
 IPython.namespace('IPython.dialog');
 
 IPython.dialog = (function (IPython) {
     "use strict";
     
     var modal = function (options) {
         var modal = $("<div/>")
             .addClass("modal")
             .addClass("fade")
             .attr("role", "dialog");
         var dialog = $("<div/>")
             .addClass("modal-dialog")
             .appendTo(modal);
         var dialog_content = $("<div/>")
             .addClass("modal-content")
             .appendTo(dialog);
         dialog_content.append(
             $("<div/>")
                 .addClass("modal-header")
                 .append($("<button>")
                     .attr("type", "button")
                     .addClass("close")
                     .attr("data-dismiss", "modal")
                     .attr("aria-hidden", "true")
                     .html("&times;")
                 ).append(
                     $("<h4/>")
                         .addClass('modal-title')
                         .text(options.title || "")
                 )
         ).append(
             $("<div/>").addClass("modal-body").append(
                 options.body || $("<p/>")
             )
         );
         
         var footer = $("<div/>").addClass("modal-footer");
         
         for (var label in options.buttons) {
             var btn_opts = options.buttons[label];
             var button = $("<button/>")
-                .addClass("btn btn-default")
+                .addClass("btn btn-default btn-sm")
                 .attr("data-dismiss", "modal")
                 .text(label);
             if (btn_opts.click) {
                 button.click($.proxy(btn_opts.click, dialog_content));
             }
             if (btn_opts.class) {
                 button.addClass(btn_opts.class);
             }
             footer.append(button);
         }
         dialog_content.append(footer);
         // hook up on-open event
         modal.on("shown.bs.modal", function() {
             setTimeout(function() {
                 footer.find("button").last().focus();
                 if (options.open) {
                     $.proxy(options.open, modal)();
                 }
             }, 0);
         });
         
         // destroy modal on hide, unless explicitly asked not to
         if (options.destroy === undefined || options.destroy) {
             modal.on("hidden.bs.modal", function () {
                 modal.remove();
             });
         }
         modal.on("hidden.bs.modal", function () {
             if (IPython.notebook) {
                 var cell = IPython.notebook.get_selected_cell();
                 if (cell) cell.select();
                 IPython.keyboard_manager.enable();
                 IPython.keyboard_manager.command_mode();
             }
         });
         
         if (IPython.keyboard_manager) {
             IPython.keyboard_manager.disable();
         }
         
         return modal.modal(options);
     };
 
     var edit_metadata = function (md, callback, name) {
         name = name || "Cell";
         var error_div = $('<div/>').css('color', 'red');
         var message = 
             "Manually edit the JSON below to manipulate the metadata for this " + name + "." +
             " We recommend putting custom metadata attributes in an appropriately named sub-structure," +
             " so they don't conflict with those of others.";
 
         var textarea = $('<textarea/>')
             .attr('rows', '13')
             .attr('cols', '80')
             .attr('name', 'metadata')
             .text(JSON.stringify(md || {}, null, 2));
         
         var dialogform = $('<div/>').attr('title', 'Edit the metadata')
             .append(
                 $('<form/>').append(
                     $('<fieldset/>').append(
                         $('<label/>')
                         .attr('for','metadata')
                         .text(message)
                         )
                         .append(error_div)
                         .append($('<br/>'))
                         .append(textarea)
                     )
             );
         var editor = CodeMirror.fromTextArea(textarea[0], {
             lineNumbers: true,
             matchBrackets: true,
             indentUnit: 2,
             autoIndent: true,
             mode: 'application/json',
         });
         var modal = IPython.dialog.modal({
             title: "Edit " + name + " Metadata",
             body: dialogform,
             buttons: {
                 OK: { class : "btn-primary",
                     click: function() {
                         // validate json and set it
                         var new_md;
                         try {
                             new_md = JSON.parse(editor.getValue());
                         } catch(e) {
                             console.log(e);
                             error_div.text('WARNING: Could not save invalid JSON.');
                             return false;
                         }
                         callback(new_md);
                     }
                 },
                 Cancel: {}
             }
         });
 
         modal.on('shown.bs.modal', function(){ editor.refresh(); });
     };
     
     return {
         modal : modal,
         edit_metadata : edit_metadata,
     };
 
 }(IPython));

IPython/html/static/base/less/variables.less

@@ -1,42 +1,38
 // Our customizations to bootstrap go here.
 
 @black: #000;
 @text-color: @black;
 @font-size-base: 13px;
 @font-family-monospace: monospace;  // to allow user to customize their fonts
 @navbar-height: 36px;
 @breadcrumb-color: darken(@border_color, 30%);
 @blockquote-font-size: inherit;
-
-// Override the modal footer padding that BS3 uses.
-.modal-footer {
-  padding: 7px;
-}
+@modal-inner-padding: 15px;
 
 // Disable modal slide-in from top animation.
 .modal {
   &.fade .modal-dialog {
     .translate(0, 0);
   }
 }
 
 // Set the default code color.
 code {
   color: @black; // default code color in bootstrap is #d14 (crimson / amaranth)
 }
 
 // Override bootstrap pre element styling.
 pre {
   // bootstrap has pre defaults that we don't want to inherit.
   // start pre tag defaults based on the surrounding context instead.
   font-size: inherit;
   line-height: inherit;
 }
 
 // Disable bold labels in BS3
 label {
     font-weight: normal;
 }
 
 // Our own global variables for all pages go here
 

IPython/html/static/notebook/less/celltoolbar.less

@@ -1,48 +1,49
 /* CSS for the cell toolbar */
 @celltoolbar-height: 29px;
 
 .celltoolbar {
     border: thin solid #CFCFCF;
     border-bottom: none;
     background : #EEE;
     border-radius : 3px 3px 0px 0px;
     width:100%;
     -webkit-box-pack: end;
     height: @celltoolbar-height;
     padding-right: 4px;
     .hbox();
     .reverse();
 }
 
 .ctb_hideshow {
     display:none;
     vertical-align:bottom;
 }
 
 /* ctb_show is added to the ctb_hideshow div to show the cell toolbar.
    Cell toolbars are only shown when the ctb_global_show class is also set.
 */
 .ctb_global_show .ctb_show.ctb_hideshow {
     display: block;
 }
 
 .ctb_global_show .ctb_show + .input_area,
 .ctb_global_show .ctb_show + div.text_cell_input
 {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
 .celltoolbar {
     font-size: 87%;
     padding-top: 3px;
 }
 
 .celltoolbar select {
     font-size: 87%;
+    height: 22px;
 }
 
 .celltoolbar label {
     margin-left: 5px;
     margin-right: 5px;
 }