Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c942935

Browse filesBrowse files
QuLogicQuLogic
committed
Re-style the webagg toolbar.
* Add some surrounding `div`s for button groups, like the nbAgg toolbar, in order to add spacers. * Add our own CSS file instead of using jQuery UI styles.
1 parent d8841db commit c942935
Copy full SHA for c942935

File tree

Expand file treeCollapse file tree

5 files changed

+65
-9
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

+65
-9
lines changed

‎examples/user_interfaces/embedding_webagg_sgskip.py

Copy file name to clipboardExpand all lines: examples/user_interfaces/embedding_webagg_sgskip.py
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ def create_figure():
5959
<link rel="stylesheet" href="_static/css/boilerplate.css"
6060
type="text/css" />
6161
<link rel="stylesheet" href="_static/css/fbm.css" type="text/css" />
62+
<link rel="stylesheet" href="_static/css/mpl.css" type="text/css">
6263
<link rel="stylesheet" href="_static/jquery-ui-1.12.1/jquery-ui.min.css" />
6364
<script src="_static/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
6465
<script src="_static/jquery-ui-1.12.1/jquery-ui.min.js"></script>

‎lib/matplotlib/backends/web_backend/all_figures.html

Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/all_figures.html
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<link rel="stylesheet" href="{{ prefix }}/_static/css/page.css" type="text/css">
44
<link rel="stylesheet" href="{{ prefix }}/_static/css/boilerplate.css" type="text/css" />
55
<link rel="stylesheet" href="{{ prefix }}/_static/css/fbm.css" type="text/css" />
6+
<link rel="stylesheet" href="{{ prefix }}/_static/css/mpl.css" type="text/css">
67
<link rel="stylesheet" href="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.css" >
78
<script src="{{ prefix }}/_static/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
89
<script src="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.js"></script>

‎lib/matplotlib/backends/web_backend/css/mpl.css

Copy file name to clipboard
+45Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* Toolbar and items */
2+
.mpl-toolbar {
3+
width: 100%;
4+
}
5+
6+
.mpl-toolbar div.mpl-button-group {
7+
display: inline-block;
8+
}
9+
10+
.mpl-button-group + .mpl-button-group {
11+
margin-left: 0.5em;
12+
}
13+
14+
.mpl-widget {
15+
background-color: #fff;
16+
border: 1px solid #ccc;
17+
display: inline-block;
18+
cursor: pointer;
19+
color: #333;
20+
padding: 6px;
21+
vertical-align: middle;
22+
}
23+
24+
button.mpl-widget:focus,
25+
button.mpl-widget:hover {
26+
background-color: #ddd;
27+
border-color: #aaa;
28+
}
29+
30+
.mpl-button-group button.mpl-widget {
31+
margin-left: -1px;
32+
}
33+
.mpl-button-group button.mpl-widget:first-child {
34+
border-top-left-radius: 6px;
35+
border-bottom-left-radius: 6px;
36+
margin-left: 0px;
37+
}
38+
.mpl-button-group button.mpl-widget:last-child {
39+
border-top-right-radius: 6px;
40+
border-bottom-right-radius: 6px;
41+
}
42+
43+
select.mpl-widget {
44+
cursor: default;
45+
}

‎lib/matplotlib/backends/web_backend/js/mpl.js

Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/js/mpl.js
+17-9Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ mpl.figure.prototype._init_toolbar = function () {
257257
var fig = this;
258258

259259
var toolbar = document.createElement('div');
260-
toolbar.setAttribute('style', 'width: 100%');
260+
toolbar.classList = 'mpl-toolbar';
261261
this.root.appendChild(toolbar);
262262

263263
function on_click_closure(name) {
@@ -272,18 +272,26 @@ mpl.figure.prototype._init_toolbar = function () {
272272
};
273273
}
274274

275+
var buttonGroup = document.createElement('div');
276+
buttonGroup.classList = 'mpl-button-group';
275277
for (var toolbar_ind in mpl.toolbar_items) {
276278
var name = mpl.toolbar_items[toolbar_ind][0];
277279
var tooltip = mpl.toolbar_items[toolbar_ind][1];
278280
var image = mpl.toolbar_items[toolbar_ind][2];
279281
var method_name = mpl.toolbar_items[toolbar_ind][3];
280282

281283
if (!name) {
282-
// put a spacer in here.
284+
/* Instead of a spacer, we start a new button group. */
285+
if (buttonGroup.hasChildNodes()) {
286+
toolbar.appendChild(buttonGroup);
287+
}
288+
buttonGroup = document.createElement('div');
289+
buttonGroup.classList = 'mpl-button-group';
283290
continue;
284291
}
292+
285293
var button = document.createElement('button');
286-
button.classList = 'ui-button ui-widget ui-state-default ui-corner-all';
294+
button.classList = 'mpl-widget';
287295
button.setAttribute('role', 'button');
288296
button.setAttribute('aria-disabled', 'false');
289297
button.addEventListener('click', on_click_closure(method_name));
@@ -293,18 +301,18 @@ mpl.figure.prototype._init_toolbar = function () {
293301
icon_img.src = '_images/' + image + '.png';
294302
icon_img.srcset = '_images/' + image + '_large.png 2x';
295303
icon_img.alt = tooltip;
296-
297304
button.appendChild(icon_img);
298305

299-
toolbar.appendChild(button);
306+
buttonGroup.appendChild(button);
300307
}
301308

302-
var fmt_picker_span = document.createElement('span');
309+
if (buttonGroup.hasChildNodes()) {
310+
toolbar.appendChild(buttonGroup);
311+
}
303312

304313
var fmt_picker = document.createElement('select');
305-
fmt_picker.classList = 'mpl-toolbar-option ui-widget ui-widget-content';
306-
fmt_picker_span.appendChild(fmt_picker);
307-
toolbar.appendChild(fmt_picker_span);
314+
fmt_picker.classList = 'mpl-widget';
315+
toolbar.appendChild(fmt_picker);
308316
this.format_dropdown = fmt_picker;
309317

310318
for (var ind in mpl.extensions) {

‎lib/matplotlib/backends/web_backend/single_figure.html

Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/single_figure.html
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<link rel="stylesheet" href="{{ prefix }}/_static/css/page.css" type="text/css">
44
<link rel="stylesheet" href="{{ prefix }}/_static/css/boilerplate.css" type="text/css" />
55
<link rel="stylesheet" href="{{ prefix }}/_static/css/fbm.css" type="text/css" />
6+
<link rel="stylesheet" href="{{ prefix }}/_static/css/mpl.css" type="text/css">
67
<link rel="stylesheet" href="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.css" >
78
<script src="{{ prefix }}/_static/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
89
<script src="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.js"></script>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.