Show More
@@ -1,379 +1,399 b'' | |||||
1 | /** |
|
1 | /** | |
2 | * Primary styles |
|
2 | * Primary styles | |
3 | * |
|
3 | * | |
4 | * Author: IPython Development Team |
|
4 | * Author: IPython Development Team | |
5 | */ |
|
5 | */ | |
6 |
|
6 | |||
7 |
|
7 | |||
8 | body { |
|
8 | body { | |
9 | overflow: hidden; |
|
9 | overflow: hidden; | |
10 | } |
|
10 | } | |
11 |
|
11 | |||
12 | span#save_widget { |
|
12 | span#save_widget { | |
13 | padding: 5px; |
|
13 | padding: 5px; | |
14 | margin: 0px 0px 0px 300px; |
|
14 | margin: 0px 0px 0px 300px; | |
15 | display:inline-block; |
|
15 | display:inline-block; | |
16 | } |
|
16 | } | |
17 |
|
17 | |||
18 | span#notebook_name { |
|
18 | span#notebook_name { | |
19 | height: 1em; |
|
19 | height: 1em; | |
20 | line-height: 1em; |
|
20 | line-height: 1em; | |
21 | padding: 3px; |
|
21 | padding: 3px; | |
22 | border: none; |
|
22 | border: none; | |
23 | font-size: 146.5%; |
|
23 | font-size: 146.5%; | |
24 | } |
|
24 | } | |
25 |
|
25 | |||
26 | .ui-menubar-item .ui-button .ui-button-text { |
|
26 | .ui-menubar-item .ui-button .ui-button-text { | |
27 | padding: 0.4em 1.0em; |
|
27 | padding: 0.4em 1.0em; | |
28 | font-size: 100%; |
|
28 | font-size: 100%; | |
29 | } |
|
29 | } | |
30 |
|
30 | |||
31 | .ui-menu { |
|
31 | .ui-menu { | |
32 | -moz-box-shadow: 0px 6px 10px -1px #adadad; |
|
32 | -moz-box-shadow: 0px 6px 10px -1px #adadad; | |
33 | -webkit-box-shadow: 0px 6px 10px -1px #adadad; |
|
33 | -webkit-box-shadow: 0px 6px 10px -1px #adadad; | |
34 | box-shadow: 0px 6px 10px -1px #adadad; |
|
34 | box-shadow: 0px 6px 10px -1px #adadad; | |
35 | } |
|
35 | } | |
36 |
|
36 | |||
37 | .ui-menu .ui-menu-item a { |
|
37 | .ui-menu .ui-menu-item a { | |
38 | padding: 2px 1.6em; |
|
38 | padding: 2px 1.6em; | |
39 | } |
|
39 | } | |
40 |
|
40 | |||
41 | .ui-menu hr { |
|
41 | .ui-menu hr { | |
42 | margin: 0.3em 0; |
|
42 | margin: 0.3em 0; | |
43 | } |
|
43 | } | |
44 |
|
44 | |||
45 | #menubar_container { |
|
45 | #menubar_container { | |
46 | position: relative; |
|
46 | position: relative; | |
47 | } |
|
47 | } | |
48 |
|
48 | |||
49 | #notification { |
|
49 | #notification { | |
50 | position: absolute; |
|
50 | position: absolute; | |
51 | right: 3px; |
|
51 | right: 3px; | |
52 | top: 3px; |
|
52 | top: 3px; | |
53 | height: 25px; |
|
53 | height: 25px; | |
54 | padding: 3px 6px; |
|
54 | padding: 3px 6px; | |
55 | z-index: 10; |
|
55 | z-index: 10; | |
56 | } |
|
56 | } | |
57 |
|
57 | |||
58 | #toolbar { |
|
58 | #toolbar { | |
59 | padding: 3px 15px; |
|
59 | padding: 3px 15px; | |
60 | } |
|
60 | } | |
61 |
|
61 | |||
62 | #cell_type { |
|
62 | #cell_type { | |
63 | font-size: 85%; |
|
63 | font-size: 85%; | |
64 | } |
|
64 | } | |
65 |
|
65 | |||
66 |
|
66 | |||
67 | div#main_app { |
|
67 | div#main_app { | |
68 | width: 100%; |
|
68 | width: 100%; | |
69 | position: relative; |
|
69 | position: relative; | |
70 | } |
|
70 | } | |
71 |
|
71 | |||
72 | span#quick_help_area { |
|
72 | span#quick_help_area { | |
73 | position: static; |
|
73 | position: static; | |
74 | padding: 5px 0px; |
|
74 | padding: 5px 0px; | |
75 | margin: 0px 0px 0px 0px; |
|
75 | margin: 0px 0px 0px 0px; | |
76 | } |
|
76 | } | |
77 |
|
77 | |||
78 | .help_string { |
|
78 | .help_string { | |
79 | float: right; |
|
79 | float: right; | |
80 | width: 170px; |
|
80 | width: 170px; | |
81 | padding: 0px 5px; |
|
81 | padding: 0px 5px; | |
82 | text-align: left; |
|
82 | text-align: left; | |
83 | font-size: 85%; |
|
83 | font-size: 85%; | |
84 | } |
|
84 | } | |
85 |
|
85 | |||
86 | .help_string_label { |
|
86 | .help_string_label { | |
87 | float: right; |
|
87 | float: right; | |
88 | font-size: 85%; |
|
88 | font-size: 85%; | |
89 | } |
|
89 | } | |
90 |
|
90 | |||
91 | div#notebook_panel { |
|
91 | div#notebook_panel { | |
92 | margin: 0px 0px 0px 0px; |
|
92 | margin: 0px 0px 0px 0px; | |
93 | padding: 0px; |
|
93 | padding: 0px; | |
94 | } |
|
94 | } | |
95 |
|
95 | |||
96 | div#notebook { |
|
96 | div#notebook { | |
97 | overflow-y: scroll; |
|
97 | overflow-y: scroll; | |
98 | overflow-x: auto; |
|
98 | overflow-x: auto; | |
99 | width: 100%; |
|
99 | width: 100%; | |
100 | /* This spaces the cell away from the edge of the notebook area */ |
|
100 | /* This spaces the cell away from the edge of the notebook area */ | |
101 | padding: 5px 5px 15px 5px; |
|
101 | padding: 5px 5px 15px 5px; | |
102 | margin: 0px |
|
102 | margin: 0px | |
103 | background-color: white; |
|
103 | background-color: white; | |
104 | } |
|
104 | } | |
105 |
|
105 | |||
106 | div#pager_splitter { |
|
106 | div#pager_splitter { | |
107 | height: 8px; |
|
107 | height: 8px; | |
108 | } |
|
108 | } | |
109 |
|
109 | |||
110 | div#pager { |
|
110 | div#pager { | |
111 | padding: 15px; |
|
111 | padding: 15px; | |
112 | overflow: auto; |
|
112 | overflow: auto; | |
113 | display: none; |
|
113 | display: none; | |
114 | } |
|
114 | } | |
115 |
|
115 | |||
116 | div.cell { |
|
116 | div.cell { | |
117 | width: 100%; |
|
117 | width: 100%; | |
118 | padding: 5px 5px 5px 0px; |
|
118 | padding: 5px 5px 5px 0px; | |
119 | /* This acts as a spacer between cells, that is outside the border */ |
|
119 | /* This acts as a spacer between cells, that is outside the border */ | |
120 | margin: 2px 0px 2px 0px; |
|
120 | margin: 2px 0px 2px 0px; | |
121 | } |
|
121 | } | |
122 |
|
122 | |||
123 | div.code_cell { |
|
123 | div.code_cell { | |
124 | background-color: white; |
|
124 | background-color: white; | |
125 | } |
|
125 | } | |
126 | /* any special styling for code cells that are currently running goes here */ |
|
126 | /* any special styling for code cells that are currently running goes here */ | |
127 | div.code_cell.running { |
|
127 | div.code_cell.running { | |
128 | } |
|
128 | } | |
129 |
|
129 | |||
130 | div.prompt { |
|
130 | div.prompt { | |
131 | /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */ |
|
131 | /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */ | |
132 | width: 11ex; |
|
132 | width: 11ex; | |
133 | /* This 0.4em is tuned to match the padding on the CodeMirror editor. */ |
|
133 | /* This 0.4em is tuned to match the padding on the CodeMirror editor. */ | |
134 | padding: 0.4em; |
|
134 | padding: 0.4em; | |
135 | margin: 0px; |
|
135 | margin: 0px; | |
136 | font-family: monospace; |
|
136 | font-family: monospace; | |
137 | text-align:right; |
|
137 | text-align:right; | |
138 | } |
|
138 | } | |
139 |
|
139 | |||
140 | div.input { |
|
140 | div.input { | |
141 | page-break-inside: avoid; |
|
141 | page-break-inside: avoid; | |
142 | } |
|
142 | } | |
143 |
|
143 | |||
144 | /* input_area and input_prompt must match in top border and margin for alignment */ |
|
144 | /* input_area and input_prompt must match in top border and margin for alignment */ | |
145 | div.input_area { |
|
145 | div.input_area { | |
146 | color: black; |
|
146 | color: black; | |
147 | border: 1px solid #ddd; |
|
147 | border: 1px solid #ddd; | |
148 | border-radius: 3px; |
|
148 | border-radius: 3px; | |
149 | background: #f7f7f7; |
|
149 | background: #f7f7f7; | |
150 | } |
|
150 | } | |
151 |
|
151 | |||
152 | div.input_prompt { |
|
152 | div.input_prompt { | |
153 | color: navy; |
|
153 | color: navy; | |
154 | border-top: 1px solid transparent; |
|
154 | border-top: 1px solid transparent; | |
155 | } |
|
155 | } | |
156 |
|
156 | |||
157 | div.output { |
|
157 | div.output { | |
158 | /* This is a spacer between the input and output of each cell */ |
|
158 | /* This is a spacer between the input and output of each cell */ | |
159 | margin-top: 5px; |
|
159 | margin-top: 5px; | |
160 | } |
|
160 | } | |
161 |
|
161 | |||
162 | div.output_prompt { |
|
162 | div.output_prompt { | |
163 | color: darkred; |
|
163 | color: darkred; | |
164 | } |
|
164 | } | |
165 |
|
165 | |||
166 | /* This class is the outer container of all output sections. */ |
|
166 | /* This class is the outer container of all output sections. */ | |
167 | div.output_area { |
|
167 | div.output_area { | |
168 | padding: 0px; |
|
168 | padding: 0px; | |
169 | page-break-inside: avoid; |
|
169 | page-break-inside: avoid; | |
170 | } |
|
170 | } | |
171 |
|
171 | |||
172 | /* This class is for the output subarea inside the output_area and after |
|
172 | /* This class is for the output subarea inside the output_area and after | |
173 | the prompt div. */ |
|
173 | the prompt div. */ | |
174 | div.output_subarea { |
|
174 | div.output_subarea { | |
175 | padding: 0.4em 6.1em 0.4em 0.4em; |
|
175 | padding: 0.4em 6.1em 0.4em 0.4em; | |
176 | } |
|
176 | } | |
177 |
|
177 | |||
178 | /* The rest of the output_* classes are for special styling of the different |
|
178 | /* The rest of the output_* classes are for special styling of the different | |
179 | output types */ |
|
179 | output types */ | |
180 |
|
180 | |||
181 | /* all text output has this class: */ |
|
181 | /* all text output has this class: */ | |
182 | div.output_text { |
|
182 | div.output_text { | |
183 | text-align: left; |
|
183 | text-align: left; | |
184 | color: black; |
|
184 | color: black; | |
185 | font-family: monospace; |
|
185 | font-family: monospace; | |
186 | } |
|
186 | } | |
187 |
|
187 | |||
188 | /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */ |
|
188 | /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */ | |
189 | div.output_stream { |
|
189 | div.output_stream { | |
190 | padding-top: 0.0em; |
|
190 | padding-top: 0.0em; | |
191 | padding-bottom: 0.0em; |
|
191 | padding-bottom: 0.0em; | |
192 | } |
|
192 | } | |
193 | div.output_stdout { |
|
193 | div.output_stdout { | |
194 | } |
|
194 | } | |
195 | div.output_stderr { |
|
195 | div.output_stderr { | |
196 | background: #fdd; /* very light red background for stderr */ |
|
196 | background: #fdd; /* very light red background for stderr */ | |
197 | } |
|
197 | } | |
198 |
|
198 | |||
199 | div.output_latex { |
|
199 | div.output_latex { | |
200 | text-align: left; |
|
200 | text-align: left; | |
201 | color: black; |
|
201 | color: black; | |
202 | } |
|
202 | } | |
203 |
|
203 | |||
204 | div.output_html { |
|
204 | div.output_html { | |
205 | } |
|
205 | } | |
206 |
|
206 | |||
207 | div.output_png { |
|
207 | div.output_png { | |
208 | } |
|
208 | } | |
209 |
|
209 | |||
210 | div.output_jpeg { |
|
210 | div.output_jpeg { | |
211 | } |
|
211 | } | |
212 |
|
212 | |||
213 | div.text_cell { |
|
213 | div.text_cell { | |
214 | background-color: white; |
|
214 | background-color: white; | |
215 | padding: 5px 5px 5px 5px; |
|
215 | padding: 5px 5px 5px 5px; | |
216 | } |
|
216 | } | |
217 |
|
217 | |||
218 | div.text_cell_input { |
|
218 | div.text_cell_input { | |
219 | color: black; |
|
219 | color: black; | |
220 | border: 1px solid #ddd; |
|
220 | border: 1px solid #ddd; | |
221 | border-radius: 3px; |
|
221 | border-radius: 3px; | |
222 | background: #f7f7f7; |
|
222 | background: #f7f7f7; | |
223 | } |
|
223 | } | |
224 |
|
224 | |||
225 | div.text_cell_render { |
|
225 | div.text_cell_render { | |
226 | font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; |
|
226 | font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; | |
227 | outline: none; |
|
227 | outline: none; | |
228 | resize: none; |
|
228 | resize: none; | |
229 | width: inherit; |
|
229 | width: inherit; | |
230 | border-style: none; |
|
230 | border-style: none; | |
231 | padding: 5px; |
|
231 | padding: 5px; | |
232 | color: black; |
|
232 | color: black; | |
233 | } |
|
233 | } | |
234 |
|
234 | |||
235 | .CodeMirror { |
|
235 | .CodeMirror { | |
236 | line-height: 1.231; /* Changed from 1em to our global default */ |
|
236 | line-height: 1.231; /* Changed from 1em to our global default */ | |
237 | } |
|
237 | } | |
238 |
|
238 | |||
239 | .CodeMirror-scroll { |
|
239 | .CodeMirror-scroll { | |
240 | height: auto; /* Changed to auto to autogrow */ |
|
240 | height: auto; /* Changed to auto to autogrow */ | |
241 | /* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/ |
|
241 | /* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/ | |
242 | /* We have found that if it is visible, vertical scrollbars appear with font size changes.*/ |
|
242 | /* We have found that if it is visible, vertical scrollbars appear with font size changes.*/ | |
243 | overflow-y: hidden; |
|
243 | overflow-y: hidden; | |
244 | overflow-x: auto; /* Changed from auto to remove scrollbar */ |
|
244 | overflow-x: auto; /* Changed from auto to remove scrollbar */ | |
245 | } |
|
245 | } | |
246 |
|
246 | |||
247 | /* CSS font colors for translated ANSI colors. */ |
|
247 | /* CSS font colors for translated ANSI colors. */ | |
248 |
|
248 | |||
249 |
|
249 | |||
250 | .ansiblack {color: black;} |
|
250 | .ansiblack {color: black;} | |
251 | .ansired {color: darkred;} |
|
251 | .ansired {color: darkred;} | |
252 | .ansigreen {color: darkgreen;} |
|
252 | .ansigreen {color: darkgreen;} | |
253 | .ansiyellow {color: brown;} |
|
253 | .ansiyellow {color: brown;} | |
254 | .ansiblue {color: darkblue;} |
|
254 | .ansiblue {color: darkblue;} | |
255 | .ansipurple {color: darkviolet;} |
|
255 | .ansipurple {color: darkviolet;} | |
256 | .ansicyan {color: steelblue;} |
|
256 | .ansicyan {color: steelblue;} | |
257 | .ansigrey {color: grey;} |
|
257 | .ansigrey {color: grey;} | |
258 | .ansibold {font-weight: bold;} |
|
258 | .ansibold {font-weight: bold;} | |
259 |
|
259 | |||
260 | .completions , .tooltip { |
|
260 | .completions , .tooltip { | |
261 | position: absolute; |
|
261 | position: absolute; | |
262 | z-index: 10; |
|
262 | z-index: 10; | |
263 | overflow: auto; |
|
263 | overflow: auto; | |
264 | border: 1px solid black; |
|
264 | border: 1px solid black; | |
265 | } |
|
265 | } | |
266 |
|
266 | |||
267 | .completions select { |
|
267 | .completions select { | |
268 | background: white; |
|
268 | background: white; | |
269 | outline: none; |
|
269 | outline: none; | |
270 | border: none; |
|
270 | border: none; | |
271 | padding: 0px; |
|
271 | padding: 0px; | |
272 | margin: 0px; |
|
272 | margin: 0px; | |
273 | font-family: monospace; |
|
273 | font-family: monospace; | |
274 | } |
|
274 | } | |
275 |
|
275 | |||
276 | option.context { |
|
276 | option.context { | |
277 | background-color: #DEF7FF; |
|
277 | background-color: #DEF7FF; | |
278 | } |
|
278 | } | |
279 | option.introspection { |
|
279 | option.introspection { | |
280 | background-color: #EBF4EB; |
|
280 | background-color: #EBF4EB; | |
281 | } |
|
281 | } | |
282 |
|
282 | |||
283 | @-moz-keyframes fadeIn { |
|
283 | @-moz-keyframes fadeIn { | |
284 | from {opacity:0;} |
|
284 | from {opacity:0;} | |
285 | to {opacity:1;} |
|
285 | to {opacity:1;} | |
286 | } |
|
286 | } | |
287 |
|
287 | |||
288 | @-webkit-keyframes fadeIn { |
|
288 | @-webkit-keyframes fadeIn { | |
289 | from {opacity:0;} |
|
289 | from {opacity:0;} | |
290 | to {opacity:1;} |
|
290 | to {opacity:1;} | |
291 | } |
|
291 | } | |
292 |
|
292 | |||
293 | @keyframes fadeIn { |
|
293 | @keyframes fadeIn { | |
294 | from {opacity:0;} |
|
294 | from {opacity:0;} | |
295 | to {opacity:1;} |
|
295 | to {opacity:1;} | |
296 | } |
|
296 | } | |
297 |
|
297 | |||
298 | /*"close" "expand" and "Open in pager button" of |
|
298 | /*"close" "expand" and "Open in pager button" of | |
299 | /* the tooltip*/ |
|
299 | /* the tooltip*/ | |
300 | .tooltip a { |
|
300 | .tooltip a { | |
301 | float:right; |
|
301 | float:right; | |
302 | } |
|
302 | } | |
303 |
|
303 | |||
304 | /*properties of tooltip after "expand"*/ |
|
304 | /*properties of tooltip after "expand"*/ | |
305 | .bigtooltip { |
|
305 | .bigtooltip { | |
306 | height:30%; |
|
306 | height:30%; | |
307 | } |
|
307 | } | |
308 |
|
308 | |||
309 | /*properties of tooltip before "expand"*/ |
|
309 | /*properties of tooltip before "expand"*/ | |
310 | .smalltooltip { |
|
310 | .smalltooltip { | |
311 | text-overflow: ellipsis; |
|
311 | text-overflow: ellipsis; | |
312 | overflow: hidden; |
|
312 | overflow: hidden; | |
313 | height:15%; |
|
313 | height:15%; | |
314 | } |
|
314 | } | |
315 |
|
315 | |||
316 | .tooltip { |
|
316 | .tooltip { | |
317 | /*transition when "expand"ing tooltip */ |
|
317 | /*transition when "expand"ing tooltip */ | |
|
318 | font-size: 14px; | |||
318 | -webkit-transition-property: height; |
|
319 | -webkit-transition-property: height; | |
319 | -webkit-transition-duration: 1s; |
|
320 | -webkit-transition-duration: 1s; | |
320 | -moz-transition-property: height; |
|
321 | -moz-transition-property: height; | |
321 | -moz-transition-duration: 1s; |
|
322 | -moz-transition-duration: 1s; | |
322 | transition-property: height; |
|
323 | transition-property: height; | |
323 | transition-duration: 1s; |
|
324 | transition-duration: 1s; | |
324 | max-width:700px; |
|
325 | max-width:700px; | |
325 | border-radius: 0px 10px 10px 10px; |
|
326 | border-radius: 0px 10px 10px 10px; | |
326 | box-shadow: 3px 3px 5px #999; |
|
327 | box-shadow: 3px 3px 5px #999; | |
327 | /*fade-in animation when inserted*/ |
|
328 | /*fade-in animation when inserted*/ | |
328 | -webkit-animation: fadeIn 200ms; |
|
329 | -webkit-animation: fadeIn 200ms; | |
329 | -moz-animation: fadeIn 200ms; |
|
330 | -moz-animation: fadeIn 200ms; | |
330 | animation: fadeIn 200ms; |
|
331 | animation: fadeIn 200ms; | |
331 | vertical-align: middle; |
|
332 | vertical-align: middle; | |
332 | background: #FDFDD8; |
|
333 | ||
|
334 | background-image: linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); | |||
|
335 | background-image: -o-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); | |||
|
336 | background-image: -ms-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); | |||
|
337 | background-image: -moz-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); | |||
|
338 | background-image: -webkit-linear-gradient(bottom, rgb(215,215,215) 13%, rgb(210,210,210) 39%, rgb(227,227,227) 56%, rgb(247,247,247) 91%); | |||
|
339 | ||||
|
340 | background-image: -webkit-gradient( | |||
|
341 | linear, | |||
|
342 | left bottom, | |||
|
343 | left top, | |||
|
344 | color-stop(0.13, rgb(215,215,215)), | |||
|
345 | color-stop(0.39, rgb(210,210,210)), | |||
|
346 | color-stop(0.56, rgb(227,227,227)), | |||
|
347 | color-stop(0.91, rgb(247,247,247)) | |||
|
348 | ); | |||
|
349 | ||||
|
350 | color: #000; | |||
|
351 | border-color: #BBB; | |||
333 | outline: none; |
|
352 | outline: none; | |
334 | padding: 3px; |
|
353 | padding: 3px; | |
335 | margin: 0px; |
|
354 | margin: 0px; | |
|
355 | padding-left:7px; | |||
336 | font-family: monospace; |
|
356 | font-family: monospace; | |
337 | min-height:50px; |
|
357 | min-height:50px; | |
338 | } |
|
358 | } | |
339 |
|
359 | |||
340 | /*fixed part of the completion*/ |
|
360 | /*fixed part of the completion*/ | |
341 | .completions p b { |
|
361 | .completions p b { | |
342 | font-weight:bold; |
|
362 | font-weight:bold; | |
343 | } |
|
363 | } | |
344 |
|
364 | |||
345 | .completions p { |
|
365 | .completions p { | |
346 | background: #DDF; |
|
366 | background: #DDF; | |
347 | /*outline: none; |
|
367 | /*outline: none; | |
348 | padding: 0px;*/ |
|
368 | padding: 0px;*/ | |
349 | border-bottom: black solid 1px; |
|
369 | border-bottom: black solid 1px; | |
350 | padding: 1px; |
|
370 | padding: 1px; | |
351 | font-family: monospace; |
|
371 | font-family: monospace; | |
352 | } |
|
372 | } | |
353 |
|
373 | |||
354 | pre.dialog { |
|
374 | pre.dialog { | |
355 | background-color: #f7f7f7; |
|
375 | background-color: #f7f7f7; | |
356 | border: 1px solid #ddd; |
|
376 | border: 1px solid #ddd; | |
357 | border-radius: 3px; |
|
377 | border-radius: 3px; | |
358 | padding: 0.4em; |
|
378 | padding: 0.4em; | |
359 | padding-left: 2em; |
|
379 | padding-left: 2em; | |
360 | } |
|
380 | } | |
361 |
|
381 | |||
362 | p.dialog { |
|
382 | p.dialog { | |
363 | padding : 0.2em; |
|
383 | padding : 0.2em; | |
364 | } |
|
384 | } | |
365 |
|
385 | |||
366 | .shortcut_key { |
|
386 | .shortcut_key { | |
367 | display: inline-block; |
|
387 | display: inline-block; | |
368 | width: 15ex; |
|
388 | width: 15ex; | |
369 | text-align: right; |
|
389 | text-align: right; | |
370 | font-family: monospace; |
|
390 | font-family: monospace; | |
371 | } |
|
391 | } | |
372 |
|
392 | |||
373 | .shortcut_descr { |
|
393 | .shortcut_descr { | |
374 | } |
|
394 | } | |
375 |
|
395 | |||
376 | /* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems |
|
396 | /* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems | |
377 | to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do. |
|
397 | to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do. | |
378 | */ |
|
398 | */ | |
379 | pre, code, kbd, samp { white-space: pre-wrap; } |
|
399 | pre, code, kbd, samp { white-space: pre-wrap; } |
@@ -1,108 +1,112 b'' | |||||
1 | //---------------------------------------------------------------------------- |
|
1 | //---------------------------------------------------------------------------- | |
2 | // Copyright (C) 2008-2011 The IPython Development Team |
|
2 | // Copyright (C) 2008-2011 The IPython Development Team | |
3 | // |
|
3 | // | |
4 | // Distributed under the terms of the BSD License. The full license is in |
|
4 | // Distributed under the terms of the BSD License. The full license is in | |
5 | // the file COPYING, distributed as part of this software. |
|
5 | // the file COPYING, distributed as part of this software. | |
6 | //---------------------------------------------------------------------------- |
|
6 | //---------------------------------------------------------------------------- | |
7 |
|
7 | |||
8 | //============================================================================ |
|
8 | //============================================================================ | |
9 | // Tooltip |
|
9 | // Tooltip | |
10 | //============================================================================ |
|
10 | //============================================================================ | |
11 |
|
11 | |||
12 | var IPython = (function (IPython) { |
|
12 | var IPython = (function (IPython) { | |
13 |
|
13 | |||
14 | var utils = IPython.utils; |
|
14 | var utils = IPython.utils; | |
15 |
|
15 | |||
16 | var Tooltip = function (notebook) { |
|
16 | var Tooltip = function (notebook) { | |
17 | this.tooltip = $('#tooltip'); |
|
17 | this.tooltip = $('#tooltip'); | |
18 | this.text = $('<pre/>') |
|
18 | this.text = $('<pre/>') | |
|
19 | this.text.html('something'); | |||
|
20 | this.tooltip.css('left',50+'px'); | |||
|
21 | this.tooltip.css('top',50+'px'); | |||
|
22 | this.tooltip.append(this.text); | |||
19 | }; |
|
23 | }; | |
20 |
|
24 | |||
21 |
|
25 | |||
22 |
|
26 | |||
23 | //TODO, try to diminish the number of parameters. |
|
27 | //TODO, try to diminish the number of parameters. | |
24 | Tooltip.prototype.request_tooltip_after_time = function (pre_cursor,time){ |
|
28 | Tooltip.prototype.request_tooltip_after_time = function (pre_cursor,time){ | |
25 | }; |
|
29 | }; | |
26 |
|
30 | |||
27 |
|
31 | |||
28 | Tooltip.prototype.remove_and_cancel_tooltip = function() { |
|
32 | Tooltip.prototype.remove_and_cancel_tooltip = function() { | |
29 | // note that we don't handle closing directly inside the calltip |
|
33 | // note that we don't handle closing directly inside the calltip | |
30 | // as in the completer, because it is not focusable, so won't |
|
34 | // as in the completer, because it is not focusable, so won't | |
31 | // get the event. |
|
35 | // get the event. | |
32 | if (this.tooltip_timeout != null){ |
|
36 | if (this.tooltip_timeout != null){ | |
33 | clearTimeout(this.tooltip_timeout); |
|
37 | clearTimeout(this.tooltip_timeout); | |
34 | $('#tooltip').remove(); |
|
38 | $('#tooltip').remove(); | |
35 | this.tooltip_timeout = null; |
|
39 | this.tooltip_timeout = null; | |
36 | } |
|
40 | } | |
37 | } |
|
41 | } | |
38 | Tooltip.prototype.show = function() |
|
42 | Tooltip.prototype.show = function() | |
39 | { |
|
43 | { | |
40 | this.tooltip.removeClass('hidden'); |
|
44 | this.tooltip.removeClass('hidden'); | |
41 | } |
|
45 | } | |
42 |
|
46 | |||
43 | Tooltip.prototype.showInPager = function(){ |
|
47 | Tooltip.prototype.showInPager = function(){ | |
44 | var msg_id = IPython.notebook.kernel.execute(name+"?"); |
|
48 | var msg_id = IPython.notebook.kernel.execute(name+"?"); | |
45 | IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.get_selected_cell().cell_id; |
|
49 | IPython.notebook.msg_cell_map[msg_id] = IPython.notebook.get_selected_cell().cell_id; | |
46 | that.remove_and_cancel_tooltip(); |
|
50 | that.remove_and_cancel_tooltip(); | |
47 | setTimeout(function(){that.code_mirror.focus();}, 50); |
|
51 | setTimeout(function(){that.code_mirror.focus();}, 50); | |
48 | } |
|
52 | } | |
49 |
|
53 | |||
50 | Tooltip.prototype.finish_tooltip = function (reply) { |
|
54 | Tooltip.prototype.finish_tooltip = function (reply) { | |
51 |
|
55 | |||
52 | var expandlink=$('<a/>').attr('href',"#"); |
|
56 | var expandlink=$('<a/>').attr('href',"#"); | |
53 | expandlink.addClass("ui-corner-all"); //rounded corner |
|
57 | expandlink.addClass("ui-corner-all"); //rounded corner | |
54 | expandlink.attr('role',"button"); |
|
58 | expandlink.attr('role',"button"); | |
55 |
|
59 | |||
56 | var expandspan=$('<span/>').text('Expand'); |
|
60 | var expandspan=$('<span/>').text('Expand'); | |
57 | expandspan.addClass('ui-icon'); |
|
61 | expandspan.addClass('ui-icon'); | |
58 | expandspan.addClass('ui-icon-plus'); |
|
62 | expandspan.addClass('ui-icon-plus'); | |
59 |
|
63 | |||
60 | expandlink.append(expandspan); |
|
64 | expandlink.append(expandspan); | |
61 | expandlink.attr('id','expanbutton'); |
|
65 | expandlink.attr('id','expanbutton'); | |
62 | expandlink.click(function(){ |
|
66 | expandlink.click(function(){ | |
63 | tooltip.removeClass('smalltooltip'); |
|
67 | tooltip.removeClass('smalltooltip'); | |
64 | tooltip.addClass('bigtooltip'); |
|
68 | tooltip.addClass('bigtooltip'); | |
65 | $('#expanbutton').remove(); |
|
69 | $('#expanbutton').remove(); | |
66 | setTimeout(function(){that.code_mirror.focus();}, 50); |
|
70 | setTimeout(function(){that.code_mirror.focus();}, 50); | |
67 | }); |
|
71 | }); | |
68 |
|
72 | |||
69 | var morelink=$('<a/>').attr('href',"#"); |
|
73 | var morelink=$('<a/>').attr('href',"#"); | |
70 | morelink.attr('role',"button"); |
|
74 | morelink.attr('role',"button"); | |
71 | morelink.addClass('ui-button'); |
|
75 | morelink.addClass('ui-button'); | |
72 | var morespan=$('<span/>').text('Open in Pager'); |
|
76 | var morespan=$('<span/>').text('Open in Pager'); | |
73 | morespan.addClass('ui-icon'); |
|
77 | morespan.addClass('ui-icon'); | |
74 | morespan.addClass('ui-icon-arrowstop-l-n'); |
|
78 | morespan.addClass('ui-icon-arrowstop-l-n'); | |
75 | morelink.append(morespan); |
|
79 | morelink.append(morespan); | |
76 | morelink.click(function(){ |
|
80 | morelink.click(function(){ | |
77 | this.showInPager(); |
|
81 | this.showInPager(); | |
78 | }); |
|
82 | }); | |
79 |
|
83 | |||
80 |
|
84 | |||
81 | var closelink=$('<a/>').attr('href',"#"); |
|
85 | var closelink=$('<a/>').attr('href',"#"); | |
82 | closelink.attr('role',"button"); |
|
86 | closelink.attr('role',"button"); | |
83 | closelink.addClass('ui-button'); |
|
87 | closelink.addClass('ui-button'); | |
84 |
|
88 | |||
85 | var closespan=$('<span/>').text('Close'); |
|
89 | var closespan=$('<span/>').text('Close'); | |
86 | closespan.addClass('ui-icon'); |
|
90 | closespan.addClass('ui-icon'); | |
87 | closespan.addClass('ui-icon-close'); |
|
91 | closespan.addClass('ui-icon-close'); | |
88 | closelink.append(closespan); |
|
92 | closelink.append(closespan); | |
89 | closelink.click(function(){ |
|
93 | closelink.click(function(){ | |
90 | that.remove_and_cancel_tooltip(); |
|
94 | that.remove_and_cancel_tooltip(); | |
91 | setTimeout(function(){that.code_mirror.focus();}, 50); |
|
95 | setTimeout(function(){that.code_mirror.focus();}, 50); | |
92 | }); |
|
96 | }); | |
93 | //construct the tooltip |
|
97 | //construct the tooltip | |
94 | tooltip.append(closelink); |
|
98 | tooltip.append(closelink); | |
95 | tooltip.append(expandlink); |
|
99 | tooltip.append(expandlink); | |
96 | tooltip.append(morelink); |
|
100 | tooltip.append(morelink); | |
97 |
|
101 | |||
98 | var pos = this.code_mirror.cursorCoords(); |
|
102 | var pos = this.code_mirror.cursorCoords(); | |
99 | tooltip.css('left',pos.x+'px'); |
|
103 | tooltip.css('left',pos.x+'px'); | |
100 | tooltip.css('top',pos.yBot+'px'); |
|
104 | tooltip.css('top',pos.yBot+'px'); | |
101 |
|
105 | |||
102 | }; |
|
106 | }; | |
103 |
|
107 | |||
104 |
|
108 | |||
105 | IPython.Tooltip = Tooltip; |
|
109 | IPython.Tooltip = Tooltip; | |
106 |
|
110 | |||
107 | return IPython; |
|
111 | return IPython; | |
108 | }(IPython)); |
|
112 | }(IPython)); |
General Comments 0
You need to be logged in to leave comments.
Login now