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.
Doeme · Apr 27, 2020 · c942935 · c942935
1 parent d8841db
commit c942935
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 9 deletions.
diff --git a/examples/user_interfaces/embedding_webagg_sgskip.py b/examples/user_interfaces/embedding_webagg_sgskip.py
@@ -59,6 +59,7 @@ def create_figure():
     <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/css/mpl.css" type="text/css">
     <link rel="stylesheet" href="_static/jquery-ui-1.12.1/jquery-ui.min.css" />
     <script src="_static/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
     <script src="_static/jquery-ui-1.12.1/jquery-ui.min.js"></script>

diff --git a/lib/matplotlib/backends/web_backend/all_figures.html b/lib/matplotlib/backends/web_backend/all_figures.html
@@ -3,6 +3,7 @@
     <link rel="stylesheet" href="{{ prefix }}/_static/css/page.css" type="text/css">
     <link rel="stylesheet" href="{{ prefix }}/_static/css/boilerplate.css" type="text/css" />
     <link rel="stylesheet" href="{{ prefix }}/_static/css/fbm.css" type="text/css" />
+    <link rel="stylesheet" href="{{ prefix }}/_static/css/mpl.css" type="text/css">
     <link rel="stylesheet" href="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.css" >
     <script src="{{ prefix }}/_static/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
     <script src="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.js"></script>

diff --git a/lib/matplotlib/backends/web_backend/css/mpl.css b/lib/matplotlib/backends/web_backend/css/mpl.css
@@ -0,0 +1,45 @@
+/* Toolbar and items */
+.mpl-toolbar {
+  width: 100%;
+}
+
+.mpl-toolbar div.mpl-button-group {
+  display: inline-block;
+}
+
+.mpl-button-group + .mpl-button-group {
+  margin-left: 0.5em;
+}
+
+.mpl-widget {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  display: inline-block;
+  cursor: pointer;
+  color: #333;
+  padding: 6px;
+  vertical-align: middle;
+}
+
+button.mpl-widget:focus,
+button.mpl-widget:hover {
+  background-color: #ddd;
+  border-color: #aaa;
+}
+
+.mpl-button-group button.mpl-widget {
+  margin-left: -1px;
+}
+.mpl-button-group button.mpl-widget:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  margin-left: 0px;
+}
+.mpl-button-group button.mpl-widget:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+select.mpl-widget {
+  cursor: default;
+}
diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js
@@ -257,7 +257,7 @@ mpl.figure.prototype._init_toolbar = function () {
     var fig = this;
 
     var toolbar = document.createElement('div');
-    toolbar.setAttribute('style', 'width: 100%');
+    toolbar.classList = 'mpl-toolbar';
     this.root.appendChild(toolbar);
 
     function on_click_closure(name) {
@@ -272,18 +272,26 @@ mpl.figure.prototype._init_toolbar = function () {
         };
     }
 
+    var buttonGroup = document.createElement('div');
+    buttonGroup.classList = 'mpl-button-group';
     for (var toolbar_ind in mpl.toolbar_items) {
         var name = mpl.toolbar_items[toolbar_ind][0];
         var tooltip = mpl.toolbar_items[toolbar_ind][1];
         var image = mpl.toolbar_items[toolbar_ind][2];
         var method_name = mpl.toolbar_items[toolbar_ind][3];
 
         if (!name) {
-            // put a spacer in here.
+            /* Instead of a spacer, we start a new button group. */
+            if (buttonGroup.hasChildNodes()) {
+                toolbar.appendChild(buttonGroup);
+            }
+            buttonGroup = document.createElement('div');
+            buttonGroup.classList = 'mpl-button-group';
             continue;
         }
+
         var button = document.createElement('button');
-        button.classList = 'ui-button ui-widget ui-state-default ui-corner-all';
+        button.classList = 'mpl-widget';
         button.setAttribute('role', 'button');
         button.setAttribute('aria-disabled', 'false');
         button.addEventListener('click', on_click_closure(method_name));
@@ -293,18 +301,18 @@ mpl.figure.prototype._init_toolbar = function () {
         icon_img.src = '_images/' + image + '.png';
         icon_img.srcset = '_images/' + image + '_large.png 2x';
         icon_img.alt = tooltip;
-
         button.appendChild(icon_img);
 
-        toolbar.appendChild(button);
+        buttonGroup.appendChild(button);
     }
 
-    var fmt_picker_span = document.createElement('span');
+    if (buttonGroup.hasChildNodes()) {
+        toolbar.appendChild(buttonGroup);
+    }
 
     var fmt_picker = document.createElement('select');
-    fmt_picker.classList = 'mpl-toolbar-option ui-widget ui-widget-content';
-    fmt_picker_span.appendChild(fmt_picker);
-    toolbar.appendChild(fmt_picker_span);
+    fmt_picker.classList = 'mpl-widget';
+    toolbar.appendChild(fmt_picker);
     this.format_dropdown = fmt_picker;
 
     for (var ind in mpl.extensions) {

diff --git a/lib/matplotlib/backends/web_backend/single_figure.html b/lib/matplotlib/backends/web_backend/single_figure.html
@@ -3,6 +3,7 @@
     <link rel="stylesheet" href="{{ prefix }}/_static/css/page.css" type="text/css">
     <link rel="stylesheet" href="{{ prefix }}/_static/css/boilerplate.css" type="text/css" />
     <link rel="stylesheet" href="{{ prefix }}/_static/css/fbm.css" type="text/css" />
+    <link rel="stylesheet" href="{{ prefix }}/_static/css/mpl.css" type="text/css">
     <link rel="stylesheet" href="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.css" >
     <script src="{{ prefix }}/_static/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
     <script src="{{ prefix }}/_static/jquery-ui-1.12.1/jquery-ui.min.js"></script>