Mercurial > libervia-templates
diff sat_templates/templates/bulma/call/call.html @ 382:c573917ce388
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 | 788729e741cc |
| children | 3c2bf7c30767 |
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 %}