##// END OF EJS Templates
Fixing styling issues with CellToolbar....
Brian E. Granger -
Show More
@@ -1,34 +1,26 b''
1 /*Css for the metadata edit area*/
1 /* Css for the metadata edit area */
2
2
3
3 .celltoolbar{
4 .celltoolbar {
4 border:thin solid #DDD;
5 border: thin solid #DDD;
5 margin-left:81px;
6 margin-left: 0px;
6 border-bottom:none;
7 border-bottom: none;
7 background : #EEE;
8 background : #EEE;
8 border-top-right-radius: 3px;
9 border-top-right-radius: 3px;
9 border-top-left-radius: 3px;
10 border-top-left-radius: 3px;
10 display:none;
11 }
12
13 .code_cell .celltoolbar{
14 margin-left:81px;
15 }
11 }
16
12
17 .text_cell .celltoolbar{
13 .no_input_radius {
18 margin-left:0px;
19 }
20
21 .celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{
22 border-top-right-radius: 0px;
14 border-top-right-radius: 0px;
23 border-top-left-radius: 0px;
15 border-top-left-radius: 0px;
24 }
16 }
25
17
26 .celltoolbar-on .celltoolbar {
18 .text_cell .ctb_prompt {
27 display:block;
19 display: none;
28 }
20 }
29
21
30 .celltoolbar ui-button {
22 .code_cell .ctb_prompt {
31 border :none;
23 display: block;
32 }
24 }
33
25
34 .button_container {
26 .button_container {
@@ -40,14 +32,22 b''
40 border : none;
32 border : none;
41 }
33 }
42
34
43 .celltoolbar select {
35 .celltoolbar .button_container select {
44 margin:10px;
36 margin: 10px;
45 margin-top:0px;
37 margin-top: 0px;
46 margin-bottom:0px;
38 margin-bottom: 0px;
39 font-size: 77%;
40 }
41
42 .celltoolbar label span {
43 font-size: 77%;
47 }
44 }
48
45
49 .celltoolbar input[type=checkbox] {
46 .celltoolbar input[type=checkbox] {
50 margin-bottom:1px;
47 margin-bottom: 1px;
48 }
51
49
50 .celltoolbar ui-button {
51 border: none;
52 }
52 }
53
53
@@ -51,7 +51,6 b' var IPython = (function (IPython) {'
51 * @method create_element
51 * @method create_element
52 */
52 */
53 Cell.prototype.create_element = function () {
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 var IPython = (function (IPython) {
19 var IPython = (function (IPython) {
20 "use strict";
20 "use strict";
21
21
22
23 /**
22 /**
24 * @constructor
23 * @constructor
25 * @class CellToolbar
24 * @class CellToolbar
@@ -27,30 +26,54 b' var IPython = (function (IPython) {'
27 */
26 */
28 var CellToolbar = function (cell) {
27 var CellToolbar = function (cell) {
29 CellToolbar._instances.push(this);
28 CellToolbar._instances.push(this);
30 this.inner_element = $('<div/>');
31 this.cell = cell;
29 this.cell = cell;
32 this.element = $('<div/>').addClass('celltoolbar')
30 this.create_element();
33 .append(this.inner_element)
34 this.rebuild();
31 this.rebuild();
35 return this;
32 return this;
36 };
33 };
37
34
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 this.element = $('<div/>').addClass('ctb_wrapper hbox');
41 ctb_element.addClass('box-flex1');
42 var ctb_prompt = $('<div/>').addClass('ctb_prompt prompt');
43 this.element.append(ctb_prompt).append(ctb_element);
44 };
45
46
38 CellToolbar.dropdown_preset_element = $('<select/>')
47 CellToolbar.dropdown_preset_element = $('<select/>')
39 .addClass('ui-widget ui-widget-content')
48 .addClass('ui-widget ui-widget-content')
40 .attr('id', 'celltoolbar_selector')
49 .attr('id', 'celltoolbar_selector')
41 .append($('<option/>').attr('value', '').text('None'))
50 .append($('<option/>').attr('value', '').text('None'))
42
51
52
43 CellToolbar.dropdown_preset_element.change(function(){
53 CellToolbar.dropdown_preset_element.change(function() {
44 var val = CellToolbar.dropdown_preset_element.val()
54 var val = CellToolbar.dropdown_preset_element.val()
45 if(val ==''){
55 if(val ==''){
46 $('body').removeClass('celltoolbar-on')
56 CellToolbar.hide();
47 } else {
57 } else {
48 $('body').addClass('celltoolbar-on')
58 CellToolbar.show();
49 CellToolbar.activate_preset(val)
59 CellToolbar.activate_preset(val);
50 }
60 }
51 })
61 })
52
62
53
63
64 CellToolbar.hide = function () {
65 $('.ctb_wrapper').hide();
66 $('.input_area').addClass('no_input_radius');
67 $('.text_cell_input').addClass('no_input_radius');
68 }
69
70
71 CellToolbar.show = function () {
72 $('.ctb_wrapper').show();
73 $('.input_area').removeClass('no_input_radius');
74 $('.text_cell_input').removeClass('no_input_radius');
75 }
76
54
77
55 /**
78 /**
56 * Class variable that should contain a dict of all availlable callback
79 * Class variable that should contain a dict of all availlable callback
@@ -274,7 +297,7 b' var IPython = (function (IPython) {'
274 var button_container = $(div)
297 var button_container = $(div)
275
298
276 var chkb = $('<input/>').attr('type', 'checkbox');
299 var chkb = $('<input/>').attr('type', 'checkbox');
277 var lbl = $('<label/>').append($('<span/>').text(name).css('font-size', '77%'));
300 var lbl = $('<label/>').append($('<span/>').text(name));
278 lbl.append(chkb);
301 lbl.append(chkb);
279 chkb.attr("checked", getter(cell));
302 chkb.attr("checked", getter(cell));
280
303
@@ -334,8 +357,8 b' var IPython = (function (IPython) {'
334 label= label? label: "";
357 label= label? label: "";
335 return function(div, cell) {
358 return function(div, cell) {
336 var button_container = $(div)
359 var button_container = $(div)
337 var lbl = $("<label/>").append($('<span/>').text(label).css('font-size', '77%'));
360 var lbl = $("<label/>").append($('<span/>').text(label));
338 var select = $('<select/>');
361 var select = $('<select/>').addClass('ui-widget ui-widget-content');
339 for(var itemn in list_list){
362 for(var itemn in list_list){
340 var opt = $('<option/>');
363 var opt = $('<option/>');
341 opt.attr('value', list_list[itemn][1])
364 opt.attr('value', list_list[itemn][1])
@@ -61,8 +61,11 b' var IPython = (function (IPython) {'
61 IPython.Cell.prototype.create_element.apply(this, arguments);
61 IPython.Cell.prototype.create_element.apply(this, arguments);
62
62
63 var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
63 var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
64 cell.append(this.celltoolbar.element);
65 cell.attr('tabindex','2');
64 cell.attr('tabindex','2');
65
66 this.celltoolbar = new IPython.CellToolbar(this);
67 cell.append(this.celltoolbar.element);
68
66 var input = $('<div></div>').addClass('input hbox');
69 var input = $('<div></div>').addClass('input hbox');
67 input.append($('<div/>').addClass('prompt input_prompt'));
70 input.append($('<div/>').addClass('prompt input_prompt'));
68 var input_area = $('<div/>').addClass('input_area box-flex1');
71 var input_area = $('<div/>').addClass('input_area box-flex1');
@@ -44,8 +44,9 b' var IPython = (function (IPython) {'
44 TextCell.prototype.create_element = function () {
44 TextCell.prototype.create_element = function () {
45 IPython.Cell.prototype.create_element.apply(this, arguments);
45 IPython.Cell.prototype.create_element.apply(this, arguments);
46 var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
46 var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
47 cell.append(this.celltoolbar.element);
48 cell.attr('tabindex','2');
47 cell.attr('tabindex','2');
48 this.celltoolbar = new IPython.CellToolbar(this);
49 cell.append(this.celltoolbar.element);
49 var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
50 var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
50 this.code_mirror = CodeMirror(input_area.get(0), {
51 this.code_mirror = CodeMirror(input_area.get(0), {
51 indentUnit : 4,
52 indentUnit : 4,
General Comments 0
You need to be logged in to leave comments. Login now