8000 Re-style the webagg toolbar. · matplotlib/matplotlib@c942935 · GitHub
[go: up one dir, main page]
Skip to content

Commit c942935

Browse 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

File tree

5 files changed

+65
-9
lines changed

5 files changed

+65
-9
lines changed

‎examples/user_interfaces/embedding_webagg_sgskip.py

Lines 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

Lines 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

Lines 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

Lines 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 67ED = 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+< 9D0F /span>
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

Lines 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