small styling improvements, correct chat window positioning, fixed sp…

…acing of trays in header
fleetbase · Apr 3, 2024 · 27ea3e7 · 27ea3e7
1 parent cd8e719
commit 27ea3e7
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 9 deletions.
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
@@ -1,4 +1,4 @@
-<div class="chat-window-container" ...attributes>
+<div class="chat-window-container" {{did-insert this.positionWindow}} ...attributes>
     <div class="chat-window-controls-container">
         <div class="chat-window-name">
             {{n-a this.channel.name "Untitled Chat"}}
@@ -14,16 +14,24 @@
     </div>
     <div class="chat-window-participants-container">
         {{#each this.channel.participants as |chatParticipant|}}
-            <div class="chat-window-participant-name">{{chatParticipant.name}}</div>
+            <div class="chat-window-participant-bubble-container">
+                <Image src={{chatParticipant.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{chatParticipant.name}} class="chat-window-participant-bubble" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{chatParticipant.name}} />
+                </Attach::Tooltip>
+            </div>
         {{/each}}
     </div>
-    <div class="chat-window-messages-container">
+    <div class="chat-window-messages-container" {{did-insert this.autoScrollMessagesWindow}}>
         <div class="chat-window-messages">
             {{#each this.channel.messages as |chatMessage|}}
                 <div class="chat-message-container">
                     <div class="chat-message-sender-bubble">
-                        <Image src={{chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} />
+                        <Image src={{chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.sender.name}} />
                         <div class="chat-message-sender-name">{{chatMessage.sender.name}}</div>
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{chatMessage.sender.name}} />
+                        </Attach::Tooltip>
                     </div>
                     <div class="chat-message-content-bubble-container">
                         <div class="chat-message-content-bubble {{if (eq chatMessage.sender_uuid this.currentUser.id) "sender-bubble"}}">

diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
@@ -27,6 +27,20 @@ export default class ChatWindowComponent extends Component {
 
     @action addParticipant() {}
 
+    @action positionWindow(chatWindowElement) {
+        const chatWindowWidth = chatWindowElement.offsetWidth;
+        const multiplier = this.chat.openChannels.length - 1;
+        const marginRight = (chatWindowWidth + 20) * multiplier;
+        chatWindowElement.style.marginRight = `${marginRight}px`;
+    }
+
+    @action autoScrollMessagesWindow(messagesWindowContainerElement) {
+        messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
+        setInterval(() => {
+            messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
+        }, 1000);
+    }
+
     getSenderFromParticipants(channel) {
         const participants = channel.participants ?? [];
         console.log('#participants', participants);

diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
@@ -29,8 +29,8 @@
         <Layout::Header::LoadingIndicator />
         <div id="view-header-actions"></div>
         <div class="flex items-center justify-between">
-            <div class="flex-1 flex items-center pr-1">
-                <LocaleSelectorTray class="mr-0.5" />
+            <div class="flex-1 flex items-center pr-1 space-x-2">
+                <LocaleSelectorTray />
                 <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
                 <ChatTray />
             </div>

diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
@@ -137,7 +137,7 @@
 }
 
 .chat-window-participants-container {
-    padding: 0.25rem 0.5rem;
+    padding: 0rem 0.5rem 0.5rem 0.5rem;
     background-color: #d1d5db;
 }
 
@@ -155,6 +155,19 @@
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
+.chat-window-participants-container .chat-window-participant-bubble-container {
+    width: 30px;
+    display: flex;
+}
+
+.chat-window-participants-container .chat-window-participant-bubble {
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    border: 1px #000 solid;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
 .chat-window-messages-container {
     height: 280px;
     width: 100%;
@@ -174,7 +187,7 @@
 .chat-message-container {
     display: flex;
     flex-direction: row;
-    margin-top: 0.75rem;
+    padding: 0.7rem 0;
 }
 
 .chat-message-container .chat-message-content-bubble-container {
@@ -185,7 +198,7 @@
 
 .chat-message-container .chat-message-content-bubble {
     border-radius: 0.25rem;
-    padding: 0.5rem;
+    padding: 0.5rem 0.5rem 1rem 0.5rem;
     font-size: 0.7rem;
     background-color: #d1d5db;
     width: 100%;