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 4598bf7

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 2964074 commit 4598bf7
Copy full SHA for 4598bf7

File tree

Expand file treeCollapse file tree

5 files changed

+61
-5
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

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

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

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

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

@@ -272,18 +273,26 @@ mpl.figure.prototype._init_toolbar = function () {
272273
};
273274
}
274275

276+
var buttonGroup = document.createElement('div');
277+
buttonGroup.classList = 'mpl-button-group';
275278
for (var toolbar_ind in mpl.toolbar_items) {
276279
var name = mpl.toolbar_items[toolbar_ind][0];
277280
var tooltip = mpl.toolbar_items[toolbar_ind][1];
278281
var image = mpl.toolbar_items[toolbar_ind][2];
279282
var method_name = mpl.toolbar_items[toolbar_ind][3];
280283

281284
if (!name) {
282-
// put a spacer in here.
285+
/* Instead of a spacer, we start a new button group. */
286+
if (buttonGroup.hasChildNodes()) {
287+
toolbar.appendChild(buttonGroup);
288+
}
289+
buttonGroup = document.createElement('div');
290+
buttonGroup.classList = 'mpl-button-group';
283291
continue;
284292
}
293+
285294
var button = document.createElement('button');
286-
button.classList = 'ui-button ui-widget ui-state-default ui-corner-all';
295+
button.classList = 'mpl-widget';
287296
button.setAttribute('role', 'button');
288297
button.setAttribute('aria-disabled', 'false');
289298
button.addEventListener('click', on_click_closure(method_name));
@@ -293,16 +302,19 @@ mpl.figure.prototype._init_toolbar = function () {
293302
icon_img.src = '_images/' + image + '.png';
294303
icon_img.srcset = '_images/' + image + '_large.png 2x';
295304
icon_img.alt = tooltip;
296-
297305
button.appendChild(icon_img);
298306

299-
toolbar.appendChild(button);
307+
buttonGroup.appendChild(button);
308+
}
309+
310+
if (buttonGroup.hasChildNodes()) {
311+
toolbar.appendChild(buttonGroup);
300312
}
301313

302314
var fmt_picker_span = document.createElement('span');
303315

304316
var fmt_picker = document.createElement('select');
305-
fmt_picker.classList = 'mpl-toolbar-option ui-widget ui-widget-content';
317+
fmt_picker.classList = 'mpl-widget';
306318
fmt_picker_span.appendChild(fmt_picker);
307319
toolbar.appendChild(fmt_picker_span);
308320
this.format_dropdown = fmt_picker;

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