Mercurial > libervia-templates
changeset 153:b84d20af0ed3
macros (field, form, textbox): general improvments:
- use a generic "field" macro for most fields
- added "required" class on input labels if suitable
- extra kw args are used as input field attributes. Same thing for forms
- better handling of id if label is missing
- added blog_text macro in textbox for basic text blog input
- textbox is more customisable (class and textarea class can be specified)
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 21 Jun 2018 01:09:00 +0200 |
parents | da2c0dc7c1ff |
children | 80cf52fbcc40 |
files | sat_templates/default/input/field.html sat_templates/default/input/form.html sat_templates/default/input/textbox.html |
diffstat | 3 files changed, 64 insertions(+), 29 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/default/input/field.html Thu Jun 21 01:02:33 2018 +0200 +++ b/sat_templates/default/input/field.html Thu Jun 21 01:09:00 2018 +0200 @@ -1,43 +1,70 @@ +{# macros to create form fields #} + +{% macro field(type, name, label="", required=false) %} + {# generic field + "class" keyword can be used to add classes + additional kwargs will be passed as attributes #} + <span class="form_input {{kwargs.pop('class', '')}}"> + {% set cur_id = name|next_gidx %} + {% if label %} + <label for="{{cur_id}}" {{'class="required"'|safe if required}}>{{label}}</label> + {% endif %} + <input id="{{cur_id}}" type="{{type}}" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}> + </span> +{% endmacro %} + {% macro choices(name, choices_list, checked=none) %} {% for choice, label in choices_list %} - <div class="form_input"> + <div class="form_input {{kwargs.pop('class', '')}}"> <input id="{{name|next_gidx}}" type="radio" name="{{name}}" value="{{choice}}"{{" checked" if checked==choice}}><label for="{{name|cur_gidx}}">{{label}}</label> </div> {% endfor %} {% endmacro %} {% macro int(name, label="", init=0) %} - <span class="form_input"> - <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="number" name="{{name}}" value="{{init}}" step="1" min="0"> - </span> + {{ field("number", name=name, label=label, value=init, step=1, min=0, **kwargs) }} +{% endmacro %} + +{% macro checkbox(name, label="", checked=false) %} + {% if checked %} + {{ field("checkbox", name=name, label=label, checked="checked", **kwargs) }} + {% else %} + {{ field("checkbox", name=name, label=label, **kwargs) }} + {% endif %} {% endmacro %} {% macro text(name, label="", placeholder="", required=false) %} - {# single line text field - additional kwargs will be passed as attributes #} - <span class="form_input"> - <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="text" name="{{name}}" placeholder="{{placeholder}}" {{"required" if required}} {{kwargs|xmlattr}}> - </span> + {{ field("text", name=name, label=label, required=required, placeholder=placeholder, **kwargs) }} {% endmacro %} {% macro password(name, label="", required=false) %} - {# password field - additional kwargs will be passed as attributes #} - <span class="form_input"> - <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="password" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}> - </span> + {{ field("password", name=name, label=label, required=required, **kwargs) }} {% endmacro %} {% macro email(name, label="", required=false) %} - {# email field - additional kwargs will be passed as attributes #} - <span class="form_input"> - <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="email" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}> - </span> + {{ field("email", name=name, label=label, required=required, **kwargs) }} +{% endmacro %} + +{% macro date(name, label="", required=false) %} + {{ field("date", name=name, label=label, required=required, **kwargs) }} +{% endmacro %} + +{% macro url(name, label="", required=false) %} + {{ field("url", name=name, label=label, required=required, **kwargs) }} {% endmacro %} -{% macro textarea(name, rows=10, cols=50, placeholder='', required=false) %} - <textarea name="{{name}}" rows="{{rows}}" cols="{{cols}}" placeholder="{{placeholder}}" {{"required" if required}}></textarea> +{% macro file(name, label="", required=false) %} + {{ field("file", name=name, label=label, required=required, **kwargs) }} +{% endmacro %} + +{% macro textarea(name, label="", rows=10, cols=50, placeholder='', required=false) %} + <div class="form_input {{kwargs.pop('class', '')}}"> + {% set cur_id = name|next_gidx %} + {% if label %} + <label for="{{cur_id}}" {{'class="required"'|safe if required}}>{{label}}</label> + {% endif %} + <textarea id="{{cur_id}}" name="{{name}}" rows="{{rows}}" cols="{{cols}}" placeholder="{{placeholder}}" {{"required" if required}} class="{{kwargs.pop('class', '')}}"></textarea> + </div> {% endmacro %} {% macro meta(name, value) %} @@ -45,5 +72,5 @@ {% endmacro %} {% macro submit(text=_("Send")) %} - <input class="form_submit button" type="submit" value="{{text}}"> + <input class="form_submit button" type="submit" value="{{text}}" class="{{kwargs.pop('class', '')}}"> {% endmacro %}
--- a/sat_templates/default/input/form.html Thu Jun 21 01:02:33 2018 +0200 +++ b/sat_templates/default/input/form.html Thu Jun 21 01:09:00 2018 +0200 @@ -1,5 +1,5 @@ {% macro form(action='', class='') %} -<form method="post" action="{{action}}" {{ {'class': class}|xmlattr }}> +<form method="post" action="{{action}}" {{ {'class': class}|xmlattr }} {{kwargs|xmlattr}} > {% if csrf_token is defined %} <input type="hidden" name="csrf_token" value="{{csrf_token}}"> {% endif %}
--- a/sat_templates/default/input/textbox.html Thu Jun 21 01:02:33 2018 +0200 +++ b/sat_templates/default/input/textbox.html Thu Jun 21 01:09:00 2018 +0200 @@ -1,5 +1,5 @@ {% import 'input/form.html' as form with context %} -{% import 'input/field.html' as field %} +{% import 'input/field.html' as field with context %} {% macro head(service, node, type="textbox") %} {# include data needed to identify the node to use for commenting #} @@ -12,22 +12,30 @@ <input type="submit" value="{{label}}"> {% endmacro %} -{% macro textbox(service, node, action='', placeholder='', submit_label=_("Send"), type="textbox") %} - {# generic content area for comments/blog posts/etc. Only a body by default, but new elements can be +{% macro textbox(service, node, action='', placeholder='', + submit_label=_("Send"), type="textbox", + class='', ta_class='') %} + {# generic content area for comments/blog posts/etc. + Only a body by default, but new elements can be added by using this macro with call #} {% set extra_content = caller() if caller is defined else '' %} - {% call form.form(action=action, class="textbox") %} + {% call form.form(action=action, class="textbox " + class) %} {{ head(service, node, type) }} {{ extra_content }} - {{ field.textarea("body", placeholder=placeholder, required=True) }} + {{ field.textarea("body", placeholder=placeholder, required=True, + class=ta_class) }} {{ submit(label=submit_label) }} {% endcall %} {% endmacro %} -{% macro comment(service, node, action='', placeholder=_("Your comment")) %} +{% macro blog_text(service, node, action='', placeholder=_("Your comment")) %} {{ textbox(service, node, action=action, placeholder=placeholder, type="comment") }} {% endmacro %} +{% macro comment(service, node, action='', placeholder=_("Your comment"), class='box--medium') %} + {{ textbox(service, node, action=action, placeholder=placeholder, type="comment", class=class) }} +{% endmacro %} + {% macro comment_or_login(service, node, action='', placeholder=none) %} {# show comment form a a message asking to log in login is checked using profile #}