Skip to content

Commit 3572374

Browse files
SisIvanovaSisIvanova
committed
refactor(chat): styling improvements
1 parent 45dc235 commit 3572374

File tree

14 files changed

+181
-62
lines changed

14 files changed

+181
-62
lines changed

‎src/components/chat/chat-input.ts‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,11 @@ export default class IgcChatInputComponent extends LitElement {
113113
(attachment, index) => html`
114114
<div part="attachment-wrapper" role="listitem">
115115
<igc-chip removable @igcRemove=${() => this.removeAttachment(index)}>
116-
<span slot="prefix">
117-
<igc-icon
118-
name=${this.getIconName(
119-
attachment.file?.type ?? attachment.type
120-
)}
121-
collection="material"
122-
></igc-icon>
123-
</span>
116+
<igc-icon
117+
slot="prefix"
118+
name=${this.getIconName(attachment.file?.type ?? attachment.type)}
119+
collection="material"
120+
></igc-icon>
124121
<span part="attachment-name">${attachment.name}</span>
125122
</igc-chip>
126123
</div>
@@ -144,22 +141,21 @@ export default class IgcChatInputComponent extends LitElement {
144141

145142
public get defaultFileUploadButton(): TemplateResult {
146143
return html`
147-
<label for="input_attachments">
148-
<igc-icon
149-
slot="file-selector-text"
144+
<label for="input_attachments" part="upload-button">
145+
<igc-icon-button
146+
variant="flat"
150147
name="attachment"
151148
collection="material"
152-
></igc-icon>
149+
></igc-icon-button>
150+
<input
151+
type="file"
152+
id="input_attachments"
153+
name="input_attachments"
154+
multiple
155+
accept=${ifDefined(this._chatState?.options?.acceptedFiles === '' ? undefined : this._chatState?.options?.acceptedFiles)}
156+
@change=${this.handleFileUpload}>
157+
</input>
153158
</label>
154-
<input
155-
type="file"
156-
id="input_attachments"
157-
name="input_attachments"
158-
style="opacity: 0"
159-
multiple
160-
accept=${ifDefined(this._chatState?.options?.acceptedFiles === '' ? undefined : this._chatState?.options?.acceptedFiles)}
161-
@change=${this.handleFileUpload}>
162-
</input>
163159
`;
164160
}
165161

‎src/components/chat/chat-message-list.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@ export default class IgcChatMessageListComponent extends LitElement {
248248
<div part="typing-dot"></div>
249249
<div part="typing-dot"></div>
250250
<div part="typing-dot"></div>
251+
<div part="typing-dot"></div>
251252
</div>`}`;
252253
}
253254

‎src/components/chat/chat-message.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import { consume } from '@lit/context';
22
import DOMPurify from 'dompurify';
33
import { html, LitElement, nothing } from 'lit';
44
import { property } from 'lit/decorators.js';
5+
import { addThemingController } from '../../theming/theming-controller.js';
56
import IgcAvatarComponent from '../avatar/avatar.js';
67
import { chatContext } from '../common/context.js';
78
import { registerComponent } from '../common/definitions/register.js';
89
import type { ChatState } from './chat-state.js';
910
import { renderMarkdown } from './markdown-util.js';
1011
import IgcMessageAttachmentsComponent from './message-attachments.js';
1112
import { styles } from './themes/message.base.css.js';
12-
import { styles as shared } from './themes/shared/chat-message.common.css.js';
13+
import { all } from './themes/message.js';
14+
import { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';
1315
import type { IgcMessage } from './types.js';
1416

1517
/**
@@ -71,6 +73,11 @@ export default class IgcChatMessageComponent extends LitElement {
7173
return DOMPurify.sanitize(text);
7274
}
7375

76+
constructor() {
77+
super();
78+
addThemingController(this, all);
79+
}
80+
7481
/**
7582
* Renders the chat message template.
7683
* - Applies 'sent' CSS class if the message sender matches current user.

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

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
@use 'styles/common/component';
22
@use 'styles/utilities' as *;
33

4+
$inline-inset: rem(16px);
5+
46
// should be removed
57
:host {
68
width: 100%;
7-
height: 600px;
9+
height: 100vh;
810
overflow: hidden;
911
box-shadow: var(--ig-elevation-4);
1012
display: flex;
@@ -16,16 +18,15 @@
1618
flex-direction: column;
1719
align-items: center;
1820
height: 100%;
19-
gap: rem(40px);
21+
gap: rem(24px);
2022
}
2123

2224
igc-chat-message-list,
2325
[part='empty-state'],
2426
[part='suggestions-container'] {
25-
max-width: rem(760px);
27+
max-width: calc(rem(760px) + $inline-inset * 2);
2628
width: 100%;
27-
28-
// margin-inline: rem(16px);
29+
padding-inline: $inline-inset;
2930
}
3031

3132
[part='suggestions-header'] {
@@ -41,9 +42,8 @@ igc-chat-message-list,
4142
[part='header'] {
4243
display: flex;
4344
align-items: center;
44-
justify-content: space-between;
45-
padding: rem(16px) rem(13px);
46-
gap: rem(16px);
45+
min-height: rem(56px);
46+
padding-inline: $inline-inset;
4747
box-shadow: var(--ig-elevation-4);
4848
width: 100%;
4949
}
@@ -54,6 +54,25 @@ igc-chat-message-list,
5454
};
5555
}
5656

57+
[part='actions'] {
58+
display: flex;
59+
margin-inline-start: auto;
60+
gap: rem(16px);
61+
}
62+
63+
[part='prefix'] {
64+
display: block;
65+
margin-inline-end: rem(32px);
66+
}
67+
68+
[part='prefix'],
69+
[part='actions'],
70+
[part='title'] {
71+
&:empty {
72+
display: none;
73+
}
74+
}
75+
5776
[part='suggestions-container'] {
5877
display: flex;
5978
flex-direction: column;

‎src/components/chat/themes/input.base.scss‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,33 +27,41 @@
2727
margin-inline-start: auto;
2828
}
2929

30+
[part='upload-button'] {
31+
position: relative;
32+
display: inline-block;
33+
34+
input {
35+
position: absolute;
36+
opacity: 0;
37+
inset: 0;
38+
z-index: 1;
39+
cursor: pointer;
40+
}
41+
}
42+
3043
[part='attachments'] {
3144
display: flex;
45+
flex-wrap: wrap;
3246
gap: rem(8px);
3347
}
3448

49+
[part='attachment-wrapper'] {
50+
min-width: rem(90px);
51+
max-width: fit-content;
52+
flex: 1 1;
53+
54+
igc-chip {
55+
--ig-size: 2;
56+
}
57+
}
58+
3559
igc-textarea::part(input) {
3660
// maximum eight lines
3761
max-height: rem(216px);
3862
overflow-y: auto;
3963
}
4064

41-
igc-file-input {
42-
width: fit-content;
43-
margin-inline-end: auto;
44-
}
45-
46-
igc-file-input::part(file-names),
47-
igc-file-input::part(start),
48-
igc-file-input::part(end) {
49-
display: none;
50-
}
51-
52-
igc-file-input::part(container) {
53-
background: transparent;
54-
border: none;
55-
56-
&::after {
57-
display: none;
58-
}
65+
igc-icon-button {
66+
--ig-size: 2;
5967
}

‎src/components/chat/themes/message-list.base.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,9 @@
55
display: block;
66
overflow-y: auto;
77
flex: 1;
8-
scrollbar-width: none;
98
padding-block-start: rem(16px);
109
}
1110

12-
:host(::-webkit-scrollbar) {
13-
display: none;
14-
}
15-
1611
[part='message-list'] {
1712
display: flex;
1813
flex-direction: column;

‎src/components/chat/themes/message.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { css } from 'lit';
2+
3+
import type { Themes } from '../../../theming/types.js';
4+
// Shared Styles
5+
import { styles as indigo } from './shared/chat-message/chat-message.indigo.css.js';
6+
7+
const light = {
8+
indigo: css`
9+
${indigo}
10+
`,
11+
};
12+
13+
const dark = {
14+
indigo: css`
15+
${indigo}
16+
`,
17+
};
18+
19+
export const all: Themes = { light, dark };

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@use 'styles/utilities' as *;
2-
@use '../light/themes' as *;
2+
@use '../../light/themes' as *;
33

44
$theme: $material;
55

6-
// should be changed when the design is ready
76
:host([part~='active']) {
87
&::part(message-container) {
9-
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'message-color');
8+
background: var-get($theme, 'message-focus-color');
109
}
1110
}
1211

‎src/components/chat/themes/shared/chat-message/chat-message.indigo.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@use 'styles/utilities' as *;
2+
@use '../../light/themes' as *;
3+
4+
$theme: $indigo;
5+
6+
:host([part~='active']) {
7+
// should be fixed after keyboard navigation is specified
8+
&::part(message-container) {
9+
background: initial;
10+
box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'message-focus-color');
11+
}
12+
13+
&::part(sent) {
14+
background: var-get($theme, 'message-background');
15+
}
16+
}
17+
18+
[part~='sent'] {
19+
border-radius: rem(8px);
20+
}

‎src/components/chat/themes/shared/chat.indigo.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@use 'styles/utilities' as *;
2+
@use '../light/themes' as *;
3+
4+
$theme: $indigo;
5+
6+
[part='header'] {
7+
box-shadow: none;
8+
border-block-end: rem(1px) solid var-get($theme, 'header-border');
9+
}
10+
11+
[part='title'] {
12+
@include type-style('h5') {
13+
margin: 0;
14+
};
15+
}
16+
17+
[part='suggestions-container'] {
18+
igc-chip {
19+
--ig-size: 2;
20+
}
21+
}

0 commit comments

Comments
 (0)