From 8cda9a7b048ead55fa78bddb30b9244687db9424 2013-11-20 22:50:06
From: MinRK <benjaminrk@gmail.com>
Date: 2013-11-20 22:50:06
Subject: [PATCH] tweak global hide/show
make hierarchical rather than either/or. Also, don't use the same class name for the outer and inner css classes.
---
diff --git a/IPython/html/static/notebook/js/celltoolbar.js b/IPython/html/static/notebook/js/celltoolbar.js
index 9c43f0d..21ad9ac 100644
--- a/IPython/html/static/notebook/js/celltoolbar.js
+++ b/IPython/html/static/notebook/js/celltoolbar.js
@@ -37,37 +37,39 @@ var IPython = (function (IPython) {
this.inner_element = $('<div/>').addClass('celltoolbar')
this.element = $('<div/>').addClass('ctb_hideshow')
.append(this.inner_element);
+ this.show();
};
// The default css style for the outer celltoolbar div
- // (ctb_hideshow) is display: none. We add the ctb_show
- // class to either 1) the body to show all cell's toolbars
- // or 2) to the individual celltoolbar divs to show just one
- // cell's toolbar.
+ // (ctb_hideshow) is display: none.
+ // To show the cell toolbar, *both* of the following conditions must be met:
+ // - A parent container has class `ctb_global_show`
+ // - The celltoolbar has the class `ctb_show`
+ // This allows global show/hide, as well as per-cell show/hide.
CellToolbar.global_hide = function () {
- $('body').removeClass('ctb_show');
- }
+ $('body').removeClass('ctb_global_show');
+ };
CellToolbar.global_show = function () {
- $('body').addClass('ctb_show');
- }
+ $('body').addClass('ctb_global_show');
+ };
CellToolbar.prototype.hide = function () {
this.element.removeClass('ctb_show');
- }
+ };
CellToolbar.prototype.show = function () {
this.element.addClass('ctb_show');
- }
+ };
/**
- * Class variable that should contain a dict of all availlable callback
+ * Class variable that should contain a dict of all available callback
* we need to think of wether or not we allow nested namespace
* @property _callback_dict
* @private
diff --git a/IPython/html/static/notebook/less/celltoolbar.less b/IPython/html/static/notebook/less/celltoolbar.less
index 4c1ef6b..057b40b 100644
--- a/IPython/html/static/notebook/less/celltoolbar.less
+++ b/IPython/html/static/notebook/less/celltoolbar.less
@@ -1,12 +1,10 @@
-/* Css for the metadata edit area */
-
+/* CSS for the cell toolbar */
.celltoolbar {
border: thin solid #CFCFCF;
border-bottom: none;
background : #EEE;
- border-top-right-radius: 3px;
- border-top-left-radius: 3px;
+ border-radius : 3px 3px 0px 0px;
width:100%;
-webkit-box-pack: end;
height:22px;
@@ -14,20 +12,6 @@
.reverse();
}
-
-.no_input_radius {
- border-top-right-radius: 0px;
- border-top-left-radius: 0px;
-}
-
-.text_cell .ctb_prompt {
- display: none;
-}
-
-.code_cell .ctb_prompt {
- display: block;
-}
-
.ctb_hideshow {
display:none;
vertical-align:bottom;
@@ -38,41 +22,21 @@
padding-top: 0px;
}
-.ctb_area {
- margin:0;
- padding:0;
- width:100%;
-}
-
-
-/*ctb_show is added to either body or the ctb_hideshow div to show
-all or one cell's toolbars.
+/* 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_show.ctb_hideshow, .ctb_show .ctb_hideshow {
- display:block;
+.ctb_global_show .ctb_show.ctb_hideshow {
+ display: block;
}
-.ctb_show .input_area,
-.ctb_show .ctb_hideshow + div.text_cell_input {
+.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;
}
-.ctb_show > .celltoolbar {
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 0px;
-}
-
-.button_container {
- margin-top:0;
- margin-bottom:0;
-}
-
-
-.ui-button {
- min-width:30px;
-}
.celltoolbar .button_container select {
margin: 10px;
margin-top: 1px;
@@ -108,4 +72,5 @@ all or one cell's toolbars.
border: none;
vertical-align:top;
height:20px;
+ min-width:30px;
}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 817ba73..ae9f27b 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -1537,23 +1537,16 @@ pre,code,kbd,samp{white-space:pre-wrap;}
#fonttest{font-family:monospace;}
p{margin-bottom:0;}
.end_space{height:200px;}
-.celltoolbar{border:thin solid #CFCFCF;border-bottom:none;background:#EEE;border-top-right-radius:3px;border-top-left-radius:3px;width:100%;-webkit-box-pack:end;height:22px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;}
-.no_input_radius{border-top-right-radius:0px;border-top-left-radius:0px;}
-.text_cell .ctb_prompt{display:none;}
-.code_cell .ctb_prompt{display:block;}
+.celltoolbar{border:thin solid #CFCFCF;border-bottom:none;background:#EEE;border-radius:3px 3px 0px 0px;width:100%;-webkit-box-pack:end;height:22px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;}
.ctb_hideshow{display:none;vertical-align:bottom;padding-right:2px;}
.celltoolbar>div{padding-top:0px;}
-.ctb_area{margin:0;padding:0;width:100%;}
-.ctb_show.ctb_hideshow,.ctb_show .ctb_hideshow{display:block;}
-.ctb_show .input_area,.ctb_show .ctb_hideshow+div.text_cell_input{border-top-right-radius:0px;border-top-left-radius:0px;}
-.ctb_show>.celltoolbar{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}
-.button_container{margin-top:0;margin-bottom:0;}
-.ui-button{min-width:30px;}
+.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 .button_container select{margin:10px;margin-top:1px;margin-bottom:0px;padding:0;font-size:87%;width:auto;display:inline-block;height:18px;line-height:18px;vertical-align:top;}
.celltoolbar label{display:inline-block;height:15px;line-height:15px;vertical-align:top;}
.celltoolbar label span{font-size:85%;}
.celltoolbar input[type=checkbox]{margin:0px;margin-left:4px;margin-right:4px;}
-.celltoolbar .ui-button{border:none;vertical-align:top;height:20px;}
+.celltoolbar .ui-button{border:none;vertical-align:top;height:20px;min-width:30px;}
.completions{position:absolute;z-index:10;overflow:hidden;border:1px solid #ababab;border-radius:4px;-webkit-box-shadow:0px 6px 10px -1px #adadad;-moz-box-shadow:0px 6px 10px -1px #adadad;box-shadow:0px 6px 10px -1px #adadad;}
.completions select{background:white;outline:none;border:none;padding:0px;margin:0px;overflow:auto;font-family:monospace;font-size:110%;color:#000000;}
.completions select option.context{color:#0064cd;}