Mercurial > libervia-templates
changeset 374:5646df8bd391
bulma (call): calling mode improvments:
- instead of a "switch" button, there are now 2 button with only an icon, one for video
call and the other for audio call, they appear on the same row as the search bar
- search item can now be extended using "call" blocks, and options are used
- call search items don't show group, and now display an "extra" menu (3 dots menu) with a
dropdown to select audio or video call.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Tue, 15 Aug 2023 17:12:18 +0200 |
| parents | c5609be6c34e |
| children | 88d5cb043a65 |
| files | sat_templates/templates/bulma/call/call.html sat_templates/templates/bulma/call/search_item.html sat_templates/templates/bulma/components/search_item.html sat_templates/templates/bulma/static/call.css |
| diffstat | 4 files changed, 113 insertions(+), 30 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/call/call.html Mon Aug 14 17:01:35 2023 +0200 +++ b/sat_templates/templates/bulma/call/call.html Tue Aug 15 17:12:18 2023 +0200 @@ -13,25 +13,36 @@ {# Search #} <div id="search_container" class="is-overlay"> - <div id="search_header" class="columns is-1"> - <div class="column"> - <input class="input" type="search" id="search" placeholder="Enter contact's name or address"> - </div> + + <div class="container"> + <div class="columns is-vcentered is-mobile"> - <div class="column is-narrow buttons has-addons"> - <button class="button is-primary" id="call_btn"> - <i class="icon-videocam" aria-hidden="true"></i> - {% trans %}Video Call{% endtrans %} - </button> - <button class="button is-primary" id="toggle_call_mode_btn"> - <span class="icon is-small"> - <i class="icon-exchange" aria-hidden="true"></i> + <!-- Search bar --> + <div class="column is-flex-grow-1"> + <input class="input" type="search" id="search" placeholder="Enter contact's name or address" aria-label="Search for contacts"> + </div> + + <!-- Video Call Button --> + <div class="column is-narrow"> + <button class="button is-primary" id="video_call_btn" aria-label="Initiate Video Call"> + <span class="icon"> + <i class="icon-videocam"></i> </span> </button> </div> + + <!-- Audio Call Button --> + <div class="column is-narrow"> + <button class="button is-light" id="audio_call_btn" aria-label="Initiate Audio Call"> + <span class="icon"> + <i class="icon-phone"></i> + </span> + </button> + </div> + </div> </div> - <div id="contacts" class="columns is-multiline is-mobile"> + <div id="contacts" class="columns is-multiline is-mobile is-half-touch"> </div> </div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/call/search_item.html Tue Aug 15 17:12:18 2023 +0200 @@ -0,0 +1,42 @@ +{% extends 'components/search_item.html' %} + +{% import 'components/avatar.html' as avatar with context %} + +{% block call %} +<div class="level is-mobile"> + <div class="level-right"> + <div class="level-item"> + <div class="search-item-extra dropdown is-right"> + <div class="dropdown-trigger"> + <button class="button is-white is-small" aria-haspopup="true" aria-controls="dropdown-menu"> + <span class="icon"> + <i class="icon-dot-3-vert"></i> + </span> + </button> + </div> + <div class="dropdown-menu" role="menu"> + + <div class="dropdown-content"> + <!-- Video Call Option --> + <a class="click-to-video dropdown-item"> + <span class="icon"> + <i class="icon-videocam"></i> + </span> + {% trans %}video call{% endtrans %} + </a> + + <!-- Audio Call Option --> + <a class="click-to-audio dropdown-item"> + <span class="icon"> + <i class="icon-phone"></i> + </span> + {% trans %}audio call{% endtrans %} + </a> + </div> + + </div> + </div> + </div> + </div> +</div> +{% endblock %}
--- a/sat_templates/templates/bulma/components/search_item.html Mon Aug 14 17:01:35 2023 +0200 +++ b/sat_templates/templates/bulma/components/search_item.html Tue Aug 15 17:12:18 2023 +0200 @@ -1,5 +1,5 @@ {% import 'components/avatar.html' as avatar with context %} -<div class="column is-2-desktop is-4-touch"> +<div class="column is-2-desktop is-6-touch"> <div class="card x-is-hoverable"> <a href="{{url}}"> <div class="card-image is-flex has-items-centered px-1 py-1"> @@ -7,16 +7,20 @@ </div> <div class="card-content has-text-centered has-text-shortenable px-1 py-1"> <span>{{identities[item.entity].nicknames[0] if identities[item.entity].nicknames else item.entity}}</span> - <div class="search-item__group-tags is-flex is-justify-content-center mt-2"> - {% if item.groups %} - <div class="tags"> - {% for group in item.groups %} - <span class="tag is-rounded is-light">{{ group }}</span> - {% endfor %} + {% if not options.no_group %} + <div class="search-item__group-tags is-flex is-justify-content-center mt-2"> + {% if item.groups %} + <div class="tags"> + {% for group in item.groups %} + <span class="tag is-rounded is-light">{{ group }}</span> + {% endfor %} + </div> + {% endif %} </div> - {% endif %} - </div> + {% endif %} </div> </a> + {% block call %}{% endblock %} </div> </div> +p
--- a/sat_templates/templates/bulma/static/call.css Mon Aug 14 17:01:35 2023 +0200 +++ b/sat_templates/templates/bulma/static/call.css Tue Aug 15 17:12:18 2023 +0200 @@ -74,15 +74,41 @@ color: #999; } -.dropdown .dropdown-menu { - display: none; -} - -.dropdown.is-active .dropdown-menu { - display: block; -} - .call_status { padding-top: 1.3rem; padding-bottom: 1.3rem; } + +.dropdown-menu{ + min-width: 0; +} + +/* Hide the call button by default on larger screens */ +.card .dropdown-trigger { + opacity: 0; + transition: opacity 0.3s; +} + +/* Show the button when the card is hovered */ +.card:hover .dropdown-trigger { + opacity: 1; +} + +/* Ensure it's always visible on smaller screens */ +@media (max-width: 768px) { + .card .dropdown-trigger { + opacity: 1; + } +} + +/* Position the button at the top right */ +.level-right { + position: absolute; + top: 0.5rem; + right: 0.5rem; +} + +/* Add some spacing between the icon and the edges of the button */ +.icon-dot-3-vert { + margin: 0 0.5rem; +}