##// END OF EJS Templates
Merge pull request #2789 from ellisonbg/celltoolbar-style...
Brian E. Granger -
r9161:7ac1eef8 merge
parent child Browse files
Show More
@@ -1,38 +1,52 b''
1 /*Css for the metadata edit area*/
1 /* Css for the metadata edit area */
2 2
3 .celltoolbar{
4 border:thin solid #DDD;
5 margin-left:81px;
6 border-bottom:none;
3
4 .celltoolbar {
5 border: thin solid #DDD;
6 margin-left: 0px;
7 border-bottom: none;
7 8 background : #EEE;
8 9 border-top-right-radius: 3px;
9 10 border-top-left-radius: 3px;
10 display:none;
11 11 }
12 12
13 .code_cell .celltoolbar{
14 margin-left:81px;
13 .no_input_radius {
14 border-top-right-radius: 0px;
15 border-top-left-radius: 0px;
15 16 }
16 17
17 .text_cell .celltoolbar{
18 margin-left:0px;
18 .text_cell .ctb_prompt {
19 display: none;
19 20 }
20 21
21 .celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{
22 border-top-right-radius: 0px;
23 border-top-left-radius: 0px;
22 .code_cell .ctb_prompt {
23 display: block;
24 24 }
25 25
26 .celltoolbar-on .celltoolbar {
27 display:block;
26 .ctb_hideshow {
27 display: none;
28 28 }
29 29
30 .celltoolbar ui-button {
31 border :none;
30 /*ctb_show is added to either body or the ctb_hideshow div to show
31 all or one cell's toolbars.
32 */
33 .ctb_show.ctb_hideshow, .ctb_show .ctb_hideshow {
34 display: block;
35 }
36
37 .ctb_show .ctb_hideshow + div > div.input_area,
38 .ctb_show .ctb_hideshow + div.text_cell_input {
39 border-top-right-radius: 0px;
40 border-top-left-radius: 0px;
41 }
42
43 .ctb_show > .celltoolbar {
44 border-bottom-right-radius: 0px;
45 border-bottom-left-radius: 0px;
32 46 }
33 47
34 48 .button_container {
35 float:right;
49 float: right;
36 50 }
37 51
38 52 .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
@@ -40,14 +54,22 b''
40 54 border : none;
41 55 }
42 56
43 .celltoolbar select {
44 margin:10px;
45 margin-top:0px;
46 margin-bottom:0px;
57 .celltoolbar .button_container select {
58 margin: 10px;
59 margin-top: 0px;
60 margin-bottom: 0px;
61 font-size: 77%;
62 }
63
64 .celltoolbar label span {
65 font-size: 77%;
47 66 }
48 67
49 68 .celltoolbar input[type=checkbox] {
50 margin-bottom:1px;
69 margin-bottom: 1px;
70 }
51 71
72 .celltoolbar ui-button {
73 border: none;
52 74 }
53 75
@@ -51,7 +51,6 b' var IPython = (function (IPython) {'
51 51 * @method create_element
52 52 */
53 53 Cell.prototype.create_element = function () {
54 this.celltoolbar = new IPython.CellToolbar(this);
55 54 };
56 55
57 56
@@ -19,7 +19,6 b''
19 19 var IPython = (function (IPython) {
20 20 "use strict";
21 21
22
23 22 /**
24 23 * @constructor
25 24 * @class CellToolbar
@@ -27,30 +26,51 b' var IPython = (function (IPython) {'
27 26 */
28 27 var CellToolbar = function (cell) {
29 28 CellToolbar._instances.push(this);
30 this.inner_element = $('<div/>');
31 29 this.cell = cell;
32 this.element = $('<div/>').addClass('celltoolbar')
33 .append(this.inner_element)
30 this.create_element();
34 31 this.rebuild();
35 32 return this;
36 33 };
37 34
38 CellToolbar.dropdown_preset_element = $('<select/>')
39 .addClass('ui-widget ui-widget-content')
40 .attr('id', 'celltoolbar_selector')
41 .append($('<option/>').attr('value', '').text('None'))
42
43 CellToolbar.dropdown_preset_element.change(function(){
44 var val = CellToolbar.dropdown_preset_element.val()
45 if(val ==''){
46 $('body').removeClass('celltoolbar-on')
47 } else {
48 $('body').addClass('celltoolbar-on')
49 CellToolbar.activate_preset(val)
50 }
51 })
35
36 CellToolbar.prototype.create_element = function () {
37 this.inner_element = $('<div/>');
38 var ctb_element = $('<div/>').addClass('celltoolbar')
39 .append(this.inner_element);
40 ctb_element.addClass('box-flex1');
41 var ctb_area = $('<div/>').addClass('ctb_area hbox');
42 var ctb_prompt = $('<div/>').addClass('ctb_prompt prompt');
43 ctb_area.append(ctb_prompt).append(ctb_element);
44 this.element = $('<div/>').addClass('ctb_hideshow')
45 .append(ctb_area);
46 };
47
48
49 // The default css style for the outer celltoolbar div
50 // (ctb_hideshow) is display: none. We add the ctb_show
51 // class to either 1) the body to show all cell's toolbars
52 // or 2) to the individual celltoolbar divs to show just one
53 // cell's toolbar.
54
55 CellToolbar.global_hide = function () {
56 $('body').removeClass('ctb_show');
57 }
52 58
53 59
60 CellToolbar.global_show = function () {
61 $('body').addClass('ctb_show');
62 }
63
64
65 CellToolbar.prototype.hide = function () {
66 this.element.removeClass('ctb_show');
67 }
68
69
70 CellToolbar.prototype.show = function () {
71 this.element.addClass('ctb_show');
72 }
73
54 74
55 75 /**
56 76 * Class variable that should contain a dict of all availlable callback
@@ -62,6 +82,7 b' var IPython = (function (IPython) {'
62 82 */
63 83 CellToolbar._callback_dict = {};
64 84
85
65 86 /**
66 87 * Class variable that should contain the reverse order list of the button
67 88 * to add to the toolbar of each cell
@@ -72,6 +93,7 b' var IPython = (function (IPython) {'
72 93 */
73 94 CellToolbar._ui_controls_list = [];
74 95
96
75 97 /**
76 98 * Class variable that should contains the CellToolbar instances for each
77 99 * cell of the notebook
@@ -83,6 +105,7 b' var IPython = (function (IPython) {'
83 105 */
84 106 CellToolbar._instances =[]
85 107
108
86 109 /**
87 110 * keep a list of all the availlabel presets for the toolbar
88 111 * @private
@@ -92,6 +115,7 b' var IPython = (function (IPython) {'
92 115 */
93 116 CellToolbar._presets ={}
94 117
118
95 119 // this is by design not a prototype.
96 120 /**
97 121 * Register a callback to create an UI element in a cell toolbar.
@@ -139,6 +163,7 b' var IPython = (function (IPython) {'
139 163 CellToolbar._callback_dict[name] = callback;
140 164 };
141 165
166
142 167 /**
143 168 * Register a preset of UI element in a cell toolbar.
144 169 * Not supported Yet.
@@ -160,12 +185,28 b' var IPython = (function (IPython) {'
160 185 * CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5'])
161 186 * CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5'])
162 187 */
163 CellToolbar.register_preset = function(name, preset_list){
188 CellToolbar.register_preset = function(name, preset_list) {
164 189 CellToolbar._presets[name] = preset_list
165 CellToolbar.dropdown_preset_element.append(
166 $('<option/>').attr('value', name).text(name)
167 )
168 }
190 $([IPython.events]).trigger('preset_added.CellToolbar', {name: name});
191 };
192
193
194 /**
195 * List the names of the presets that are currently registered.
196 *
197 * @method list_presets
198 * @static
199 */
200 CellToolbar.list_presets = function() {
201 var keys = [];
202 for (var k in CellToolbar._presets) {
203 keys.push(k);
204 }
205 console.log(keys);
206 return keys;
207 };
208
209
169 210 /**
170 211 * Activate an UI preset from `register_preset`
171 212 *
@@ -190,7 +231,6 b' var IPython = (function (IPython) {'
190 231 }
191 232
192 233
193 // this is by design not a prototype.
194 234 /**
195 235 * This should be called on the class and not on a instance as it will trigger
196 236 * rebuild of all the instances.
@@ -224,7 +264,6 b' var IPython = (function (IPython) {'
224 264 this.inner_element.append(local_div)
225 265 cdict[preset[index]](local_div, this.cell)
226 266 }
227
228 267 }
229 268
230 269
@@ -232,6 +271,7 b' var IPython = (function (IPython) {'
232 271 */
233 272 CellToolbar.utils = {};
234 273
274
235 275 /**
236 276 * A utility function to generate bindings between a checkbox and cell/metadata
237 277 * @method utils.checkbox_ui_generator
@@ -274,7 +314,7 b' var IPython = (function (IPython) {'
274 314 var button_container = $(div)
275 315
276 316 var chkb = $('<input/>').attr('type', 'checkbox');
277 var lbl = $('<label/>').append($('<span/>').text(name).css('font-size', '77%'));
317 var lbl = $('<label/>').append($('<span/>').text(name));
278 318 lbl.append(chkb);
279 319 chkb.attr("checked", getter(cell));
280 320
@@ -288,6 +328,7 b' var IPython = (function (IPython) {'
288 328 }
289 329 }
290 330
331
291 332 /**
292 333 * A utility function to generate bindings between a dropdown list cell
293 334 * @method utils.select_ui_generator
@@ -334,8 +375,8 b' var IPython = (function (IPython) {'
334 375 label= label? label: "";
335 376 return function(div, cell) {
336 377 var button_container = $(div)
337 var lbl = $("<label/>").append($('<span/>').text(label).css('font-size', '77%'));
338 var select = $('<select/>');
378 var lbl = $("<label/>").append($('<span/>').text(label));
379 var select = $('<select/>').addClass('ui-widget ui-widget-content');
339 380 for(var itemn in list_list){
340 381 var opt = $('<option/>');
341 382 opt.attr('value', list_list[itemn][1])
@@ -89,6 +89,6 b''
89 89 example_preset.push('default.rawedit');
90 90
91 91 CellToolbar.register_preset('Default',example_preset);
92 console.log('Default extension for metadata editting loaded.');
92 console.log('Default extension for metadata editing loaded.');
93 93
94 94 }(IPython));
@@ -61,8 +61,11 b' var IPython = (function (IPython) {'
61 61 IPython.Cell.prototype.create_element.apply(this, arguments);
62 62
63 63 var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
64 cell.append(this.celltoolbar.element);
65 64 cell.attr('tabindex','2');
65
66 this.celltoolbar = new IPython.CellToolbar(this);
67 cell.append(this.celltoolbar.element);
68
66 69 var input = $('<div></div>').addClass('input hbox');
67 70 input.append($('<div/>').addClass('prompt input_prompt'));
68 71 var input_area = $('<div/>').addClass('input_area box-flex1');
@@ -12,14 +12,11 b''
12 12 var IPython = (function (IPython) {
13 13
14 14 var MainToolBar = function (selector) {
15 this.selector = selector;
16 15 IPython.ToolBar.apply(this, arguments);
17 16 this.construct();
18 this.add_drop_down_list();
17 this.add_celltype_list();
18 this.add_celltoolbar_list();
19 19 this.bind_events();
20 $(this.selector)
21 .append($('<label/>').text('Cell Toolbar:'))
22 .append(IPython.CellToolbar.dropdown_preset_element)
23 20 };
24 21
25 22 MainToolBar.prototype = new IPython.ToolBar();
@@ -120,23 +117,54 b' var IPython = (function (IPython) {'
120 117 ],'run_int');
121 118 };
122 119
123 MainToolBar.prototype.add_drop_down_list = function () {
124 var select = $(this.selector)
120 MainToolBar.prototype.add_celltype_list = function () {
121 this.element
125 122 .append($('<select/>')
126 123 .attr('id','cell_type')
127 .addClass('ui-widget ui-widget-content')
128 .append($('<option/>').attr('value','code').text('Code'))
129 .append($('<option/>').attr('value','markdown').text('Markdown'))
130 .append($('<option/>').attr('value','raw').text('Raw Text'))
131 .append($('<option/>').attr('value','heading1').text('Heading 1'))
132 .append($('<option/>').attr('value','heading2').text('Heading 2'))
133 .append($('<option/>').attr('value','heading3').text('Heading 3'))
134 .append($('<option/>').attr('value','heading4').text('Heading 4'))
135 .append($('<option/>').attr('value','heading5').text('Heading 5'))
136 .append($('<option/>').attr('value','heading6').text('Heading 6'))
137 );
124 .addClass('ui-widget-content')
125 .append($('<option/>').attr('value','code').text('Code'))
126 .append($('<option/>').attr('value','markdown').text('Markdown'))
127 .append($('<option/>').attr('value','raw').text('Raw Text'))
128 .append($('<option/>').attr('value','heading1').text('Heading 1'))
129 .append($('<option/>').attr('value','heading2').text('Heading 2'))
130 .append($('<option/>').attr('value','heading3').text('Heading 3'))
131 .append($('<option/>').attr('value','heading4').text('Heading 4'))
132 .append($('<option/>').attr('value','heading5').text('Heading 5'))
133 .append($('<option/>').attr('value','heading6').text('Heading 6'))
134 );
138 135 };
139 136
137
138 MainToolBar.prototype.add_celltoolbar_list = function () {
139 var label = $('<label/>').text('Cell Toolbar:');
140 var select = $('<select/>')
141 .addClass('ui-widget-content')
142 .attr('id', 'ctb_select')
143 .append($('<option/>').attr('value', '').text('None'));
144 this.element.append(label).append(select);
145 select.change(function() {
146 var val = $(this).val()
147 if (val =='') {
148 IPython.CellToolbar.global_hide();
149 } else {
150 IPython.CellToolbar.global_show();
151 IPython.CellToolbar.activate_preset(val);
152 }
153 });
154 // Setup the currently registered presets.
155 var presets = IPython.CellToolbar.list_presets();
156 for (var i=0; i<presets.length; i++) {
157 var name = presets[i];
158 select.append($('<option/>').attr('value', name).text(name));
159 }
160 // Setup future preset registrations.
161 $([IPython.events]).on('preset_added.CellToolbar', function (event, data) {
162 var name = data.name;
163 select.append($('<option/>').attr('value', name).text(name));
164 });
165 };
166
167
140 168 MainToolBar.prototype.bind_events = function () {
141 169 var that = this;
142 170
@@ -44,8 +44,11 b' var IPython = (function (IPython) {'
44 44 TextCell.prototype.create_element = function () {
45 45 IPython.Cell.prototype.create_element.apply(this, arguments);
46 46 var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
47 cell.append(this.celltoolbar.element);
48 47 cell.attr('tabindex','2');
48
49 this.celltoolbar = new IPython.CellToolbar(this);
50 cell.append(this.celltoolbar.element);
51
49 52 var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
50 53 this.code_mirror = CodeMirror(input_area.get(0), {
51 54 indentUnit : 4,
General Comments 0
You need to be logged in to leave comments. Login now