Skip to content

Commit 788c8c9

Browse files
crbatesmdboom
crbates
authored and
mdboom
committed
Make the html backend prettier with ipython's css and switch port to 8988
1 parent 8f414b4 commit 788c8c9

26 files changed

+376
-44
lines changed

‎Untitled0.ipynb‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"metadata": {
3+
"name": "Untitled0"
4+
},
5+
"nbformat": 3,
6+
"nbformat_minor": 0,
7+
"worksheets": []
8+
}

‎lib/matplotlib/backends/backend_webagg.py‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,15 @@ class NavigationToolbar2WebAgg(backend_bases.NavigationToolbar2):
307307
]
308308

309309
def _init_toolbar(self):
310+
jqueryui_icons = ['ui-icon ui-icon-home',
311+
'ui-icon ui-icon-circle-arrow-w',
312+
'ui-icon ui-icon-circle-arrow-e', None,
313+
'ui-icon ui-icon-arrow-4',
314+
'ui-icon ui-icon-search',
315+
'ui-icon ui-icon-disk']
316+
for index, item in enumerate(self.toolitems):
317+
if item[0] is not None:
318+
self.toolitems[index]=(item[0],item[1],jqueryui_icons[index],item[3])
310319
self.message = ''
311320
self.cursor = 0
312321

@@ -436,6 +445,18 @@ def __init__(self):
436445
(r'/images/(.*)', tornado.web.StaticFileHandler,
437446
{'path':
438447
os.path.join(os.path.dirname(__file__), '../mpl-data/images')}),
448+
(r'/static/jquery/css/themes/base/(.*)', tornado.web.StaticFileHandler,
449+
{'path':
450+
os.path.join(os.path.dirname(__file__), 'web_static/jquery/css/themes/base')}),
451+
(r'/static/jquery/css/themes/base/images/(.*)', tornado.web.StaticFileHandler,
452+
{'path':
453+
os.path.join(os.path.dirname(__file__), 'web_static/jquery/css/themes/base/images')}),
454+
(r'/static/jquery/js/(.*)', tornado.web.StaticFileHandler,
455+
{'path':
456+
os.path.join(os.path.dirname(__file__), 'web_static/jquery/js')}),
457+
(r'/static/css/(.*)', tornado.web.StaticFileHandler,
458+
{'path':
459+
os.path.join(os.path.dirname(__file__), 'web_static/css')}),
439460
# An MPL favicon
440461
(r'/favicon.ico', self.FavIcon),
441462
# The page that contains all of the pieces

‎lib/matplotlib/backends/web_static/css/boilerplate.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* HTML5 ✰ Boilerplate
3+
*
4+
* style.css contains a reset, font normalization and some base styles.
5+
*
6+
* Credit is left where credit is due.
7+
* Much inspiration was taken from these projects:
8+
* - yui.yahooapis.com/2.8.1/build/base/base.css
9+
* - camendesign.com/design/
10+
* - praegnanz.de/weblog/htmlcssjs-kickstart
11+
*/
12+
13+
14+
/**
15+
* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
16+
* v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
17+
* html5doctor.com/html-5-reset-stylesheet/
18+
*/
19+
20+
html, body, div, span, object, iframe,
21+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
22+
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
23+
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
24+
fieldset, form, label, legend,
25+
table, caption, tbody, tfoot, thead, tr, th, td,
26+
article, aside, canvas, details, figcaption, figure,
27+
footer, header, hgroup, menu, nav, section, summary,
28+
time, mark, audio, video {
29+
margin: 0;
30+
padding: 0;
31+
border: 0;
32+
font-size: 100%;
33+
font: inherit;
34+
vertical-align: baseline;
35+
}
36+
37+
sup { vertical-align: super; }
38+
sub { vertical-align: sub; }
39+
40+
article, aside, details, figcaption, figure,
41+
footer, header, hgroup, menu, nav, section {
42+
display: block;
43+
}
44+
45+
blockquote, q { quotes: none; }
46+
47+
blockquote:before, blockquote:after,
48+
q:before, q:after { content: ""; content: none; }
49+
50+
ins { background-color: #ff9; color: #000; text-decoration: none; }
51+
52+
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
53+
54+
del { text-decoration: line-through; }
55+
56+
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
57+
58+
table { border-collapse: collapse; border-spacing: 0; }
59+
60+
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
61+
62+
input, select { vertical-align: middle; }
63+
64+
65+
/**
66+
* Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
67+
*/
68+
69+
body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
70+
select, input, textarea, button { font:99% sans-serif; }
71+
72+
/* Normalize monospace sizing:
73+
en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
74+
pre, code, kbd, samp { font-family: monospace, sans-serif; }
75+
76+
em,i { font-style: italic; }
77+
b,strong { font-weight: bold; }

‎lib/matplotlib/backends/web_static/css/fbm.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
2+
/* Flexible box model classes */
3+
/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
4+
5+
.hbox {
6+
display: -webkit-box;
7+
-webkit-box-orient: horizontal;
8+
-webkit-box-align: stretch;
9+
10+
display: -moz-box;
11+
-moz-box-orient: horizontal;
12+
-moz-box-align: stretch;
13+
14+
display: box;
15+
box-orient: horizontal;
16+
box-align: stretch;
17+
}
18+
19+
.hbox > * {
20+
-webkit-box-flex: 0;
21+
-moz-box-flex: 0;
22+
box-flex: 0;
23+
}
24+
25+
.vbox {
26+
display: -webkit-box;
27+
-webkit-box-orient: vertical;
28+
-webkit-box-align: stretch;
29+
30+
display: -moz-box;
31+
-moz-box-orient: vertical;
32+
-moz-box-align: stretch;
33+
34+
display: box;
35+
box-orient: vertical;
36+
box-align: stretch;
37+
}
38+
39+
.vbox > * {
40+
-webkit-box-flex: 0;
41+
-moz-box-flex: 0;
42+
box-flex: 0;
43+
}
44+
45+
.reverse {
46+
-webkit-box-direction: reverse;
47+
-moz-box-direction: reverse;
48+
box-direction: reverse;
49+
}
50+
51+
.box-flex0 {
52+
-webkit-box-flex: 0;
53+
-moz-box-flex: 0;
54+
box-flex: 0;
55+
}
56+
57+
.box-flex1, .box-flex {
58+
-webkit-box-flex: 1;
59+
-moz-box-flex: 1;
60+
box-flex: 1;
61+
}
62+
63+
.box-flex2 {
64+
-webkit-box-flex: 2;
65+
-moz-box-flex: 2;
66+
box-flex: 2;
67+
}
68+
69+
.box-group1 {
70+
-webkit-box-flex-group: 1;
71+
-moz-box-flex-group: 1;
72+
box-flex-group: 1;
73+
}
74+
75+
.box-group2 {
76+
-webkit-box-flex-group: 2;
77+
-moz-box-flex-group: 2;
78+
box-flex-group: 2;
79+
}
80+
81+
.start {
82+
-webkit-box-pack: start;
83+
-moz-box-pack: start;
84+
box-pack: start;
85+
}
86+
87+
.end {
88+
-webkit-box-pack: end;
89+
-moz-box-pack: end;
90+
box-pack: end;
91+
}
92+
93+
.center {
94+
-webkit-box-pack: center;
95+
-moz-box-pack: center;
96+
box-pack: center;
97+
}

‎lib/matplotlib/backends/web_static/css/page.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* Primary styles
3+
*
4+
* Author: IPython Development Team
5+
*/
6+
7+
8+
body {
9+
background-color: white;
10+
/* This makes sure that the body covers the entire window and needs to
11+
be in a different element than the display: box in wrapper below */
12+
position: absolute;
13+
left: 0px;
14+
right: 0px;
15+
top: 0px;
16+
bottom: 0px;
17+
overflow: visible;
18+
}
19+
20+
21+
div#header {
22+
/* Initially hidden to prevent FLOUC */
23+
display: none;
24+
position: relative;
25+
height: 40px;
26+
padding: 5px;
27+
margin: 0px;
28+
width: 100%;
29+
}
30+
31+
span#ipython_notebook {
32+
position: absolute;
33+
padding: 2px 2px 2px 5px;
34+
}
35+
36+
span#ipython_notebook img {
37+
font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
38+
height: 24px;
39+
text-decoration:none;
40+
display: inline;
41+
color: black;
42+
}
43+
44+
#site {
45+
width: 100%;
46+
display: none;
47+
}
48+
49+
/* We set the fonts by hand here to override the values in the theme */
50+
.ui-widget {
51+
font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
52+
}
53+
54+
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
55+
font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
56+
}
57+
58+
/* Smaller buttons */
59+
.ui-button .ui-button-text {
60+
padding: 0.2em 0.8em;
61+
font-size: 77%;
62+
}
63+
64+
input.ui-button {
65+
padding: 0.3em 0.9em;
66+
}
67+
68+
span#login_widget {
69+
float: right;
70+
}
71+
72+
.border-box-sizing {
73+
box-sizing: border-box;
74+
-moz-box-sizing: border-box;
75+
-webkit-box-sizing: border-box;
76+
}
77+

‎lib/matplotlib/backends/web_static/index.html‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<html>
22
<head>
33
<script src="/static/mpl.js"></script>
4-
<link href="/static/mpl.css" rel="stylesheet" type="text/css">
4+
<link rel="stylesheet" href="/static/css/page.css" type="text/css">
5+
<link rel="stylesheet" href="/static/css/boilerplate.css" type="text/css" />
6+
<link rel="stylesheet" href="/static/css/fbm.css" type="text/css" />
7+
<link rel="stylesheet" href="/static/jquery/css/themes/base/jquery-ui.min.css" >
8+
<script src="/static/jquery/js/jquery-1.7.1.min.js"></script>
9+
<script src="/static/jquery/js/jquery-ui.min.js"></script>
510
</head>
611
<body
712
onkeydown="key_event(event, 'key_press')"
813
onkeyup="key_event(event, 'key_release')">
9-
<div id="mpl-div">
14+
<div style="margin-left: auto ; margin-right: auto ; width: 800px;">
1015
<div id="mpl-warnings" class="mpl-warnings">
1116
</div>
1217

@@ -27,30 +32,33 @@
2732
</canvas>
2833
</div>
2934

30-
<div id="toolbar">
35+
<div id="toolbar" class="ui-widget ui-widget-content"
36+
style="border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none;">
3137
{% for name, tooltip, image, method in toolitems %}
3238
{% if name is None %}
33-
<span class="mpl-toolbar-spacer"></span>
39+
<span style='width: 0.1em'></span>
3440
{% else %}
3541
<button id="{{ name }}"
36-
class="mpl-toolbar-button"
3742
onclick="toolbar_button_onclick('{{ method }}');"
38-
onmouseover="toolbar_button_onmouseover('{{ tooltip }}');"
39-
role="button">
40-
<img src="/images/{{ image }}.png" width="24" height="24"
41-
alt="{{ tooltip }}"/>
43+
role="button"
44+
style="margin-top: 0px;"
45+
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
46+
<span class="ui-button-icon-primary ui-icon {{ image }} ui-corner-all"></span>
47+
<span class="ui-button-text">{{ tooltip }}</span>
4248
</button>
4349
{% end %}
4450
{% end %}
45-
<select id="mpl-format" class="mpl-toolbar-option">
46-
{% for filetype, extensions in sorted(canvas.get_supported_filetypes_grouped().items()) %}
47-
<option value="{{ extensions[0] }}"
48-
{% if extensions[0] == canvas.get_default_filetype() %}
49-
selected
50-
{% end %}
51-
>{{filetype}} ({{", ".join(extensions)}})</option>
52-
{% end %}
53-
</select>
51+
<span>
52+
<select id="mpl-format" class="mpl-toolbar-option ui-widget ui-widget-content" style="margin-top: 0px;">
53+
{% for filetype, extensions in sorted(canvas.get_supported_filetypes_grouped().items()) %}
54+
<option value="{{ extensions[0] }}"
55+
{% if extensions[0] == canvas.get_default_filetype() %}
56+
selected
57+
{% end %}
58+
>{{filetype}} ({{", ".join(extensions)}})</option>
59+
{% end %}
60+
</select>
61+
</span>
5462
<span id="mpl-message" class="mpl-message"/>
5563
</div>
5664
</div>

‎lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png‎

180 Bytes
Loading

‎lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_flat_75_ffffff_40x100.png‎

178 Bytes
Loading

‎lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png‎

120 Bytes
Loading

‎lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_glass_65_ffffff_1x400.png‎

105 Bytes
Loading

0 commit comments

Comments
 (0)