view sat_templates/templates/bulma/call/search_item.html @ 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
children 5072e4a4e261
line wrap: on
line source

{% 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 %}