"""
Material template based on the material web components library.
"""
import pathlib
import param
from bokeh.themes import Theme as _BkTheme
from ...layout import Card
from ..base import BasicTemplate, TemplateActions
from ..theme import DefaultTheme, DarkTheme
[docs]class MaterialTemplateActions(TemplateActions):
_scripts = {
'open_modal': ["""
modal.open();
setTimeout(function() {{ window.dispatchEvent(new Event('resize')); }}, 200);
"""],
'close_modal': ["modal.close()"]
}
[docs]class MaterialTemplate(BasicTemplate):
"""
MaterialTemplate is built on top of Material web components.
"""
sidebar_width = param.Integer(370, doc="""
The width of the sidebar in pixels. Default is 370.""")
_actions = param.ClassSelector(default=MaterialTemplateActions(), class_=TemplateActions)
_css = pathlib.Path(__file__).parent / 'material.css'
_template = pathlib.Path(__file__).parent / 'material.html'
_modifiers = {
Card: {
'children': {'margin': (5, 10)},
'title_css_classes': ['mdc-card-title'],
'css_classes': ['mdc-card'],
'button_css_classes': ['mdc-button', 'mdc-card-button'],
'margin': (10, 5)
},
}
_resources = {
'css': {
'material': "https://unpkg.com/material-components-web@7.0.0/dist/material-components-web.min.css",
},
'js': {
'material': "https://unpkg.com/material-components-web@7.0.0/dist/material-components-web.min.js"
}
}
MATERIAL_FONT = "Roboto, sans-serif, Verdana"
MATERIAL_THEME = {
"attrs": {
"Axis": {
"major_label_text_font": MATERIAL_FONT,
"major_label_text_font_size": "1.025em",
"axis_label_standoff": 10,
"axis_label_text_font": MATERIAL_FONT,
"axis_label_text_font_size": "1.25em",
"axis_label_text_font_style": "normal",
},
"Legend": {
"spacing": 8,
"glyph_width": 15,
"label_standoff": 8,
"label_text_font": MATERIAL_FONT,
"label_text_font_size": "1.025em",
},
"ColorBar": {
"title_text_font": MATERIAL_FONT,
"title_text_font_size": "1.025em",
"title_text_font_style": "normal",
"major_label_text_font": MATERIAL_FONT,
"major_label_text_font_size": "1.025em",
},
"Title": {
"text_font": MATERIAL_FONT,
"text_font_size": "1.15em",
},
}
}
MATERIAL_DARK_100 = "rgb(48,48,48)"
MATERIAL_DARK_75 = "rgb(57,57,57)"
MATERIAL_DARK_50 = "rgb(66,66,66)"
MATERIAL_DARK_25 = "rgb(77,77,77)"
MATERIAL_TEXT_DIGITAL_DARK = "rgb(236,236,236)"
MATERIAL_DARK_THEME = {
"attrs": {
"Figure": {
"background_fill_color": MATERIAL_DARK_50,
"border_fill_color": MATERIAL_DARK_100,
"outline_line_color": MATERIAL_DARK_75,
"outline_line_alpha": 0.25,
},
"Grid": {"grid_line_color": MATERIAL_TEXT_DIGITAL_DARK, "grid_line_alpha": 0.25},
"Axis": {
"major_tick_line_alpha": 0,
"major_tick_line_color": MATERIAL_TEXT_DIGITAL_DARK,
"minor_tick_line_alpha": 0,
"minor_tick_line_color": MATERIAL_TEXT_DIGITAL_DARK,
"axis_line_alpha": 0,
"axis_line_color": MATERIAL_TEXT_DIGITAL_DARK,
"major_label_text_color": MATERIAL_TEXT_DIGITAL_DARK,
"major_label_text_font": MATERIAL_FONT,
"major_label_text_font_size": "1.025em",
"axis_label_standoff": 10,
"axis_label_text_color": MATERIAL_TEXT_DIGITAL_DARK,
"axis_label_text_font": MATERIAL_FONT,
"axis_label_text_font_size": "1.25em",
"axis_label_text_font_style": "normal",
},
"Legend": {
"spacing": 8,
"glyph_width": 15,
"label_standoff": 8,
"label_text_color": MATERIAL_TEXT_DIGITAL_DARK,
"label_text_font": MATERIAL_FONT,
"label_text_font_size": "1.025em",
"border_line_alpha": 0,
"background_fill_alpha": 0.25,
"background_fill_color": MATERIAL_DARK_75,
},
"ColorBar": {
"title_text_color": MATERIAL_TEXT_DIGITAL_DARK,
"title_text_font": MATERIAL_FONT,
"title_text_font_size": "1.025em",
"title_text_font_style": "normal",
"major_label_text_color": MATERIAL_TEXT_DIGITAL_DARK,
"major_label_text_font": MATERIAL_FONT,
"major_label_text_font_size": "1.025em",
"background_fill_color": MATERIAL_DARK_75,
"major_tick_line_alpha": 0,
"bar_line_alpha": 0,
},
"Title": {
"text_color": MATERIAL_TEXT_DIGITAL_DARK,
"text_font": MATERIAL_FONT,
"text_font_size": "1.15em",
},
}
}
[docs]class MaterialDefaultTheme(DefaultTheme):
css = param.Filename(default=pathlib.Path(__file__).parent / 'default.css')
bokeh_theme = param.ClassSelector(class_=(_BkTheme, str),
default=_BkTheme(json=MATERIAL_THEME))
_template = MaterialTemplate
[docs]class MaterialDarkTheme(DarkTheme):
"""
The MaterialDarkTheme is a Dark Theme in the style of Material Design
"""
css = param.Filename(default=pathlib.Path(__file__).parent / 'dark.css')
bokeh_theme = param.ClassSelector(class_=(_BkTheme, str),
default=_BkTheme(json=MATERIAL_DARK_THEME))
_template = MaterialTemplate