Rooba
/
pyodide
mirror of https://github.com/pyodide/pyodide.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Stylize the matplotlib widgets toolbar 

Add style to matplotlib widgets
Add Color Change on Hover Functionality
Apply System Fonts to buttons with text
This commit is contained in:
Madhur Tandon 2019-01-13 00:45:40 +05:30
parent 833ce1a59e
commit 8bcb07b0f9
1 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/matplotlib/src/wasm_backend.py
View File

@ -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)