# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1692112338 -7200
# Node ID 5646df8bd3916c6016fa18ace1b572cce563c289
# Parent  c5609be6c34e90edc741dc09b22555d6a098a7d4
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.

diff -r c5609be6c34e -r 5646df8bd391 sat_templates/templates/bulma/call/call.html
--- 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>
diff -r c5609be6c34e -r 5646df8bd391 sat_templates/templates/bulma/call/search_item.html
--- /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 %}
diff -r c5609be6c34e -r 5646df8bd391 sat_templates/templates/bulma/components/search_item.html
--- 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
diff -r c5609be6c34e -r 5646df8bd391 sat_templates/templates/bulma/static/call.css
--- 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;
+}