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

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 b85b72f44f01
comparison
equal deleted inserted replaced
229:739c3e6999fa 230:0e69b5843c2f
1 {% import 'input/field.html' as field %}
2
3 {# generate methods #}
4
5 {% macro generate_container(cont, config) %}
6 {% if cont.type == 'vertical' %}
7 {{ vertical_container(cont, config) }}
8 {% elif cont.type == 'pairs' %}
9 {{ pairs_container(cont, config) }}
10 {% elif cont.type == 'label' %}
11 {{ label_container(cont, config) }}
12 {% endif %}
13 {% endmacro %}
14
15 {% macro generate_widget(wid, config, id=none) %}
16 {% if wid.type == 'text' %}
17 {{ text_widget(wid, config, id=id) }}
18 {% elif wid.type == 'label' %}
19 {{ label_widget(wid, config) }}
20 {% elif wid.type == 'string' %}
21 {{ string_widget(wid, config, id=id) }}
22 {% elif wid.type == 'jid' %}
23 {# TODO: proper JID widget #}
24 {{ string_widget(wid, config, id=id) }}
25 {% elif wid.type == 'textbox' %}
26 {{ textbox_widget(wid, config, id=id) }}
27 {% elif wid.type == 'xhtmlbox' %}
28 {{ xhtmlbox_widget(wid, config, id=id) }}
29 {% elif wid.type == 'list' %}
30 {{ list_widget(wid, config, id=id) }}
31 {% endif %}
32 {% endmacro %}
33
34 {% macro generate_children(cont, config) %}
35 {% for child in cont.children %}
36 {% if child.category == 'container' %}
37 {{ generate_container(child, config) }}
38 {% else %}
39 {{ generate_widget(child, config) }}
40 {% endif %}
41 {% endfor %}
42
43 {% endmacro %}
44
45 {% macro generate(xmlui, form=true, filters=none, attributes=none, ignore=none) %}
46 {# generate HTML from XMLUI
47 @param xmlui(template_xmlui.XMLUIPanel): xmlui to use
48 @param form(bool): if true will generate form elements
49 @param filters(dict,none): filters as expected by item_filter
50 @param attributes(dict,none): extra attributes to put on named widgets
51 #}
52 {% set config = {
53 'form':form,
54 'filters':filters or {},
55 'attrs': attributes or {},
56 'ignore': ignore or [],
57 }
58 %}
59 {{ generate_container(xmlui.main_cont, config) }}
60 {% endmacro %}
61
62 {% macro generate_table(xmlui_items, fields, formatters, tr_class_fields, on_click) %}
63 {# generate a HTML table from requested widgets names
64 @param xmlui_items(iterable[unicode]): list of xmlui to show (one per row)
65 @param fields(tuple[unicode,unicode]): fields to show (name, label)
66 @param formatters(dict): dictionary of templates to format values:
67 field_name => template
68 if no formatter is set (or None is used) for a field, it will be used unmodified.
69 current xmlui items will be set as "item" key
70 @param tr_class_fields(iterable[unicode]): name of fields to use as class
71 class will be "{name}_{value}" where name is field name, and value field value
72 all lowercase/stripped
73 @param on_click(data_objects.OnClick): thing to do when clicking on a row
74 #}
75 {% if formatters is undefined %}
76 {% set formatters = {} %}
77 {% endif %}
78 {% if on_click is undefined %}
79 {% set on_click = {} %}
80 {% endif %}
81 <table>
82 <thead>
83 <tr>
84 {% for name,label in fields %}
85 <th>{{ label }}</th>
86 {% endfor %}
87 </tr>
88 </thead>
89 <tbody>
90 {% for xmlui in xmlui_items %}
91 {% set link=on_click.formatUrl(item=xmlui.widget_value) if on_click.url else none %}
92 <tr {{ {'class': xmlui|xmlui_class(tr_class_fields)}|xmlattr }}>
93
94 {% for name,label in fields %}
95 <td {{ {'class': 'td_'+name}|xmlattr }}>
96 {% for value in xmlui.widgets[name].values %}
97 <a {{ {'href':link}|xmlattr }}>{{ value|adv_format(formatters.get(name),item=xmlui.widget_value) }}</a>
98 {% endfor %}
99 </td>
100 {% endfor %}
101 </tr>
102 {% endfor %}
103 </tbody>
104 </table>
105 {% endmacro %}
106
107
108
109
110 {% macro generate_list(xmlui_items, fields, formatters, item_class_fields, field_class_map, on_click) %}
111 {# generate a list of rendered XMLUI from requested widgets names
112 very similar to generate_table but generate a list instead of a tabme
113 @param xmlui_items(iterable[unicode]): list of xmlui to show
114 @param fields(tuple[unicode,unicode]): fields to show (name, label)
115 @param formatters(dict): dictionary of templates to format values:
116 field_name => template
117 if no formatter is set (or None is used) for a field, it will be used unmodified.
118 current xmlui items will be set as "item" key for the template
119 @param item_class_fields(iterable[unicode]): name of fields to use as class
120 class will be "{name}_{value}" where name is field name, and value field value
121 all lowercase/stripped
122 @param field_class_map(dict): dictionary of field name to classes to use
123 @param on_click(data_objects.OnClick): thing to do when clicking on a row
124 #}
125 {% if formatters is undefined %}
126 {% set formatters = {} %}
127 {% endif %}
128 {% if on_click is undefined %}
129 {% set on_click = {} %}
130 {% endif %}
131 {% if field_class_map is undefined %}
132 {% set field_class_map = {} %}
133 {% endif %}
134 {% for xmlui in xmlui_items %}
135 {% set link=on_click.formatUrl(item=xmlui.widget_value) if on_click.url else none %}
136 <div class="media x-is-hoverable">
137 <div class="media-content">
138 <a {{ {'class': 'has-text-black ' + xmlui|xmlui_class(item_class_fields),
139 'href':link}|xmlattr }}>
140 <div class="content">
141 {% for name,label in fields %}
142 <span {{ {'class': 'xmlui_field__'+name}|xmlattr }}>
143 {% for label in xmlui.widgets.get(name, {}).labels %}
144 <span {{ {'class': field_class_map.get(name)}|xmlattr }}>{{ label|adv_format(formatters.get(name),item=xmlui.widget_value) }}</span>
145 {% endfor %}
146 </span>
147 {% endfor %}
148 </div>
149 </a>
150 </div>
151 </div>
152 {% endfor %}
153 {% endmacro %}
154
155
156
157
158
159 {# containers #}
160
161 {% macro vertical_container(cont, config) %}
162 <div class="xmlui_cont xmlui_cont_vertical">
163 {{ generate_children(cont, config) }}
164 </div>
165 {% endmacro %}
166
167 {% macro pairs_container(cont, config) %}
168 {# TODO: proper impelmentation (do the same as vertical container for now #}
169 <div class="xmlui_cont xmlui_cont_vertical">
170 {{ generate_children(cont, config) }}
171 </div>
172 {% endmacro %}
173
174 {% macro label_container(cont, config) %}
175 <div class="xmlui_cont xmlui_cont_vertical">
176 {% for child in cont.children %}
177 {% if loop.index is odd %}
178 {# label #}
179 {% if child.for_name not in config.ignore %}
180 <div class="field">
181 {% if child.type == 'label' %}
182 {% set for_ = ('wid_' + (child.for_name or child.name or '_noname'))|next_gidx %}
183 {{ label_widget(child, config, for=for_) }}
184 {% endif %}
185 {% endif %}
186 {% else %}
187 {# widget #}
188 {% if child.name not in config.ignore %}
189 {% set id = ('wid_' + (child.name or '_noname'))|cur_gidx %}
190 {{ generate_widget(child, config, id=id) }}
191 </div>
192 {% endif %}
193 {% endif %}
194 {% endfor %}
195 </div>
196 {% endmacro %}
197
198
199 {# widgets #}
200
201 {% macro text_widget(wid, config, id=none) %}
202 {% if config.form %}
203 <input class="input is-static xmlui_widget xmlui_text" type="text" {{ {'id':id, 'value': wid|item_filter(config.filters)|default('\u00A0',true)}|xmlattr }}>
204 {% else %}
205 <p class="xmlui_widget xmlui_text" {{ {'id':id}|xmlattr }}>
206 {{- wid|item_filter(config.filters)|default('\u00A0',true) -}}
207 </p>
208 {% endif %}
209 {% endmacro%}
210
211 {% macro label_widget(wid, config, for=none) %}
212 {% if config.form %}
213 <label class="label xmlui_widget xmlui_label" {{ {'for':for}|xmlattr }}>
214 {{wid|item_filter(config.filters)}}
215 </label>
216 {% else %}
217 <span class="label xmlui_widget xmlui_label" {{ {'id':none if not for else 'label_%s'|format(for)}|xmlattr }}>{{wid|item_filter(config.filters)}}</span>
218 {% endif %}
219 {% endmacro%}
220
221 {% macro string_widget(wid, config, id=none) %}
222 {% if config.form %}
223 <input class="input xmlui_widget xmlui_string" type="text" {{ {'name':wid.name, 'id':id, 'value':wid|item_filter(config.filters)}|dict_ext(config.attrs, wid.name)|xmlattr }}
224 {{ "readonly" if wid.read_only }} >
225 {% else %}
226 <p class="content">
227 {{- wid|item_filter(config.filters) -}}
228 </p>
229 {% endif %}
230 {% endmacro%}
231
232 {% macro textbox_widget(wid, config, id=none) %}
233 {% if config.form %}
234 <textarea class="textarea xmlui_widget xmlui_textbox" rows="10" cols="50" {{ {'name':wid.name, 'id':id}|dict_ext(config.attrs, wid.name)|xmlattr }}>
235 {{- wid|item_filter(config.filters) -}}
236 </textarea>
237 {% else %}
238 <p class="content xmlui_widget xmlui_textbox" {{ {'id':id}|xmlattr }}>
239 {{- wid|item_filter(config.filters) -}}
240 </p>
241 {% endif %}
242 {% endmacro%}
243
244 {% macro xhtmlbox_widget(wid, config, id=none) %}
245 {% if config.form and not wid.read_only %}
246 <textarea class="textarea xmlui_widget xmlui_xhtmlbox" rows="10" cols="50" {{ {'name':wid.name, 'id':id}|dict_ext(config.attrs, wid.name)|xmlattr }}>
247 {{- wid|item_filter(config.filters) -}}
248 </textarea>
249 {% else %}
250 <div class="content xmlui_widget xmlui_xhtmlbox" {{ {'id':id}|xmlattr }}>
251 {{- wid|item_filter(config.filters) -}}
252 </div>
253 {% endif %}
254 {% endmacro%}
255
256 {% macro list_widget(wid, config, id=none) %}
257 {% if config.form %}
258 <div class="select">
259 <select class="xmlui_widget xmlui_list" {{ {'name':wid.name, 'id':id}|dict_ext(config.attrs, wid.name)|xmlattr }}>
260 {% for value,label in wid.options %}
261 <option {{ {'value':value}|xmlattr }} {{ 'selected' if value in wid.selected }}>
262 {{- label -}}
263 </option>
264 {% endfor %}
265 </select>
266 </div>
267 {% else %}
268 <div class="content xmlui_widget xmlui_list" {{ {'id':id}|xmlattr }}>
269 {% for value,label in wid.items %}
270 <span class="xmlui_list_item value_{{value|attr_escape}}">
271 {{- label -}}
272 </span>
273 {% endfor %}
274 </div>
275 {% endif %}
276 {% endmacro%}