Mercurial > libervia-templates

changeset 382:c573917ce388

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): redesign of call box: - hang up button has be moved next to other action buttons, and is now just an icon with no text, this save room and is coherent with usual A/V calls UIs - actions buttons (mute, desktop sharing, camera switching, hang up) and local video have been redesign to avoid overlapping on small screen. Local video is now a little higher. - remore video border has been suppressed
author Goffi <goffi@goffi.org>
date Fri, 18 Aug 2023 18:01:31 +0200
parents 387c8c5a3bee
children 4571cd4e68c1
files sat_templates/templates/bulma/call/call.html sat_templates/templates/bulma/static/call.css
diffstat 2 files changed, 49 insertions(+), 42 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/bulma/call/call.html	Fri Aug 18 17:58:04 2023 +0200
+++ b/sat_templates/templates/bulma/call/call.html	Fri Aug 18 18:01:31 2023 +0200
@@ -5,7 +5,7 @@
 
 {% block body %}
     {{ icon_defs(
-    "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle", "desktop", "exchange"
+    "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle", "desktop", "exchange", "phone"
     ) }}
     <audio id="audio_player" class="is-hidden" src="{{media_path}}sounds/notifications/ring_1.mp3" preload="auto" loop></audio>
     <section class="section is-full-below-menu" style="position: relative" >
@@ -53,6 +53,8 @@
     </div>
 
     {# Calls #}
+
+
     <div class="is-hidden is-flex is-flex-direction-column" id="call_container">
 
         <div class="columns is-1 is-centered is-vcentered m-0" id="call_header">
@@ -62,41 +64,52 @@
                     <div class="column" id="call_status_wrapper"></div>
                 </div>
             </div>
-            <div class="column is-narrow has-text-centered px-0" id="hangup_wrapper">
-                <button class="button is-danger" id="hangup_btn">{% trans %}Hang Up{% endtrans %}</button>
-            </div>
         </div>
 
         <div id="call_box" class="is-relative mt-3 is-flex-grow-1">
             <video id="remote_video" class="is-video-only" autoplay playsinline></video>
+
             <div class="fullscreen-btn is-video-only">
-                <button class="button is-light" id="full_screen_btn">
+                <button class="button is-light" id="full_screen_btn" aria-label="{{ _('Enter full screen') }}">
                     {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
                 </button>
-                <button class="button is-light is-hidden" id="exit_full_screen_btn">
+                <button class="button is-light is-hidden" id="exit_full_screen_btn" aria-label="{{ _('Exit full screen') }}">
                     {{ icon('resize-small', cls='image is-24x24 is-inline-block') }}
                 </button>
             </div>
+
             <video id="local_video" class="is-video-only" autoplay playsinline></video>
 
-            <div class="controls is-flex is-justify-content-center is-align-items-center p-4">
-                <button class="button is-success mx-2" id="mute_audio_btn">
-                    {{ icon('volume-up', cls='image is-24x24 is-inline-block') }}
-                </button>
-                <button class="button is-success mx-2 is-video-only" id="mute_video_btn">
-                    {{ icon('videocam', cls='image is-24x24 is-inline-block') }}
-                </button>
-                <button class="button is-success mx-2 inactive screen-off is-hidden-touch" id="share_desktop_btn">
-                    {{ icon('desktop', cls='image is-24x24 is-inline-block') }}
-                </button>
-                <button class="button is-success mx-2" id="switch_camera_btn">
-                    {{ icon('exchange', cls='image is-24x24 is-inline-block') }}
-                </button>
+            <div class="call-controls columns is-centered is-mobile">
+                <div class="column is-narrow">
+                    <button class="button is-success" id="mute_audio_btn" aria-label="{{ _('Mute audio') }}">
+                        {{ icon('volume-up', cls='image is-24x24 is-inline-block') }}
+                    </button>
+                </div>
+                <div class="column is-narrow">
+                    <button class="button is-success is-video-only" id="mute_video_btn" aria-label="{{ _('Mute video') }}">
+                        {{ icon('videocam', cls='image is-24x24 is-inline-block') }}
+                    </button>
+                </div>
+                <div id="share_desktop_column" class="column is-narrow is-hidden-touch">
+                    <button class="button is-success inactive screen-off" id="share_desktop_btn" aria-label="{{ _('Share desktop') }}">
+                        {{ icon('desktop', cls='image is-24x24 is-inline-block') }}
+                    </button>
+                </div>
+                <div id="switch_camera_column" class="column is-narrow is-hidden-desktop">
+                    <button class="button is-success" id="switch_camera_btn" aria-label="{{ _('Switch camera') }}">
+                        {{ icon('exchange', cls='image is-24x24 is-inline-block') }}
+                    </button>
+                </div>
+                <div class="column is-narrow">
+                    <button class="button is-danger" id="hangup_btn" aria-label="{{ _('Hang up') }}">
+                        {{ icon('phone', cls='image is-24x24 is-inline-block') }}
+                    </button>
+                </div>
+            </div>
 
-            </div>
         </div>
     </div>
-
 </div>
 </section>
 {% endblock body %}
--- a/sat_templates/templates/bulma/static/call.css	Fri Aug 18 17:58:04 2023 +0200
+++ b/sat_templates/templates/bulma/static/call.css	Fri Aug 18 18:01:31 2023 +0200
@@ -2,7 +2,6 @@
     position: relative;
     height: 100%;
     width: 100%;
-
 }
 
 #call_container {
@@ -12,25 +11,23 @@
 }
 
 #remote_video, #local_video {
-  border: 3px solid #eee;
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
   object-fit: contain;
   background-color: #000;
 }
 
+#local_video {
+  border: 3px solid #eee;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+}
+
 #remote_video {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-#hangup_btn {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-}
-
 .fullscreen-btn {
   position: absolute;
   top: 10px;
@@ -40,23 +37,25 @@
 
 #local_video {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  /* We set some distance to the bottom to avoid overlap with action buttons */
+  bottom: 60px;
+  right: 10px;
   width: 30%;
   height: 30%;
 }
 
-.controls {
+.call-controls {
   position: absolute;
   bottom: 10px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  left: 10px;
+  right: 10px;
   z-index: 2;
 }
 
+#hangup_btn svg {
+    transform: rotate(135deg);
+}
+
 .inactive::after {
     content: "/";
     position: absolute;
@@ -83,32 +82,27 @@
     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;
 }