Permalink
Browse files

Make the html backend prettier with ipython's css and switch port to …

…8988
  • Loading branch information...
1 parent 8f414b4 commit 788c8c9886063632e800b7fb4550c27547f65e4c @crbates crbates committed with mdboom Dec 17, 2012
Showing with 376 additions and 44 deletions.
  1. +8 −0 Untitled0.ipynb
  2. +21 −0 lib/matplotlib/backends/backend_webagg.py
  3. +77 −0 lib/matplotlib/backends/web_static/css/boilerplate.css
  4. +97 −0 lib/matplotlib/backends/web_static/css/fbm.css
  5. +77 −0 lib/matplotlib/backends/web_static/css/page.css
  6. +26 −18 lib/matplotlib/backends/web_static/index.html
  7. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png
  8. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_flat_75_ffffff_40x100.png
  9. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png
  10. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_glass_65_ffffff_1x400.png
  11. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_glass_75_dadada_1x400.png
  12. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png
  13. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png
  14. BIN ...lotlib/backends/web_static/jquery/css/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png
  15. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-icons_222222_256x240.png
  16. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-icons_2e83ff_256x240.png
  17. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-icons_454545_256x240.png
  18. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-icons_888888_256x240.png
  19. BIN lib/matplotlib/backends/web_static/jquery/css/themes/base/images/ui-icons_cd0a0a_256x240.png
  20. +1 −0 lib/matplotlib/backends/web_static/jquery/css/themes/base/jquery-ui.min.css
  21. +4 −0 lib/matplotlib/backends/web_static/jquery/js/jquery-1.7.1.min.js
  22. +16 −0 lib/matplotlib/backends/web_static/jquery/js/jquery-ui.min.js
  23. +42 −0 lib/matplotlib/backends/web_static/jquery/js/jquery.autogrow.js
  24. +0 −24 lib/matplotlib/backends/web_static/mpl.css
  25. +1 −1 lib/matplotlib/rcsetup.py
  26. +6 −1 setup.py
View
@@ -0,0 +1,8 @@
+{
+ "metadata": {
+ "name": "Untitled0"
+ },
+ "nbformat": 3,
+ "nbformat_minor": 0,
+ "worksheets": []
+}
@@ -307,6 +307,15 @@ class NavigationToolbar2WebAgg(backend_bases.NavigationToolbar2):
]
def _init_toolbar(self):
+ jqueryui_icons = ['ui-icon ui-icon-home',
+ 'ui-icon ui-icon-circle-arrow-w',
+ 'ui-icon ui-icon-circle-arrow-e', None,
+ 'ui-icon ui-icon-arrow-4',
+ 'ui-icon ui-icon-search',
+ 'ui-icon ui-icon-disk']
+ for index, item in enumerate(self.toolitems):
+ if item[0] is not None:
+ self.toolitems[index]=(item[0],item[1],jqueryui_icons[index],item[3])
self.message = ''
self.cursor = 0
@@ -436,6 +445,18 @@ def __init__(self):
(r'/images/(.*)', tornado.web.StaticFileHandler,
{'path':
os.path.join(os.path.dirname(__file__), '../mpl-data/images')}),
+ (r'/static/jquery/css/themes/base/(.*)', tornado.web.StaticFileHandler,
+ {'path':
+ os.path.join(os.path.dirname(__file__), 'web_static/jquery/css/themes/base')}),
+ (r'/static/jquery/css/themes/base/images/(.*)', tornado.web.StaticFileHandler,
+ {'path':
+ os.path.join(os.path.dirname(__file__), 'web_static/jquery/css/themes/base/images')}),
+ (r'/static/jquery/js/(.*)', tornado.web.StaticFileHandler,
+ {'path':
+ os.path.join(os.path.dirname(__file__), 'web_static/jquery/js')}),
+ (r'/static/css/(.*)', tornado.web.StaticFileHandler,
+ {'path':
+ os.path.join(os.path.dirname(__file__), 'web_static/css')}),
# An MPL favicon
(r'/favicon.ico', self.FavIcon),
# The page that contains all of the pieces
@@ -0,0 +1,77 @@
+/**
+ * HTML5 ✰ Boilerplate
+ *
+ * style.css contains a reset, font normalization and some base styles.
+ *
+ * Credit is left where credit is due.
+ * Much inspiration was taken from these projects:
+ * - yui.yahooapis.com/2.8.1/build/base/base.css
+ * - camendesign.com/design/
+ * - praegnanz.de/weblog/htmlcssjs-kickstart
+ */
+
+
+/**
+ * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+ * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
+ * html5doctor.com/html-5-reset-stylesheet/
+ */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+sup { vertical-align: super; }
+sub { vertical-align: sub; }
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+blockquote, q { quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+
+del { text-decoration: line-through; }
+
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+input, select { vertical-align: middle; }
+
+
+/**
+ * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
+ */
+
+body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
+select, input, textarea, button { font:99% sans-serif; }
+
+/* Normalize monospace sizing:
+ en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+em,i { font-style: italic; }
+b,strong { font-weight: bold; }
@@ -0,0 +1,97 @@
+
+/* Flexible box model classes */
+/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
+
+.hbox {
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+ -webkit-box-align: stretch;
+
+ display: -moz-box;
+ -moz-box-orient: horizontal;
+ -moz-box-align: stretch;
+
+ display: box;
+ box-orient: horizontal;
+ box-align: stretch;
+}
+
+.hbox > * {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+}
+
+.vbox {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: stretch;
+
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ -moz-box-align: stretch;
+
+ display: box;
+ box-orient: vertical;
+ box-align: stretch;
+}
+
+.vbox > * {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+}
+
+.reverse {
+ -webkit-box-direction: reverse;
+ -moz-box-direction: reverse;
+ box-direction: reverse;
+}
+
+.box-flex0 {
+ -webkit-box-flex: 0;
+ -moz-box-flex: 0;
+ box-flex: 0;
+}
+
+.box-flex1, .box-flex {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+}
+
+.box-flex2 {
+ -webkit-box-flex: 2;
+ -moz-box-flex: 2;
+ box-flex: 2;
+}
+
+.box-group1 {
+ -webkit-box-flex-group: 1;
+ -moz-box-flex-group: 1;
+ box-flex-group: 1;
+}
+
+.box-group2 {
+ -webkit-box-flex-group: 2;
+ -moz-box-flex-group: 2;
+ box-flex-group: 2;
+}
+
+.start {
+ -webkit-box-pack: start;
+ -moz-box-pack: start;
+ box-pack: start;
+}
+
+.end {
+ -webkit-box-pack: end;
+ -moz-box-pack: end;
+ box-pack: end;
+}
+
+.center {
+ -webkit-box-pack: center;
+ -moz-box-pack: center;
+ box-pack: center;
+}
@@ -0,0 +1,77 @@
+/**
+ * Primary styles
+ *
+ * Author: IPython Development Team
+ */
+
+
+body {
+ background-color: white;
+ /* This makes sure that the body covers the entire window and needs to
+ be in a different element than the display: box in wrapper below */
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
+ overflow: visible;
+}
+
+
+div#header {
+ /* Initially hidden to prevent FLOUC */
+ display: none;
+ position: relative;
+ height: 40px;
+ padding: 5px;
+ margin: 0px;
+ width: 100%;
+}
+
+span#ipython_notebook {
+ position: absolute;
+ padding: 2px 2px 2px 5px;
+}
+
+span#ipython_notebook img {
+ font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+ height: 24px;
+ text-decoration:none;
+ display: inline;
+ color: black;
+}
+
+#site {
+ width: 100%;
+ display: none;
+}
+
+/* We set the fonts by hand here to override the values in the theme */
+.ui-widget {
+ font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+}
+
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
+ font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+}
+
+/* Smaller buttons */
+.ui-button .ui-button-text {
+ padding: 0.2em 0.8em;
+ font-size: 77%;
+}
+
+input.ui-button {
+ padding: 0.3em 0.9em;
+}
+
+span#login_widget {
+ float: right;
+}
+
+.border-box-sizing {
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
@@ -1,12 +1,17 @@
<html>
<head>
<script src="/static/mpl.js"></script>
- <link href="/static/mpl.css" rel="stylesheet" type="text/css">
+ <link rel="stylesheet" href="/static/css/page.css" type="text/css">
+ <link rel="stylesheet" href="/static/css/boilerplate.css" type="text/css" />
+ <link rel="stylesheet" href="/static/css/fbm.css" type="text/css" />
+ <link rel="stylesheet" href="/static/jquery/css/themes/base/jquery-ui.min.css" >
+ <script src="/static/jquery/js/jquery-1.7.1.min.js"></script>
+ <script src="/static/jquery/js/jquery-ui.min.js"></script>
</head>
<body
onkeydown="key_event(event, 'key_press')"
onkeyup="key_event(event, 'key_release')">
- <div id="mpl-div">
+ <div style="margin-left: auto ; margin-right: auto ; width: 800px;">
<div id="mpl-warnings" class="mpl-warnings">
</div>
@@ -27,30 +32,33 @@
</canvas>
</div>
- <div id="toolbar">
+ <div id="toolbar" class="ui-widget ui-widget-content"
+ style="border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none;">
{% for name, tooltip, image, method in toolitems %}
{% if name is None %}
- <span class="mpl-toolbar-spacer"></span>
+ <span style='width: 0.1em'></span>
{% else %}
<button id="{{ name }}"
- class="mpl-toolbar-button"
onclick="toolbar_button_onclick('{{ method }}');"
- onmouseover="toolbar_button_onmouseover('{{ tooltip }}');"
- role="button">
- <img src="/images/{{ image }}.png" width="24" height="24"
- alt="{{ tooltip }}"/>
+ role="button"
+ style="margin-top: 0px;"
+ class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
+ <span class="ui-button-icon-primary ui-icon {{ image }} ui-corner-all"></span>
+ <span class="ui-button-text">{{ tooltip }}</span>
</button>
{% end %}
{% end %}
- <select id="mpl-format" class="mpl-toolbar-option">
- {% for filetype, extensions in sorted(canvas.get_supported_filetypes_grouped().items()) %}
- <option value="{{ extensions[0] }}"
- {% if extensions[0] == canvas.get_default_filetype() %}
- selected
- {% end %}
- >{{filetype}} ({{", ".join(extensions)}})</option>
- {% end %}
- </select>
+ <span>
+ <select id="mpl-format" class="mpl-toolbar-option ui-widget ui-widget-content" style="margin-top: 0px;">
+ {% for filetype, extensions in sorted(canvas.get_supported_filetypes_grouped().items()) %}
+ <option value="{{ extensions[0] }}"
+ {% if extensions[0] == canvas.get_default_filetype() %}
+ selected
+ {% end %}
+ >{{filetype}} ({{", ".join(extensions)}})</option>
+ {% end %}
+ </select>
+ </span>
<span id="mpl-message" class="mpl-message"/>
</div>
</div>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 788c8c9

Please sign in to comment.