Mercurial > libervia-templates

diff sat_templates/templates/bulma/chat/chat.html @ 403:65c53ec5e777

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Bulma: complete redesign: This is a WIP full redesign of the whole web UI. Only chat is usable at the moment, many things are broken. The design uses the new Bulma v1+, has a look closer to industry standards, paves the way for a dark theme, and should be easy to use. It's a basis for coming features such as UI/UX for threads. rel 457
author Goffi <goffi@goffi.org>
date Fri, 11 Apr 2025 21:32:05 +0200
parents 8b990c78d4b5
children 66f98ee041d8
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html	Sat Oct 26 22:53:26 2024 +0200
+++ b/sat_templates/templates/bulma/chat/chat.html	Fri Apr 11 21:32:05 2025 +0200
@@ -1,76 +1,160 @@
-{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
+{% if not embedded %}
+    {% set loading_screen = true %}
+    {% extends 'base/base.html' %}
+{% endif %}
+{% from 'components/collapsible_card.html' import collapsible_card %}
 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
 {% block body %}
     {{ icon_defs(
-    "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach",
-    "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled",
-    "quote-left", "trash-empty"
+   "share-nodes", "ellipsis","regular face-smile", "quote-left", "paperclip", "pencil", "regular trash-can"
     ) }}
 
-    {# TODO: this should be done in a more generic way in dialog module #}
-    <div id="modal" class="modal">
-        <div class="modal-background"></div>
-        <div class="modal-content">
-            <p class="image">
-            <img id="modal-image" src="" alt="">
-            </p>
-        </div>
-        <button class="modal-close is-large" aria-label="close"></button>
-    </div>
+
 
-    <div id="chat-panel" class="is-flex is-flex-direction-column is-justify-content-space-between is-align-items-stretch pt-4"> <!-- calculate height depending on your navbar size -->
-        <!-- Header -->
-        <div id="header" class="box p-4 is-flex is-justify-content-space-between is-align-items-center is-flex-shrink-0">
-            {% if subject is defined %}
-                <h2 id="room-subject" class="title is-5 has-text-weight-bold">{{- subject|urlize(nofollow=true,target='_blank') -}}</h2>
-            {% endif %}
+    <div class="columns is-gapless chat-container">
+        <!-- Left Panel -->
+        <div class="column is-2-desktop is-3-tablet chat-sidebar has-background-dark" id="left_panel">
+            <aside class="menu pl-4">
+                <button class="button is-ghost has-text-grey-light mb-2 pl-1 is-align-items-center is-justify-content-start is-fullwidth" id="new_chat_btn" aria-label="Start new discussion">
+                    <span class="icon">
+                        <i class="fas fa-circle-plus"></i>
+                    </span>
+                    <span class="pt-1">Start New Chat</span>
+                </button>
+                <p class="menu-label has-text-grey-light">
+                    {% trans %}Rooms{% endtrans %}
+                </p>
+                <ul class="menu-list">
+                    {% for room_address, room_info in bookmarks.items() %}
+                        <li>
+                            <a {{ {'href': chat_url + "/" + room_address}|xmlattr}} class="chat-jid has-text-white"><span class="icon"><i class="fas fa-hashtag"></i></span> {{ room_info.get('name', room_address.split('@')[0]) }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+                <p class="menu-label has-text-grey-light">
+                    Direct Messages
+                </p>
+                <div id="direct-messages"></div>
+            </aside>
         </div>
 
-        <!-- Messages -->
-        <div id="messages" class="box p-4 has-background-white mb-4 is-flex-grow-1 is-flex-direction-column-reverse is-overflow-auto">
-            {% for msg in messages %}
-                {% set current_date = msg.timestamp|date_fmt('full', date_only=True) %}
-                {% if loop.changed(current_date) %}
-                    <div class="separator">
-                        <hr class="has-background-light" />
-                        <span class="has-text-grey is-size-7">{{current_date}}</span>
-                        <hr class="has-background-light" />
+        <!-- Main Chat Area -->
+        <div class="column is-8-desktop is-6-tablet chat-main" id="main_panel">
+                <div class="chat-header">
+                    <div class="level is-mobile">
+                        <div class="level-left">
+                            <div class="level-item">
+                                <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel">
+                                    <span class="icon"><i class="fas fa-bars"></i></span>
+                                </button>
+                            </div>
+                            <div class="level-item">
+                                <h1 class="title is-5 mb-0">{{target_jid}}</h1>
+                            </div>
+                        </div>
+                        <div class="level-right">
+                            <div class="level-item">
+                                <div class="field has-addons">
+                                    <div class="control">
+                                        <input class="input is-small" type="text" placeholder="Search">
+                                    </div>
+                                    <div class="control">
+                                        <button class="button is-info is-small">
+                                            <span class="icon is-small">
+                                                <i class="fas fa-search"></i>
+                                            </span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="level-item">
+                                <button class="button is-small">
+                                    <span class="icon"><i class="fas fa-cog"></i></span>
+                                </button>
+                            </div>
+                            <div class="level-item {{ "is-hidden" if chat_type != "group" }}">
+                                <button class="button is-small" id="right_panel-toggle">
+                                    <span class="icon"><i class="fas fa-info-circle"></i></span>
+                                </button>
+                            </div>
+                        </div>
                     </div>
-                {% endif %}
-                {% include 'chat/message.html' %}
-            {% endfor %}
+                </div>
+
+                <!-- Messages -->
+                <div id="messages">
+                    {% for msg in messages %}
+                        {% set current_date = msg.timestamp|date_fmt('full', date_only=True) %}
+                        {% if loop.changed(current_date) %}
+                            <div class="separator">
+                                <hr class="has-background-light" />
+                                <span class="has-text-grey is-size-7">{{current_date}}</span>
+                                <hr class="has-background-light" />
+                            </div>
+                        {% endif %}
+                        {% include 'chat/message.html' %}
+                    {% endfor %}
+                </div>
+
+            <!-- Attachments -->
+            <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
+                {% for file in attachments %}
+                    {% include 'chat/attachment_preview.html' %}
+                {% endfor %}
+            </div>
+
+            <div id="message_input" class="chat-input">
+                <div class="field has-addons">
+                    <div class="control">
+                        <button id="attach-button" class="button">
+                            <span class="icon is-small">
+                            {{ icon('paperclip') }}
+                            </span>
+                        </button>
+                        <input id="file-input" type="file" multiple="true" style="display: none" />
+                    </div>
+                    <div class="control is-expanded">
+                     <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea>
+                    </div>
+                    <div class="control">
+                        <button class="button is-primary">
+                            <span class="icon is-small">
+                                <i class="fas fa-paper-plane"></i>
+                            </span>
+                            <span class="is-hidden-mobile">Send</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
         </div>
 
-    <!-- Attachments -->
-    <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
-        {% for file in attachments %}
-            {% include 'chat/attachment_preview.html' %}
-        {% endfor %}
-    </div>
+
+        <!-- Right Panel -->
+
+        <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel">
+            <div class="box is-shadowless has-background-white-bis is-full-height">
+                <h3 class="title is-5 has-text-centered mb-4">Room Details</h3>
+
+                {% if subject is defined %}
+                    {% call collapsible_card("Subject", icon="fas fa-quote-left") %}
+                    {{subject}}
+                    {% endcall %}
+                {% endif %}
 
-    <!-- Input -->
-    <div id="input-area" class="field has-addons py-4 is-flex-shrink-0">
-        <p class="control is-expanded">
-            <textarea id="message_input" class="textarea" name="message" type="text" rows="1" placeholder="{{_("enter your message")}}"></textarea>
-        </p>
-        <div class="control">
-            <button class="button" id="attach_button">
-                <span class="icon is-small">
-                    {{ icon('attach', cls='has-text-info') }}
-                </span>
-            </button>
-            <input id="file_input" type="file" multiple="true" style="display: none" />
+                <div class="card">
+                    <div class="card-header has-background-info-light">
+                        <p class="card-header-title has-text-info-dark">
+                        <span class="icon"><i class="fas fa-users"></i></span>
+                        <span>Members (<span id="occupants-count">0</span>)</span>
+                        </p>
+                    </div>
+                    <div class="card-content py-3 px-4" id="group-occupants">
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="control">
-            <button class="button" id="send_button">
-                <span class="icon is-small">
-                    {{ icon('paper-plane-empty') }}
-                </span>
-            </button>
-        </div>
-    </div>
 
-    </div>
 {% endblock body %}
 
 {% block footer %}{% endblock footer %}