Mercurial > libervia-templates

changeset 406:049a0638f6fa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
chat: Keywords handling: - Keywords are now displayed in messages. - Modal panel has been updated to allow for side panels, i.e. modal panel comming from top, bottom, right or left with an animation, and which can be closed by clicking/touching outside of the panel. rel 458
author Goffi <goffi@goffi.org>
date Fri, 06 Jun 2025 10:50:35 +0200
parents 5016fb0ff62f
children f45c311710b1
files sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/message.html sat_templates/templates/bulma/chat/message_input.html sat_templates/templates/bulma/chat/sub_messages_panel.html sat_templates/templates/bulma/chat/thread_panel.html sat_templates/templates/bulma/dialogs/modal.html sat_templates/templates/bulma/static/chat.css sat_templates/templates/bulma/static/styles.css
diffstat 8 files changed, 175 insertions(+), 28 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/bulma/chat/chat.html	Wed May 21 15:41:00 2025 +0200
+++ b/sat_templates/templates/bulma/chat/chat.html	Fri Jun 06 10:50:35 2025 +0200
@@ -6,7 +6,7 @@
 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
 {% block body %}
     {{ icon_defs(
-   "comment-dots", "ellipsis", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes"
+   "check", "comment-dots", "ellipsis", "lock", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes", "unlock"
     ) }}
 
 
@@ -40,7 +40,7 @@
 
         <!-- Main Chat Area -->
         <div class="column is-8 main-panel chat-main" id="main_panel">
-                <div class="panel-header">
+                <div class="panel-header px-4 py-2">
                     <div class="level is-mobile">
                         <div class="level-left">
                             <div class="level-item">
--- a/sat_templates/templates/bulma/chat/message.html	Wed May 21 15:41:00 2025 +0200
+++ b/sat_templates/templates/bulma/chat/message.html	Fri Jun 06 10:50:35 2025 +0200
@@ -35,12 +35,12 @@
                             {{ icon('pencil', cls='icon is-small message-editions') }}
                         {% endif %}
                         {% if msg.encrypted %}
-                            {{ icon('lock-filled', cls='icon is-small has-text-success') }}
+                            {{ icon('lock', cls='icon is-small has-text-success') }}
                         {% else %}
-                            {{ icon('lock-open', cls='icon is-small has-text-danger') }}
+                            {{ icon('unlock', cls='icon is-small has-text-danger') }}
                         {% endif %}
                         {% if msg.received %}
-                            {{ icon('ok', cls='icon is-small has-text-link') }}
+                            {{ icon('check', cls='icon is-small has-text-link') }}
                         {% endif %}
                         {% if msg.edited %}
                             {{ icon('pencil', cls='icon is-small has-text-info') }}
@@ -63,11 +63,18 @@
                 </div>
 
                 <div
-                   id="actions_{{msg.id}}"
-                   class="level message-actions mb-0 mt-1 {{ "is-hidden" if msg.extra.retracted }}"
+                   class="level mb-0 mt-1 message-footer {{ "is-hidden" if msg.extra.retracted }}"
                    >
-                   <div class="level-left"></div>
-                    <div class="level-right">
+                   <div class="level-left">
+                       {% if msg.extra.keywords %}
+                           <div class="tags pb-1">
+                               {% for keyword in msg.extra.keywords %}
+                                   <span class="message-keyword tag is-hoverable is-info">{{keyword}}</span>
+                               {% endfor %}
+                           </div>
+                       {% endif %}
+                   </div>
+                    <div class="level-right message-actions">
                         {# {{ icon('share-nodes', cls='icon is-small action-button', id='msg_share_' + msg.id) }} #}
                         {{ icon('reply', cls='icon is-small action-button reply-button')}}
                         {{ icon('regular face-smile', cls='icon is-small action-button reaction-button') }}
--- a/sat_templates/templates/bulma/chat/message_input.html	Wed May 21 15:41:00 2025 +0200
+++ b/sat_templates/templates/bulma/chat/message_input.html	Fri Jun 06 10:50:35 2025 +0200
@@ -1,7 +1,7 @@
 
 <div id="input-panel">
     <!-- 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">
+    <div id="attachments" class="attachments 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 %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/chat/sub_messages_panel.html	Fri Jun 06 10:50:35 2025 +0200
@@ -0,0 +1,9 @@
+<nav class="panel has-background-light is-full-height is-flex is-flex-direction-column">
+    <p class="panel-heading">{{title|default("Sub-Messages View", true)}}</p>
+    <div class="panel-block mt-1 is-flex-direction-column" >
+        <div id="sub-messages" class="is-full-width">
+        </div>
+        <div id="sub-messages-input" class="is-full-width">
+        </div>
+    </div>
+</nav>
--- a/sat_templates/templates/bulma/chat/thread_panel.html	Wed May 21 15:41:00 2025 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,7 +0,0 @@
-<nav class="panel has-background-light">
-    <p class="panel-heading">Thread View</p>
-    <div class="panel-block mt-1" >
-        <div id="thread-messages" class="is-full-width">
-        </div>
-    </div>
-</nav>
--- a/sat_templates/templates/bulma/dialogs/modal.html	Wed May 21 15:41:00 2025 +0200
+++ b/sat_templates/templates/bulma/dialogs/modal.html	Fri Jun 06 10:50:35 2025 +0200
@@ -1,8 +1,15 @@
-<div class="modal is-active">
+{% if position == 'center' %}
+<div class="modal">
     <div class="modal-background"></div>
     <div class="modal-content">
+        {# Center modal content goes here #}
     </div>
-    {% if closable %}
-        <button class="modal-close is-large" aria-label="close"></button>
-    {% endif %}
 </div>
+{% else %}
+<div class="modal-panel">
+    <div class="modal-panel-background"></div>
+    <div class="modal-panel-container">
+        {# Side panel content goes here #}
+    </div>
+</div>
+{% endif %}
--- a/sat_templates/templates/bulma/static/chat.css	Wed May 21 15:41:00 2025 +0200
+++ b/sat_templates/templates/bulma/static/chat.css	Fri Jun 06 10:50:35 2025 +0200
@@ -61,8 +61,10 @@
     height: 100%;
 }
 
-.chat-message {
+.media.chat-message {
     max-width: 95%;
+    border: none;
+    margin: 0;
 }
 
 .message-core {
@@ -79,16 +81,17 @@
 }
 
 .message-actions {
-    display: none;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
 }
 
 .message-core:hover .message-actions,
 .message-core.has-popup-focus .message-actions
 {
-    display: flex;
+    opacity: 1;
 }
 
-#attachments {
+.attachments {
     overflow-x: auto;
     white-space: nowrap;
 }
@@ -126,7 +129,7 @@
 
 /* Attachments */
 
-#attachments {
+.attachments {
     opacity: 1;
     max-height: 1000px;
     transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out;
@@ -136,7 +139,7 @@
     margin: 0;
 }
 
-#attachments.is-contracted {
+.attachments.is-contracted {
     opacity: 0;
     max-height: 0;
     padding: 0;
@@ -161,3 +164,13 @@
     margin-bottom: 1rem;
     border-radius: 0.25rem;
 }
+
+/* Sub Messages Panel */
+
+div.panel-block {
+    overflow-y: auto;
+}
+
+#sub-messages {
+    overflow-y: auto;
+}
--- a/sat_templates/templates/bulma/static/styles.css	Wed May 21 15:41:00 2025 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Fri Jun 06 10:50:35 2025 +0200
@@ -110,7 +110,7 @@
 
 /* Panels */
 
-.panel-header {
+.modal-panel-header {
     border-bottom: 1px solid #dbdbdb;
     padding: 0.5rem 1rem;
 }
@@ -187,4 +187,122 @@
     background-color: var(--reaction-user-hover-background);
 }
 
+/* Side Panels */
 
+.modal-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    display: flex;
+    pointer-events: none;
+}
+
+.modal-panel-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: hsla(221,14%,4%,0.86);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: all;
+}
+
+.modal-panel-container {
+    position: absolute;
+    background: white;
+    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+    overflow-y: auto;
+    transition: transform 0.3s ease-out;
+    will-change: transform;
+    pointer-events: all;
+}
+
+/* Position classes */
+.modal-panel-container.is-right {
+    top: 0;
+    right: 0;
+    height: 100vh;
+    transform: translateX(100%);
+    border-left: 1px solid #eee;
+}
+
+.modal-panel-container.is-left {
+    top: 0;
+    left: 0;
+    height: 100vh;
+    transform: translateX(-100%);
+    border-right: 1px solid #eee;
+}
+
+.modal-panel-container.is-top {
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-100%);
+    border-bottom: 1px solid #eee;
+}
+
+.modal-panel-container.is-bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+    border-top: 1px solid #eee;
+}
+
+/* Active state */
+.modal-panel.is-active .modal-panel-background {
+    opacity: 1;
+}
+
+.modal-panel.is-active .modal-panel-container {
+    transform: none !important;
+}
+
+/* Closing animation */
+.modal-panel.closing .modal-panel-background {
+    opacity: 0;
+}
+
+.modal-panel.closing .modal-panel-container.is-right {
+    transform: translateX(100%) !important;
+}
+
+.modal-panel.closing .modal-panel-container.is-left {
+    transform: translateX(-100%) !important;
+}
+
+.modal-panel.closing .modal-panel-container.is-top {
+    transform: translateY(-100%) !important;
+}
+
+.modal-panel.closing .modal-panel-container.is-bottom {
+    transform: translateY(100%) !important;
+}
+
+
+/* Responsive */
+
+
+@media screen and (max-width: 768px) {
+    .modal-panel-container {
+        width: 90% !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .modal-panel-container.is-right,
+    .modal-panel-container.is-left {
+        width: 50rem;
+    }
+
+    .modal-panel-container.is-top,
+    .modal-panel-container.is-bottom {
+        height: 80vh;
+    }
+}