refactor(chat): udate attachments styling

Author: SisIvanova

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.3",
-    "igniteui-theming": "^19.3.0-beta.3",
+    "igniteui-theming": "^19.3.0-beta.4",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^16.1.4",
     "lit-analyzer": "^2.0.3",

package.json

@@ -135,18 +135,20 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
         ? this._chatState.options.templates.attachmentHeaderTemplate(
             this.message
           )
-        : html`${attachment.type === 'image' ||
-            attachment.file?.type.startsWith('image/')
-              ? html`<igc-icon
-                  name="image"
-                  collection="material"
-                  part="attachment-icon"
-                ></igc-icon>`
-              : html`<igc-icon
-                  name="file"
-                  collection="material"
-                  part="attachment-icon"
-                ></igc-icon>`}
+        : html`${this.message?.sender !== this._chatState?.currentUserId
+              ? html`${attachment.type === 'image' ||
+                attachment.file?.type.startsWith('image/')
+                  ? html`<igc-icon
+                      name="image"
+                      collection="material"
+                      part="attachment-icon"
+                    ></igc-icon>`
+                  : html`<igc-icon
+                      name="file"
+                      collection="material"
+                      part="attachment-icon"
+                    ></igc-icon>`}`
+              : nothing}
             <span part="file-name">${attachment.name}</span> `}
     </div>`;
   }
@@ -163,7 +165,11 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
   }
 
   private renderAttachmentContent(attachment: IgcMessageAttachment) {
-    return html`<div part="attachment-content">
+    const parts = {
+      'attachment-content': true,
+      sent: this.message?.sender === this._chatState?.currentUserId,
+    };
+    return html`<div part=${partMap(parts)}>
       ${this._chatState?.options?.templates?.attachmentContentTemplate &&
       this.message
         ? this._chatState.options.templates.attachmentContentTemplate(
@@ -175,18 +181,23 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
 
   private renderDefaultAttachmentsTemplate() {
     const parts = {
+      attachment: true,
+      sent: this.message?.sender === this._chatState?.currentUserId,
+    };
+
+    const headerParts = {
       'attachment-header': true,
       sent: this.message?.sender === this._chatState?.currentUserId,
     };
 
     return html`${this.message?.attachments?.map(
       (attachment) =>
-        html`<div part="attachment">
+        html`<div part=${partMap(parts)}>
           ${this.message?.sender === this._chatState?.currentUserId
             ? this.renderAttachmentContent(attachment)
             : nothing}
           <div
-            part=${partMap(parts)}
+            part=${partMap(headerParts)}
             role="button"
             @click=${() => this.handleHeaderClick(attachment)}
           >

src/components/chat/message-attachments.ts

@@ -19,27 +19,50 @@
     max-width: rem(400px);
 }
 
-[part='attachment-header'] {
+[part='attachment sent'] {
+    border-radius: rem(2px);
+    max-width: rem(80px);
+}
+
+[part~='attachment-header'] {
     padding: rem(8px) rem(12px) rem(8px) rem(16px);
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
 }
 
-[part='attachment-content'] {
+[part='attachment-header sent'] {
+    padding: rem(6px) 0 0;
+}
+
+[part~='attachment-content'] {
     display: flex;
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     max-height: rem(240px);
     overflow: hidden;
 }
 
+[part='attachment-content sent'] {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    width: rem(78px);
+    aspect-ratio: 1;
+}
+
 [part='image-attachment'] {
     width: 100%;
     height: 100%;
     border-radius: inherit;
     object-fit: cover;
 }
 
+[part='file-attachment'] {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 [part='details'] {
     display: flex;
     align-items: center;

src/components/chat/themes/message-attachments.base.scss

@@ -43,4 +43,3 @@ pre, code {
   word-wrap: break-word;
   overflow-x: auto;
 }
-

src/components/chat/themes/message.base.scss

@@ -10,3 +10,9 @@ $theme: $material;
 [part~='bubble'] {
     color: var-get($theme, 'message-color');
 }
+
+[part~='message-actions'] {
+    igc-icon-button::part(icon) {
+        color: var-get($theme, 'message-actions-color');
+    }
+}

src/components/chat/themes/shared/chat-message/chat-message.common.scss

@@ -1,9 +1,18 @@
 @use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $bootstrap;
+
+[part='header'] {
+    box-shadow: none;
+    border-block-end: rem(1px) solid var-get($theme, 'header-border');
+}
 
 igc-list {
     border: none;
 }
 
+igc-list,
 igc-list-item:not(:hover),
 igc-list-header {
     background: initial;

src/components/chat/themes/shared/chat.bootstrap.scss

@@ -3,13 +3,22 @@
 
 $theme: $material;
 
+[part='attachment-header'],
+[part='attachment-content'],
+[part='attachment-content sent'] {
+    border: rem(1px) solid var-get($theme, 'image-border');
+}
+
 [part='attachment-header'] {
     background: var-get($theme, 'image-background');
-    border: rem(1px) solid var-get($theme, 'image-border');
     border-block-end: none;
 }
 
+[part~='attachment-content'] {
+    // background: var-get($theme, 'file-background');
+    background: white;
+}
+
 [part='attachment-content'] {
-    border: rem(1px) solid var-get($theme, 'image-border');
-    border-block-start: none
-}
+    border-block-start: none;
+}