mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-24 12:05:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed IPython dialog

Browse Source
This commit is contained in:
jon 2014-04-17 16:05:35 -07:00 committed by Jonathan Frederic
parent 68cfaeb7c9
commit 0cc924e5e3
2 changed files with 46 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
IPython/html/static/base/js/dialog.js
View File

@ -15,16 +15,47 @@ IPython.dialog = (function (IPython) {
"use strict"; "use strict";
var modal = function (options) { var modal = function (options) {
var dialog = $("<div/>").addClass("modal").attr("role", "dialog"); // <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
dialog.append( // <div class="modal-dialog">
// <div class="modal-content">
// <div class="modal-header">
// <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
// <h4 class="modal-title" id="myModalLabel">Modal title</h4>
// </div>
// <div class="modal-body">
// ...
// </div>
// <div class="modal-footer">
// <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
// <button type="button" class="btn btn-primary">Save changes</button>
// </div>
// </div>
// </div>
// </div>
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/>") $("<div/>")
.addClass("modal-header") .addClass("modal-header")
.append($("<button>") .append($("<button>")
.attr("type", "button")
.addClass("close") .addClass("close")
.attr("data-dismiss", "modal") .attr("data-dismiss", "modal")
.attr("aria-hidden", "true")
.html("&times;") .html("&times;")
).append( ).append(
$("<h3/>").text(options.title || "") $("<h4/>")
.addClass('modal-title')
.text(options.title || "")
) )
).append( ).append(
$("<div/>").addClass("modal-body").append( $("<div/>").addClass("modal-body").append(
@ -41,31 +72,31 @@ IPython.dialog = (function (IPython) {
.attr("data-dismiss", "modal") .attr("data-dismiss", "modal")
.text(label); .text(label);
if (btn_opts.click) { if (btn_opts.click) {
button.click($.proxy(btn_opts.click, dialog)); button.click($.proxy(btn_opts.click, dialog_content));
} }
if (btn_opts.class) { if (btn_opts.class) {
button.addClass(btn_opts.class); button.addClass(btn_opts.class);
} }
footer.append(button); footer.append(button);
} }
dialog.append(footer); dialog_content.append(footer);
// hook up on-open event // hook up on-open event
dialog.on("shown", function() { modal.on("shown", function() {
setTimeout(function() { setTimeout(function() {
footer.find("button").last().focus(); footer.find("button").last().focus();
if (options.open) { if (options.open) {
$.proxy(options.open, dialog)(); $.proxy(options.open, modal)();
} }
}, 0); }, 0);
}); });
// destroy dialog on hide, unless explicitly asked not to // destroy modal on hide, unless explicitly asked not to
if (options.destroy === undefined || options.destroy) { if (options.destroy === undefined || options.destroy) {
dialog.on("hidden", function () { modal.on("hidden", function () {
dialog.remove(); modal.remove();
}); });
} }
dialog.on("hidden", function () { modal.on("hidden", function () {
if (IPython.notebook) { if (IPython.notebook) {
var cell = IPython.notebook.get_selected_cell(); var cell = IPython.notebook.get_selected_cell();
if (cell) cell.select(); if (cell) cell.select();
@ -78,7 +109,7 @@ IPython.dialog = (function (IPython) {
IPython.keyboard_manager.disable(); IPython.keyboard_manager.disable();
} }
return dialog.modal(options); return modal.modal(options);
}; };
var edit_metadata = function (md, callback, name) { var edit_metadata = function (md, callback, name) {

7
IPython/html/static/base/less/page.less
View File

@ -80,9 +80,9 @@ span#login_widget {
} }
// class for stretching dialogs to fill the screen // class for stretching dialogs to fill the screen
.modal_stretch { .modal_stretch .modal-dialog {
.vbox(); .vbox();
height: 80%; min-height: 80%;
.modal-body { .modal-body {
max-height: none; max-height: none;
flex: 1; flex: 1;
@ -90,9 +90,8 @@ span#login_widget {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.modal { .modal .modal-dialog {
width: 700px; width: 700px;
margin-left: -350px;
} }
} }