def with_class(obj, *classes):
"""
Add classes to first argument.
If called with a dictionary, add given classes to a dictionary of keyword
values and return the resulting kwargs dictionary.
If called with a function, decorate the function that returns a tag and add
the given class to the begin class list.
Examples:
>>> kwargs = {'class_': 'foo'}
>>> with_class(kwargs, 'bar'); kwargs
{'class_': ['bar', 'foo']}
>>> @with_class('bar')
... def my_div(**kwargs):
... return div(**kwargs)
>>> str(my_div('data', class_='foo'))
<div class="foo bar">data</div>
"""
if isinstance(obj, BaseComponent):
obj.classes = join_classes(classes, obj.classes)
return obj
elif isinstance(obj, Mapping):
class_ = obj.get('class_')
obj['class_'] = join_classes(classes, class_)
return obj
elif obj is None:
return None
elif callable(obj):
def decorated(*args, **kwargs):
result = obj(*args, **kwargs)
return with_class(result, *classes)
return decorated
else:
def decorator(func):
return with_class(func, *classes)
return decorator
def submission_body(sub, hidden=True):
class_ = join_classes('cs-submission__content', hidden and 'hidden')
grade = str(
int(sub.feedback.final_grade_pc or 0) if sub.
has_feedback else _('Not given'))
# Collect submission data
sub_data_title = h3(_('Submission data'), class_="banner")
sub_data = submission_data(sub)
sub_data = \
sub_data and \
div('cs-submission__data')[
submission_title,
sub_data,
]
return \
div(class_=class_)[
div(class_='cs-submission__description')[
str(sub),
],
div(class_='cs-submission__detail')[
h3(_('Details'), class_='banner'),
dl()[
dt(_('Grade')), dd(grade),
dt(_('Date of submission')), dd(str(sub.created)),
],
],
sub_data,
]
def badge(children=None,
badge=None,
class_=None,
no_background=False,
overlap=False,
href=None,
tag=None,
icon=None,
**kwargs):
"""
A MDL badge element.
The Material Design Lite (MDL) badge component is an onscreen notification
element. A badge consists of a small circle, typically containing a number
or other characters, that appears in proximity to another object. A badge
can be both a notifier that there are additional items associated with an
object and an indicator of how many items there are.
Args:
content:
Text content.
badge:
Text on the badge.
no_background, overlap:
Badge modifiers.
icon:
If True, creates an icon badge.
href:
If given, the default tag is chosen to be an <a>. This produces an
anchor badge, which is a common use case.
tag:
The tag used to create the main badge element. This defaults to
html5.span, if not set. Some modifiers also affects the default tag.
Examples:
>>> badge('foo', '42').render()
<span class="mdl-badge" data-badge="42">foo</span>
See also:
https://getmdl.io/components/index.html#badges-section
"""
# Define class from the given properties
classes = bem_with_modifiers(
'mdl-badge',
no_background=no_background,
overlap=overlap,
)
class_ = join_classes(icon and 'material-icons', classes, class_)
# Choose proper button tag
button_tag = tag or (t.a if href else t.span)
if href:
kwargs['href'] = href
return \
button_tag(class_=class_, data_badge=(badge or ' '), **kwargs)[
children,
]
def tooltip(children=None, class_=None, **kwargs):
"""
A MDL tooltip.
The Material Design Lite (MDL) tooltip component is an enhanced version of
the standard HTML tooltip as produced by the title attribute. A tooltip
consists of text and/or an image that clearly communicates additional
information about an element when the user hovers over or, in a touch-based
UI, touches the element. The MDL tooltip component is pre-styled (colors,
fonts, and other settings are contained in material.min.css) to provide a
vivid, attractive visual element that displays related but typically
non-essential content, e.g., a definition, clarification, or brief
instruction.
Args:
min, max, value:
Defines the range and the current value for the slider. An optional
``step`` argument defines the minimum step size for changing values.
single_color:
If True, does not change color after each iteration.
tag:
The tag class used to create element (defaults to html5.div)
Example:
>>> div('Darth Vader', id='vader')
>>> tooltip('The Sith Lord', for_='vader')
See also:
https://getmdl.io/components/index.html#tooltips-section
"""
class_ = join_classes('mdl-tooltip', class_)
return t.span(children, class_=class_, **kwargs)
def slider(class_=None, min=0, max=100, value=0, **kwargs):
"""
A MDL slider input element.
The Material Design Lite (MDL) slider component is an enhanced version of
the new HTML5 <input type="range"> element. A slider consists of a
horizontal line upon which sits a small, movable disc (the thumb) and,
typically, text that clearly communicates a value that will be set when the
user moves it.
Args:
min, max, value:
Defines the range and the current value for the slider. An optional
``step`` argument defines the minimum step size for changing values.
single_color:
If True, does not change color after each iteration.
tag:
The tag class used to create element (defaults to html5.div)
See also:
https://getmdl.io/components/index.html#sliders-section
"""
class_ = join_classes('mdl-slider', 'mdl-js-slider', class_)
return t.input(class_=class_,
type='range',
min=min,
max=max,
value=value,
**kwargs)
def spinner(class_=None, tag=t.div, active=True, single_color=False, **kwargs):
"""
A MDL spinner.
The Material Design Lite (MDL) spinner component is an enhanced replacement
for the classic "wait cursor" (which varies significantly among hardware and
software versions) and indicates that there is an ongoing process, the
results of which are not yet available. A spinner consists of an open circle
that changes colors as it animates in a clockwise direction, and clearly
communicates that a process has been started but not completed.
Args:
active:
Activate spinner.
single_color:
If True, does not change color after each iteration.
tag:
The tag class used to create element (defaults to html5.div)
Examples:
>>> spinner(active=False).render()
<div class="mdl-spinner mdl-js-spinner"></div>
See also:
https://getmdl.io/components/index.html#loading-section
"""
# Define class from the given properties
classes = bem_with_modifiers('mdl-progress', single_color=single_color)
class_ = \
join_classes(classes, 'mdl-js-spinner', class_, active and 'is_active')
return tag(class_=class_, **kwargs)
def progress(class_=None, tag=t.div, indeterminate=False, **kwargs):
"""
A MDL progress bar.
The Material Design Lite (MDL) progress component is a visual indicator of
background activity in a web page or application. A progress indicator
consists of a (typically) horizontal bar containing some animation that
conveys a sense of motion. While some progress devices indicate an
approximate or specific percentage of completion, the MDL progress component
simply communicates the fact that an activity is ongoing and is not yet
complete.
Args:
indeterminate:
An indeterminate tag progress animates the progress indicator
back and forward.
tag:
The tag class used to create element (defaults to html5.div)
Examples:
>>> progress(id='foo').render()
<div id="foo" class="mdl-progress mdl-js-progress"></div>
See also:
https://getmdl.io/components/index.html#loading-section
"""
# Define class from the given properties
classes = bem_with_modifiers('mdl-progress', indeterminate=indeterminate)
class_ = join_classes(classes, 'mdl-js-progress', class_)
# TODO: register requires
return tag(class_=class_, **kwargs)
def submission_body(sub, hidden=True):
class_ = join_classes('cs-submission__content', hidden and 'hidden')
grade = str(int(sub.feedback.final_grade_pc or 0)
if sub.has_feedback else _('Not given'))
# Collect submission data
sub_data_title = h3(_('Submission data'), class_="banner")
sub_data = submission_data(sub)
sub_data = \
sub_data and \
div('cs-submission__data')[
submission_title,
sub_data,
]
return \
div(class_=class_)[
div(class_='cs-submission__description')[
str(sub),
],
div(class_='cs-submission__detail')[
h3(_('Details'), class_='banner'),
dl()[
dt(_('Grade')), dd(grade),
dt(_('Date of submission')), dd(str(sub.created)),
],
],
sub_data,
]
def with_class(obj, *classes):
"""
Add classes to first argument.
If called with a dictionary, add given classes to a dictionary of keyword
values and return the resulting kwargs dictionary.
If called with a function, decorate the function that returns a tag and add
the given class to the begin class list.
Examples:
>>> kwargs = {'class_': 'foo'}
>>> with_class(kwargs, 'bar'); kwargs
{'class_': ['bar', 'foo']}
>>> @with_class('bar')
... def my_div(**kwargs):
... return div(**kwargs)
>>> str(my_div('data', class_='foo'))
<div class="foo bar">data</div>
"""
if isinstance(obj, BaseComponent):
obj.classes = join_classes(classes, obj.classes)
return obj
elif isinstance(obj, Mapping):
class_ = obj.get('class_')
obj['class_'] = join_classes(classes, class_)
return obj
elif obj is None:
return None
elif callable(obj):
def decorated(*args, **kwargs):
result = obj(*args, **kwargs)
return with_class(result, *classes)
return decorated
else:
def decorator(func):
return with_class(func, *classes)
return decorator
def decorated(*args, class_=None, shadow=None, **kwargs):
if shadow:
if not shadow in valid_shadows:
raise ValueError('shadow must be in %s' % valid_shadows)
class_ = join_classes(class_, 'mdl-shadow--%sdp' % shadow)
if 'children' in kwargs:
args = kwargs.pop('children'), +args
return func(*args, class_=class_, **kwargs)
def __call__(self, children=None, **kwargs):
new = self.copy()
if 'id' in kwargs:
new.id = kwargs.pop('id')
if 'class_' in kwargs:
new.add_class(*join_classes(kwargs.pop('class_')))
if children:
new = new[children]
new.attrs.update(kwargs)
return new
def button(children=None,
class_=None,
fab=False,
colored=False,
raised=False,
accent=False,
primary=False,
icon=False,
ripple=False,
tag=t.button,
**kwargs):
"""
A MDL button.
The Material Design Lite (MDL) button component is an enhanced version of
the standard HTML <button> element. A button consists of text and/or an
image that clearly communicates what action will occur when the user clicks
or touches it. The MDL button component provides various types of buttons,
and allows you to add both display and click effects.
Args:
fab, icon, raised, colored, primary, accent, ripple:
Enable the corresponding mdl styling.
disabled:
Disable button
tag:
The tag element used to create button (defauts to html5.button)
Examples:
>>> button('Next').render()
<button class="mdl-button mdl-js-button">Next</button>
See also:
https://getmdl.io/components/index.html#buttons-section
"""
# Define class from the given properties
classes = ['mdl-button', 'mdl-js-button']
classes += bem_modifiers(
'mdl-button',
fab=fab,
raised=raised,
icon=icon,
colored=colored,
accent=accent,
primary=primary,
mdl_js_ripple_effect=ripple and 'mdl-js-ripple-effect',
)
class_ = join_classes(classes, class_)
# Return button element
return \
tag(class_=class_, **kwargs)[
children
]
def footer(class_=None, **kwargs):
"""
Renders the default foot element.
"""
class_ = join_classes('cs-foot', class_)
return \
div(class_=class_, **kwargs)[
div(class_="cs-foot__copyright")[
p([
'Copyright 2016 - ',
link('Codeschool <http://github.com/cslms/cs-server>')
]),
p('Site gerenciado por Fábio M. Mendes na UnB/Gama.')
]
]
def footer(class_=None, **kwargs):
"""
Renders the default foot element.
"""
class_ = join_classes('cs-foot', class_)
return \
div(class_=class_, **kwargs)[
div(class_="cs-foot__copyright")[
p([
'Copyright 2016 - ',
link('Codeschool <http://github.com/cslms/cs-server>')
]),
p('Site gerenciado por Fábio M. Mendes na UnB/Gama.')
]
]
def card_container(cards,
title=None,
description=None,
class_=None,
empty=None,
**kwargs):
"""
A container for simple card elements.
Args:
cards:
A list of cards.
title:
Title to show to the LHS of the container.
description:
Short description bellow title.
"""
lhs_aside = None
if title:
cls = 'cs-card-container__aside mdl-cell mdl-cell--3-col'
lhs_aside = \
aside(class_=cls)[
h1(title),
description and p(description)
]
ncols = 9 if title else 12
cls = join_classes('cs-card-container mdl-grid mdl-grid--no-spacing',
class_)
return \
div(class_='bg-primary layout-wfull')[
section(class_=cls)[
ifset(title, lhs_aside),
article(class_='mdl-cell mdl-cell--%s-col' % ncols)[
div(class_='cs-card-aside__content mdl-grid')[
cards or [empty],
]
],
]
]
def head(links=None, user=None, class_=None, **kwargs):
"""
Renders the default head element.
Args:
links:
A list of hyperlinks that enter the main navigation area.
user:
The user requesting the page. The user name is used to set the
fab button icon.
"""
fabletter = None
if user and not user.is_anonymous:
fabletter = user.first_name[0:1] or user.username[0]
return \
div(class_=join_classes('cs-head', class_), **kwargs)[
_head_logo(),
_head_nav(links, fabletter=fabletter),
_head_script(),
]
def head(links=None, user=None, class_=None, **kwargs):
"""
Renders the default head element.
Args:
links:
A list of hyperlinks that enter the main navigation area.
user:
The user requesting the page. The user name is used to set the
fab button icon.
"""
fabletter = None
if user and not user.is_anonymous:
fabletter = user.first_name[0:1] or user.username[0]
return \
div(class_=join_classes('cs-head', class_), **kwargs)[
_head_logo(),
_head_nav(links, fabletter=fabletter),
_head_script(),
]
def elem(*args, class_=None, **kwargs):
return tag(*args, class_=join_classes(cls, class_), **kwargs)