diff --git a/packages/matplotlib/src/wasm_backend.py b/packages/matplotlib/src/wasm_backend.py index 27c033fee..4192d4698 100644 --- a/packages/matplotlib/src/wasm_backend.py +++ b/packages/matplotlib/src/wasm_backend.py @@ -27,7 +27,6 @@ from js import ImageData interactive(True) - class FigureCanvasWasm(backend_agg.FigureCanvasAgg): supports_blit = False @@ -38,6 +37,41 @@ class FigureCanvasWasm(backend_agg.FigureCanvasAgg): self._id = "matplotlib_" + hex(id(self))[2:] self._title = '' self._ratio = 1 + matplotlib_figure_styles = self._add_matplotlib_styles() + if document.getElementById('matplotlib-figure-styles') is None: + document.head.appendChild(matplotlib_figure_styles) + + def _add_matplotlib_styles(self): + toolbar_buttons_css_content = """ + button.matplotlib-toolbar-button { + font-size: 14px; + color: #495057; + text-transform: uppercase; + background: #e9ecef; + padding: 9px 18px; + border: 1px solid #fff; + border-radius: 4px; + transition-duration: 0.4s; + } + + button.matplotlib-toolbar-button#text { + font-family: -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, + "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + } + + button.matplotlib-toolbar-button:hover { + color: #fff; + background: #495057; + } + """ + toolbar_buttons_style_element = document.createElement('style') + toolbar_buttons_style_element.id = 'matplotlib-figure-styles' + toolbar_buttons_css = document.createTextNode(toolbar_buttons_css_content) + toolbar_buttons_style_element.appendChild(toolbar_buttons_css) + return toolbar_buttons_style_element def get_element(self, name): """ @@ -449,6 +483,7 @@ class NavigationToolbar2Wasm(backend_bases.NavigationToolbar2): button = document.createElement('button') button.classList.add('fa') button.classList.add(_FONTAWESOME_ICONS[image_file]) + button.classList.add('matplotlib-toolbar-button') button.addEventListener( 'click', getattr(self, name_of_method)) div.appendChild(button) @@ -457,6 +492,8 @@ class NavigationToolbar2Wasm(backend_bases.NavigationToolbar2): button = document.createElement('button') button.classList.add('fa') button.textContent = format + button.classList.add('matplotlib-toolbar-button') + button.id = 'text' button.addEventListener( 'click', self.ondownload) div.appendChild(button)