Mercurial > libervia-templates
changeset 396:9847e6dbeefa
bulma (call): add group call related templates.
rel: 430
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Wed, 15 May 2024 17:39:47 +0200 |
| parents | 5072e4a4e261 |
| children | b313a7d343af |
| files | sat_templates/templates/bulma/call/call.html sat_templates/templates/bulma/call/group_peer.html sat_templates/templates/bulma/components/avatar.html sat_templates/templates/bulma/components/search_item.html sat_templates/templates/bulma/static/call.css sat_templates/templates/bulma/static/styles.css |
| diffstat | 6 files changed, 91 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/call/call.html Sat May 11 13:55:03 2024 +0200 +++ b/sat_templates/templates/bulma/call/call.html Wed May 15 17:39:47 2024 +0200 @@ -44,6 +44,17 @@ </span> </button> </div> + + <!-- Group Call Button --> + <div class="column is-narrow is-hidden"> + <button class="button is-info" id="group_call_btn" aria-label="Initiate Group Call"> + <span class="icon"> + <i class="icon-group"></i> + </span> + <span>Group Call</span> + </button> + </div> + </div> </div> @@ -54,7 +65,6 @@ {# 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"> @@ -108,7 +118,7 @@ <input type="file" id="send_file_input" style="display:none;" /> </div> <div class="column is-narrow"> - <button class="button is-danger" id="hangup_btn" aria-label="{{ _('Hang up') }}"> + <button class="button is-danger is-rotated-135" id="hangup_btn" aria-label="{{ _('Hang up') }}"> {{ icon('phone', cls='image is-24x24 is-inline-block') }} </button> </div> @@ -116,6 +126,38 @@ </div> </div> + + + {# Group Calls #} + + <div class="is-hidden is-flex is-flex-direction-column" id="group_call_container"> + <!-- Status Bar (Header) with Fullscreen Button on the Right --> + <div class="columns"> + <div class="column is-11" id="group_call_status_wrapper"></div> + <div class="column"> + <div class="buttons has-addons is-right"> + <button class="button is-light" id="group_full_screen_btn"> + {{ icon('resize-full', cls='image is-24x24 is-inline-block') }} + </button> + </div> + </div> + </div> + + <!-- Peer Video Grid - Adjusted for dynamic resizing --> + <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-0" id="group_video_grid" style="flex-wrap: wrap;"> + <!-- Peer templates dynamically loaded here --> + </div> + + <!-- Call Control for Hangup --> + <div class="group-call-controls columns is-centered is-mobile"> + <div class="column is-narrow"> + <button class="button is-danger is-rotated-135" id="group_hangup_btn"> + {{ icon('phone', cls='image is-24x24 is-inline-block') }} + </button> + </div> + </div> + </div> + </div> </section> {% endblock body %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/call/group_peer.html Wed May 15 17:39:47 2024 +0200 @@ -0,0 +1,27 @@ +<div class="column peer_video_container is-flex-grow-1"> + <div class="box group-peer-avatar is-hidden"> + <div class="card"> + <div class="card-content"> + <figure class="image is-128x128 is-rounded" style="margin: auto;"> + {%- if identities is defined -%} + {% set identity = identities.get(entity) %} + {% set nick = identity.nicknames[0] if identity.nicknames else jid %} + {%- if identity.avatar.filename %} + <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}" alt="{{ nick }}" style="height: 100%; width: 100%;"> + {% else %} + <span class="is-avatar is-128x128 image has-background-light is-flex has-items-centered has-text-weight-bold is-size-1">{{nick|first|upper}}</span> + {%- endif -%} + {%- endif -%} + </figure> + </div> + <div class="card-content has-text-centered"> + {%- if identities is defined -%} + <div class="tag is-rounded is-info has-text-weight-semibold" style="display: inline-block;"> + {{ nick }} + </div> + {%- endif -%} + </div> + </div> + </div> + <video class="peer_video_stream" autoplay playsinline tabindex="0" style="width: 100%; height: auto; object-fit: cover;"></video> +</div>
--- a/sat_templates/templates/bulma/components/avatar.html Sat May 11 13:55:03 2024 +0200 +++ b/sat_templates/templates/bulma/components/avatar.html Wed May 15 17:39:47 2024 +0200 @@ -1,7 +1,7 @@ {% macro avatar(jid, class="is-48x48") %} {%- if identities is defined -%} {% set identity = identities.get(jid) %} - {%- if identity.avatar %} + {%- if identity.avatar.filename %} <div class="is-avatar image {{class}}"> <img src="/cache/common/{{identity.avatar.filename}}"> </div>
--- a/sat_templates/templates/bulma/components/search_item.html Sat May 11 13:55:03 2024 +0200 +++ b/sat_templates/templates/bulma/components/search_item.html Wed May 15 17:39:47 2024 +0200 @@ -1,6 +1,10 @@ -{% import 'components/avatar.html' as avatar with context %} <div class="column is-2-desktop is-6-touch"> <div class="card x-is-hoverable"> + {% if multiple_selection %} + <div class="checkbox-container pl-1 pt-1"> + <input type="checkbox" class="search-item__checkbox"> + </div> + {% endif %} <a href="{{url}}"> <div class="card-image is-flex has-items-centered px-1 py-1"> {{ avatar.avatar(item.entity, "is-64x64") }}
--- a/sat_templates/templates/bulma/static/call.css Sat May 11 13:55:03 2024 +0200 +++ b/sat_templates/templates/bulma/static/call.css Wed May 15 17:39:47 2024 +0200 @@ -52,7 +52,7 @@ z-index: 2; } -#hangup_btn svg { +.is-rotated-135 svg { transform: rotate(135deg); }
--- a/sat_templates/templates/bulma/static/styles.css Sat May 11 13:55:03 2024 +0200 +++ b/sat_templates/templates/bulma/static/styles.css Wed May 15 17:39:47 2024 +0200 @@ -82,6 +82,12 @@ right: 0.25rem; } +.is-top-left { + position: absolute; + top: 0.25em; + left: 0.25em; +} + .has-items-centered { align-items: center; justify-content: center; @@ -186,6 +192,13 @@ * selections * **************/ +.is-selected-search_item { + border: solid 2px #3273dc; + background-color: #eff3fa; + transform: scale(1.03); + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); +} + .is-not-selectable { user-select: none; }