Mercurial > libervia-templates
changeset 129:ca42dc037bbf
file (discover): new discovery page:
the discovery page will show service, own devices and roster contact devices offering file sharing.
An extra field allow to enter free jid.
Added a small message in photo/discover.html has photo album discovery is not yes implemented.
New block and images macros.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Sat, 24 Mar 2018 11:16:14 +0100 |
| parents | 4f27ce980ced |
| children | 1a590a16bd20 |
| files | default/components/block.html default/components/images.html default/file/discover.html default/photo/discover.html default/static/styles.css |
| diffstat | 5 files changed, 166 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/components/block.html Sat Mar 24 11:16:14 2018 +0100 @@ -0,0 +1,17 @@ +{% macro separator(label, align='center') %} +{# display a bloc separator + @param label(unicode): label to show + @param align(unicode): one of "left", "center", "right" +#} + <div class="block_separator"> + {% if align in ('center', 'right') %} + <div class="block_separator__line"></div> + {% endif %} + <div class="block_separator__label"> + {{label}} + </div> + {% if align in ('center', 'left') %} + <div class="block_separator__line"></div> + {% endif %} + </div> +{% endmacro %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/components/images.html Sat Mar 24 11:16:14 2018 +0100 @@ -0,0 +1,15 @@ +{% macro get_icon_client(ident) %} + {% if ident.client %} + {% if ident.client.pc %} + {{ icon('desktop', cls='file__icon') }} + {% elif ident.client.phone %} + {{ icon('mobile', cls='file__icon') }} + {% elif ident.client.web %} + {{ icon('globe', cls='file__icon') }} + {% elif ident.client.console %} + {{ icon('terminal', cls='file__icon') }} + {% else %} + {{ icon('desktop', cls='file__icon') }} + {% endif %} + {% endif %} +{% endmacro %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/file/discover.html Sat Mar 24 11:16:14 2018 +0100 @@ -0,0 +1,73 @@ +{% extends 'base/base.html' %} +{% import 'components/block.html' as block %} +{% import 'components/images.html' as images with context %} +{% import 'input/form.html' as form with context %} +{% import 'input/field.html' as field with context %} + +{% block body %} +{{ icon_defs('server', 'desktop', 'mobile', 'globe', 'terminal') }} +<p class="instructions--head"> + {% trans %} + Please select the device you want to access + {% endtrans %} +</p> +<div class="files"> + {% if disco_service_entities %} + <div class="files__services"> + {{ block.separator(_("services")) }} + <ul class="grid grid--center"> + {% for entity,ident in disco_service_entities.iteritems() %} + <li class='grid__item grid__item--medium grid__item--selectable'> + <a href="{{entities_url[entity]}}"> + {{ icon('server', cls='file__icon') }} + <span> + {% if disco_service_entities|count == 1 %} + {% trans %}your server{% endtrans %} + {% else %} + {{ ident.values()[0].values()[0][0] }} + {% endif %} + </span> + </a> + </li> + {% endfor %} + </ul> + </div> + {% endif %} + {% if disco_own_entities %} + <div class="files__own"> + {{ block.separator(_("your devices")) }} + <ul class="grid grid--center"> + {% for entity,ident in disco_own_entities.iteritems() %} + <li class='grid__item grid__item--medium grid__item--selectable'> + <a href="{{entities_url[entity]}}"> + {{images.get_icon_client(ident)}} + <span>{{ ident.values()[0].values()[0][0] }}</span> + </a> + </li> + {% endfor %} + </ul> + </div> + {% endif %} + {% if disco_roster_entities %} + <div class="files__roster"> + {{ block.separator(_("your contacts devices")) }} + <ul class="grid grid--center"> + {% for entity,ident in disco_roster_entities.iteritems() %} + <li class='grid__item grid__item--medium grid__item--selectable'> + <a href="{{entities_url[entity]}}"> + {{images.get_icon_client(ident)}} + <span>{{entity.userhost()}}</span> + </a> + </li> + {% endfor %} + </ul> + </div> + {% endif %} +</div> + +<p class="instructions--alt">{% trans %}Or enter a full jid of a device{% endtrans %}</p> +{% call form.form(class="form_single") %} + {{ field.text("jid", _("device full jid"), required=true)}} + {{ field.submit(_("Access")) }} +{% endcall %} +{% endblock body %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/photo/discover.html Sat Mar 24 11:16:14 2018 +0100 @@ -0,0 +1,11 @@ +{% extends 'base/base.html' %} +{% import 'input/form.html' as form with context %} +{% import 'input/field.html' as field with context %} + +{% block body %} +<p class="instructions--alt">{% trans %}Photo discovery is not implemented yet, however you can enter a jid below to find its albums{% endtrans %}</p> +{% call form.form(class="form_single") %} + {{ field.text("jid", _("device full jid"), required=true)}} + {{ field.submit(_("Access")) }} +{% endcall %} +{% endblock body %}
--- a/default/static/styles.css Sat Mar 24 11:14:14 2018 +0100 +++ b/default/static/styles.css Sat Mar 24 11:16:14 2018 +0100 @@ -89,6 +89,56 @@ font-style: italic; } +/*** blocks ***/ + +.block_separator { + font-size: 1.4em; + display: flex; +} + +.block_separator__label { + display: inline-block; + margin: 0 0.2em; +} + +.block_separator__line { + height: 1px; + background: #ccc; + flex: 1; + margin-top: 0.7em; +} + +/*** grids ***/ + +.grid { + list-style: none; + display: flex; + flex-wrap: wrap; +} + +.grid--center { + justify-content: center; +} + +.grid__item>a { + text-decoration: none; + color: inherit; +} + +.grid__item--medium { + width: 170px; + padding: 0.2em; + text-align: center; +} + +.grid__item--selectable { + cursor: pointer; +} + +.grid__item--selectable:hover { + background-color: var(--select-bg-color); +} + /*** icons ***/ .icon--medium {