Mercurial > libervia-templates

diff sat_templates/templates/bulma/call/call.html @ 374:5646df8bd391

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 a603cf0fa5d1
children 44337471d390
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>