Thanks to visit codestin.com
Credit goes to github.com

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

Lines changed: 376 additions & 44 deletions

‎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)