Mercurial > libervia-templates

comparison sat_templates/templates/bulma/input/field.html @ 230:0e69b5843c2f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
theme: bulma theme first draft: This theme uses the Bulma CSS framework, Brython to handle the menu on touch devices, and Sass to customize Bulma. CSS default fallbacks are disabled as Bulma uses its own naming conventions, and default fallbacks would lead to hard to debug conflicts. `common.js` has been slightly improved to handle custom classed in `tab_select` The theme is not complete yet, but it is functional.
author Goffi <goffi@goffi.org>
date Tue, 19 May 2020 00:02:34 +0200
parents
children 60bf3e45d7b2
comparison
equal deleted inserted replaced
229:739c3e6999fa 230:0e69b5843c2f
1 {# macros to create form fields #}
2
3 {% macro field(type, name, label="", help="", required=false, icon_left=none, icon_right=none) %}
4 {# generic field
5 "class" keyword can be used to add classes
6 additional kwargs will be passed as attributes #}
7
8 <div class="field form_input {{kwargs.pop('class', '')}}">
9 {% set cur_id = name|next_gidx %}
10 {% if label %}
11 <label for="{{cur_id}}" class="label">{{label}}</label>
12 {% endif %}
13 <div class="control{% if icon_left %} has-icons-left{% endif %}{% if icon_right %} has-icons-right{% endif %}">
14 <input id="{{cur_id}}" class="input" type="{{type}}" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
15 {% if icon_left %}
16 <span class="icon is-left">
17 {# we use <i> with font from CSS instead of SVG, because using directly SVG doesn't play way with Bulma's control #}
18 <i class="icon-{{icon_left}}"></i>
19 </span>
20 {% endif %}
21 {% if icon_right %}
22 <span class="icon is-right">
23 <i class="icon-{{icon_right}}"></i>
24 </span>
25 {% endif %}
26 </div>
27 {% if help %}
28 <p class="help">{{help}}</p>
29 {% endif %}
30 </div>
31 {% endmacro %}
32
33 {% macro select(name, options_list, selected=none, required=false, multiple=false) %}
34 {# selection of elements with <select>
35
36 @param name: name of the field
37 @param options_list(list[str, str]): list of name, label of options
38 @param selected(none, list): list of select elements
39 @param required(bool): true this field is required
40 @param multiple(bool): true is multiple selection is possible
41 #}
42 <select name="{{name}}" class="form_input {{kwargs.pop('class', '')}}" {{"required" if required}}>
43 {% for value, label in options_list %}
44 <option value="{{value}}" {{'selected' if selected and value in selected}}>{{label}}</option>
45 {% endfor %}
46 </select>
47 {% endmacro %}
48
49 {% macro choices(name, choices_list, checked=none) %}
50 <div class="control {{kwargs.pop('class', '')}}">
51 {% for choice, label in choices_list %}
52 <label class="radio" for="{{name|cur_gidx}}">
53 <input id="{{name|next_gidx}}" type="radio" name="{{name}}" value="{{choice}}"{{" checked" if checked==choice}}> {{label}}
54 </label>
55 {% endfor %}
56 </div>
57 {% endmacro %}
58
59 {% macro int(name, label="", init=0) %}
60 {{ field("number", name=name, label=label, value=init, step=1, min=0, **kwargs) }}
61 {% endmacro %}
62
63 {% macro checkbox(name, label="", checked=false) %}
64 {% set cur_id = name|next_gidx %}
65 <label for="{{cur_id}}" class="label checkbox">{{label}}</label>
66 <input id="{{cur_id}}" type="checkbox" {% if checked %}checked=checked{% endif %}>
67 {% endmacro %}
68
69 {% macro text(name, label="", placeholder="", required=false) %}
70 {{ field("text", name=name, label=label, required=required, placeholder=placeholder, **kwargs) }}
71 {% endmacro %}
72
73 {% macro password(name, label="", required=false) %}
74 {{ field("password", name=name, label=label, required=required, **kwargs) }}
75 {% endmacro %}
76
77 {% macro email(name, label="", required=false) %}
78 {{ field("email", name=name, label=label, required=required, **kwargs) }}
79 {% endmacro %}
80
81 {% macro date(name, label="", required=false) %}
82 {{ field("date", name=name, label=label, required=required, **kwargs) }}
83 {% endmacro %}
84
85 {% macro url(name, label="", required=false) %}
86 {{ field("url", name=name, label=label, required=required, **kwargs) }}
87 {% endmacro %}
88
89 {% macro file(name, label="", required=false) %}
90 {{ field("file", name=name, label=label, required=required, **kwargs) }}
91 {% endmacro %}
92
93 {% macro textarea(name, label="", rows=none, cols=50, placeholder='', help='', required=false) %}
94 <div class="field form_input">
95 {% set cur_id = name|next_gidx %}
96 {% if label %}
97 <label for="{{cur_id}}" class="label">{{label}}</label>
98 {% endif %}
99 <textarea id="{{cur_id}}" name="{{name}}" {{ {"rows": rows, "cols": cols}|xmlattr }} placeholder="{{placeholder}}" {{"required" if required}} class="textarea"></textarea>
100 {% if help %}
101 <p class="help">{{help}}</p>
102 {% endif %}
103 </div>
104 {% endmacro %}
105
106 {% macro meta(name, value) %}
107 <input type="hidden" name="{{name}}" value="{{value}}">
108 {% endmacro %}
109
110 {% macro submit(text=_("Send"), id=none, class='') %}
111 {# submit button
112
113 @param text(str): label of the button
114 @param id(none, str): id of the element
115 #}
116 <div class="control {{class}}">
117 <button {{ 'id="{id}"'.format(id=id)|safe if id }} class="button is-primary form_submit {{kwargs.pop('class', '')}}" type="submit">{{text}}</button>
118 </div>
119 {% endmacro %}