Skip to content

Commit ae4d4e6

Browse files
simeonoffsimeonoff
committed
refactor(chat): replace png assets with svg icons
1 parent 91c3ffe commit ae4d4e6

File tree

10 files changed

+123
-41
lines changed

10 files changed

+123
-41
lines changed

‎src/components/chat/assets/file.png‎

-686 Bytes
Binary file not shown.

‎src/components/chat/assets/json.png‎

-787 Bytes
Binary file not shown.

‎src/components/chat/assets/link.png‎

-839 Bytes
Binary file not shown.

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,12 @@ export default class IgcChatMessageComponent extends LitElement {
132132
'copy_content',
133133
resourceStrings.reactionCopy
134134
)}
135-
${this._renderActionButton('thumb_up', resourceStrings.reactionLike)}
136135
${this._renderActionButton(
137-
'thumb_down',
136+
'thumb_up_inactive',
137+
resourceStrings.reactionLike
138+
)}
139+
${this._renderActionButton(
140+
'thumb_down_inactive',
138141
resourceStrings.reactionDislike
139142
)}
140143
${this._renderActionButton(

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

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,6 @@ export class ChatState {
4343
public _isTyping = false;
4444
private _lastTyped = Date.now();
4545

46-
private _fileIcon = new URL('./assets/file.png', import.meta.url).href;
47-
private _jsonIcon = new URL('./assets/json.png', import.meta.url).href;
48-
private _linkIcon = new URL('./assets/link.png', import.meta.url).href;
49-
5046
private readonly _textAreaRef = createRef<IgcTextareaComponent>();
5147

5248
public resourceStrings = IgcChatResourceStringEN;
@@ -277,24 +273,24 @@ export class ChatState {
277273
}
278274

279275
public _fileIconMap: Record<string, string> = {
280-
css: this._fileIcon,
281-
csv: this._fileIcon,
282-
doc: this._fileIcon,
283-
docx: this._fileIcon,
284-
htm: this._fileIcon,
285-
html: this._fileIcon,
286-
js: this._fileIcon,
287-
json: this._jsonIcon,
288-
pdf: this._fileIcon,
289-
rtf: this._fileIcon,
290-
svg: this._fileIcon,
291-
txt: this._fileIcon,
292-
url: this._linkIcon,
293-
xls: this._fileIcon,
294-
xlsx: this._jsonIcon,
295-
xml: this._linkIcon,
296-
zip: this._fileIcon,
297-
default: this._fileIcon, // A fallback icon
276+
css: 'file_generic',
277+
csv: 'file_generic',
278+
doc: 'file_generic',
279+
docx: 'file_generic',
280+
htm: 'file_generic',
281+
html: 'file_generic',
282+
js: 'file_generic',
283+
json: 'file_json',
284+
pdf: 'file_generic',
285+
rtf: 'file_generic',
286+
svg: 'file_generic',
287+
txt: 'file_generic',
288+
url: 'file_link',
289+
xls: 'file_generic',
290+
xlsx: 'file_json',
291+
xml: 'file_link',
292+
zip: 'file_generic',
293+
default: 'file_generic', // A fallback icon
298294
};
299295

300296
public handleKeyDown = (e: KeyboardEvent) => {

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -113,13 +113,20 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
113113
private renderContent(attachment: IgcMessageAttachment) {
114114
const ext = getFileExtension(attachment.name);
115115
const isImage = this._chatState?.isImageAttachment(attachment);
116-
const url = isImage
117-
? createAttachmentURL(attachment)
118-
: (this._chatState?._fileIconMap[ext!] ??
119-
this._chatState?._fileIconMap['default']);
120-
const partName = isImage ? 'image-attachment' : 'file-attachment';
121-
122-
return html`<img part="${partName}" src=${url!} alt=${attachment.name} />`;
116+
const iconName =
117+
this._chatState?._fileIconMap[ext!] ??
118+
this._chatState?._fileIconMap['default'];
119+
const image = html`<img
120+
part="image-attachment"
121+
src=${createAttachmentURL(attachment)}
122+
alt=${attachment.name}
123+
/>`;
124+
const icon = html`<igc-icon
125+
part="file-attachment"
126+
name=${iconName!}
127+
></igc-icon>`;
128+
129+
return isImage ? image : icon;
123130
}
124131

125132
private renderAttachment(attachment: IgcMessageAttachment) {

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@
3636

3737
[part~='attachment-content'] {
3838
display: flex;
39+
justify-content: center;
40+
align-items: center;
3941
border-bottom-left-radius: inherit;
4042
border-bottom-right-radius: inherit;
4143
max-height: rem(240px);
@@ -57,10 +59,7 @@
5759
}
5860

5961
[part='file-attachment'] {
60-
display: block;
61-
width: 100%;
62-
height: 100%;
63-
object-fit: cover;
62+
--size: #{rem(32px)};
6463
}
6564

6665
[part='details'] {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,8 @@ $theme: $material;
2222
[part='attachment-content'] {
2323
border-block-start: none;
2424
}
25+
26+
[part="file-attachment"] {
27+
--color: var(--ig-gray-500);
28+
--accent-color: var(--ig-secondary-500);
29+
}

‎src/components/icon/icon-references.ts‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,48 @@ addIcon('image_thumbnail', {
103103
collection: 'internal',
104104
},
105105
});
106+
addIcon('table_thumbnail', {
107+
default: {
108+
name: 'table',
109+
collection: 'internal',
110+
},
111+
});
112+
addIcon('layout_thumbnail', {
113+
default: {
114+
name: 'layout',
115+
collection: 'internal',
116+
},
117+
});
118+
addIcon('code_thumbnail', {
119+
default: {
120+
name: 'code_circle',
121+
collection: 'internal',
122+
},
123+
});
106124
addIcon('document_thumbnail', {
107125
default: {
108126
name: 'document_empty',
109127
collection: 'internal',
110128
},
111129
});
130+
addIcon('file_generic', {
131+
default: {
132+
name: 'file_generic',
133+
collection: 'internal',
134+
},
135+
});
136+
addIcon('file_json', {
137+
default: {
138+
name: 'file_json',
139+
collection: 'internal',
140+
},
141+
});
142+
addIcon('file_link', {
143+
default: {
144+
name: 'file_link',
145+
collection: 'internal',
146+
},
147+
});
112148
addIcon('more_horiz', {
113149
default: {
114150
name: 'more_horiz',
@@ -121,15 +157,27 @@ addIcon('open_in_new', {
121157
collection: 'internal',
122158
},
123159
});
124-
addIcon('thumb_up', {
160+
addIcon('thumb_up_active', {
161+
default: {
162+
name: 'thumb_up_filled',
163+
collection: 'internal',
164+
},
165+
});
166+
addIcon('thumb_up_inactive', {
167+
default: {
168+
name: 'thumb_up_empty',
169+
collection: 'internal',
170+
},
171+
});
172+
addIcon('thumb_down_filled', {
125173
default: {
126-
name: 'thumb_up',
174+
name: 'thumb_down_filled',
127175
collection: 'internal',
128176
},
129177
});
130-
addIcon('thumb_down', {
178+
addIcon('thumb_down_inactive', {
131179
default: {
132-
name: 'thumb_down',
180+
name: 'thumb_down_empty',
133181
collection: 'internal',
134182
},
135183
});

‎src/components/icon/internal-icons-lib.ts‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,24 @@ export const internalIcons = new Map<string, SvgIcon>(
5353
image: {
5454
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`,
5555
},
56+
table: {
57+
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15 1.5H3A1.511 1.511 0 0 0 1.5 3v12A1.511 1.511 0 0 0 3 16.5h12a1.511 1.511 0 0 0 1.5-1.5V3A1.511 1.511 0 0 0 15 1.5ZM6.75 3h4.5v3h-4.5V3Zm0 4.5h4.5v3h-4.5v-3Zm0 4.5h4.5v3h-4.5v-3ZM3 3h2.25v3H3V3Zm0 4.5h2.25v3H3v-3ZM3 15v-3h2.25v3H3Zm12 0h-2.25v-3H15v3Zm0-4.5h-2.25v-3H15v3ZM15 6h-2.25V3H15v3Z"/></svg>`,
58+
},
59+
layout: {
60+
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15 3H3c-.825 0-1.492.675-1.492 1.5l-.008 9c0 .825.675 1.5 1.5 1.5h12c.825 0 1.5-.675 1.5-1.5v-9c0-.825-.675-1.5-1.5-1.5Zm-3.75 10.5H3v-3h8.25v3Zm0-3.75H3v-3h8.25v3ZM15 13.5h-3V6.75h3v6.75Z"/></svg>`,
61+
},
62+
code_circle: {
63+
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9 1.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Zm-1.5 9.155-.75.75L4.345 9 6.75 6.595l.75.75L5.845 9 7.5 10.655Zm3.75.75-.75-.75L12.155 9 10.5 7.345l.75-.75L13.655 9l-2.405 2.405Z"/></svg>`,
64+
},
65+
file_generic: {
66+
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><g clip-path="url(#a)"><path fill="var(--accent-color)" d="M16.998 14h-16a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path fill="#fff" d="M14.937 22h-2.94v-4.901h2.828v.899h-1.723v1.09h1.603v.895h-1.603v1.122h1.835V22ZM11.335 22h-2.92v-4.901H9.52v4.006h1.815V22ZM7.298 22H6.194v-4.901h1.104V22ZM5.384 17.998h-1.73V19.2h1.59v.895h-1.59V22H2.552v-4.901h2.833v.899Z"/><path d="M23.572 0a1 1 0 0 1 .709.294l7.419 7.45a1 1 0 0 1 .293.706V28.3a3.567 3.567 0 0 1-3.405 3.7H10.405a3.565 3.565 0 0 1-3.406-3.7V27h2v1.3a1.6 1.6 0 0 0 1.405 1.7h18.184a1.576 1.576 0 0 0 1.4-1.7V9.45h-6.187a1 1 0 0 1-.999-1V2H10.405a1.576 1.576 0 0 0-1.407 1.7V12H7V3.7A3.567 3.567 0 0 1 10.405 0h13.167ZM24.8 7.45h3.78L24.8 3.656V7.45Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M-.002 0h32.004v32H-.002z"/></clipPath></defs></svg>`,
67+
},
68+
file_json: {
69+
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><g clip-path="url(#a)"><path fill="var(--accent-color)" d="M22.998 14h-22a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path fill="#fff" d="M4.603 20.055c0 .656-.153 1.159-.458 1.508-.304.348-.743.522-1.32.522a1.88 1.88 0 0 1-.714-.133v-1.036c.189.144.4.216.636.216.503 0 .755-.374.755-1.121v-2.912h1.1v2.956ZM5.45 21.812v-1.094c.198.167.414.292.646.376a2.1 2.1 0 0 0 .704.123c.14 0 .26-.012.363-.037a.859.859 0 0 0 .26-.103.402.402 0 0 0 .208-.355.425.425 0 0 0-.082-.257.873.873 0 0 0-.226-.208 2.251 2.251 0 0 0-.335-.185c-.13-.059-.27-.12-.42-.18-.383-.16-.669-.355-.858-.585a1.28 1.28 0 0 1-.28-.834c0-.256.051-.474.154-.657.102-.184.241-.336.416-.454.178-.119.383-.205.616-.26a3.09 3.09 0 0 1 .738-.085c.255 0 .48.016.677.047.198.03.38.077.547.14v1.023a1.927 1.927 0 0 0-.567-.256 2.107 2.107 0 0 0-.595-.086c-.126 0-.24.012-.342.037a.844.844 0 0 0-.26.1.495.495 0 0 0-.164.157.396.396 0 0 0 .007.424.785.785 0 0 0 .184.184c.08.057.177.114.29.171.115.055.244.112.387.17.196.083.371.17.526.264.158.091.292.195.404.311.111.116.197.25.256.4.06.148.089.321.089.52 0 .273-.052.503-.157.69a1.267 1.267 0 0 1-.42.451 1.854 1.854 0 0 1-.623.246c-.234.05-.483.075-.745.075-.269 0-.525-.022-.769-.068a2.316 2.316 0 0 1-.629-.205ZM11.67 22.085c-.7 0-1.273-.227-1.715-.683-.442-.458-.663-1.054-.663-1.788 0-.774.224-1.401.673-1.88.45-.478 1.044-.717 1.784-.717.7 0 1.265.229 1.696.687.433.458.65 1.061.65 1.811 0 .77-.225 1.391-.674 1.863-.447.472-1.03.707-1.75.707Zm.049-4.118c-.388 0-.695.146-.923.437-.228.29-.342.674-.342 1.152 0 .485.114.87.342 1.152.228.283.526.424.895.424.38 0 .683-.137.906-.41.223-.276.335-.658.335-1.145 0-.509-.108-.904-.325-1.186-.216-.283-.512-.424-.888-.424ZM19.32 22h-1.114l-2.02-3.08c-.119-.18-.2-.315-.246-.406h-.014c.018.173.028.437.028.793V22H14.91v-4.901h1.19l1.944 2.983c.09.135.171.268.246.4h.014a5.223 5.223 0 0 1-.027-.673V17.1h1.042V22Z"/><path d="M23.572 0a1 1 0 0 1 .709.294l7.419 7.45a1 1 0 0 1 .294.706V28.3a3.567 3.567 0 0 1-3.406 3.7H10.405A3.565 3.565 0 0 1 7 28.3V27h1.999v1.3a1.6 1.6 0 0 0 1.406 1.7h18.183a1.576 1.576 0 0 0 1.4-1.7V9.45H23.8a1 1 0 0 1-1-1V2H10.405a1.576 1.576 0 0 0-1.406 1.7V12h-2V3.7A3.567 3.567 0 0 1 10.406 0h13.167Zm1.23 7.45h3.779L24.8 3.656V7.45Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M-.002 0h32.004v32H-.002z"/></clipPath></defs></svg>`,
70+
},
71+
file_link: {
72+
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><g fill="var(--accent-color)"><path d="M27.815 17.19a4.056 4.056 0 0 0-5.737 0l-2.865 2.867a1.015 1.015 0 0 0 1.435 1.435l2.866-2.865a2.028 2.028 0 0 1 2.883 2.853l-2.88 2.88a1.014 1.014 0 0 0 1.43 1.434l2.867-2.866a4.06 4.06 0 0 0 0-5.738Z"/><path d="M18.497 26.512a1.014 1.014 0 0 0 1.43 0l3.587-3.585a1.014 1.014 0 1 0-1.435-1.434l-3.585 3.586a1.015 1.015 0 0 0 0 1.433"/><path d="m21.36 26.512-2.866 2.866a2.029 2.029 0 0 1-2.92-2.82l.052-.05 2.865-2.864a1.013 1.013 0 0 0-1.434-1.434l-2.866 2.864a4.057 4.057 0 0 0 5.737 5.738l2.866-2.867a1.013 1.013 0 0 0-1.434-1.434Z"/></g><path d="M28.71 7.744 21.288.294A1 1 0 0 0 20.58 0H6.408a3.566 3.566 0 0 0-3.406 3.7v24.6A3.566 3.566 0 0 0 6.408 32h3.45v-.03a.983.983 0 0 0 0-1.959V30h-.055c-.016 0-.03-.01-.047-.01s-.031.009-.047.01h-3.3a1.6 1.6 0 0 1-1.406-1.7V3.7A1.576 1.576 0 0 1 6.408 2h13.406v6.45a1 1 0 0 0 1 1H27V13a1 1 0 1 0 2 0V8.45a1 1 0 0 0-.291-.706Zm-6.9-.294V3.656l3.78 3.794h-3.78Z"/></svg>`,
73+
},
5674
more_horiz: {
5775
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/></svg>`,
5876
},
@@ -65,12 +83,18 @@ export const internalIcons = new Map<string, SvgIcon>(
6583
star_border: {
6684
svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>`,
6785
},
68-
thumb_up: {
86+
thumb_up_empty: {
6987
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z"/></svg>`,
7088
},
71-
thumb_down: {
89+
thumb_up_filled: {
90+
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.75 19.5h3v-9h-3v9Zm16.5-8.25c0-.825-.675-1.5-1.5-1.5h-4.732l.712-3.428.022-.24c0-.307-.127-.592-.33-.795l-.795-.787-4.934 4.943c-.278.27-.443.645-.443 1.057V18c0 .825.675 1.5 1.5 1.5h6.75a1.49 1.49 0 0 0 1.38-.915l2.265-5.288c.067-.172.105-.352.105-.547v-1.5Z"/></svg>`,
91+
},
92+
thumb_down_empty: {
7293
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M240-840h440v520L400-40l-50-50q-7-7-11.5-19t-4.5-23v-14l44-174H120q-32 0-56-24t-24-56v-80q0-7 2-15t4-15l120-282q9-20 30-34t44-14Zm360 80H240L120-480v80h360l-54 220 174-174v-406Zm0 406v-406 406Zm80 34v-80h120v-360H680v-80h200v520H680Z"/></svg>`,
7394
},
95+
thumb_down_filled: {
96+
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.75 4.5h3v9h-3v-9Zm16.5 8.25c0 .825-.675 1.5-1.5 1.5h-4.732l.712 3.427.022.24c0 .308-.127.593-.33.795l-.795.788-4.934-4.943A1.466 1.466 0 0 1 8.25 13.5V6c0-.825.675-1.5 1.5-1.5h6.75a1.49 1.49 0 0 1 1.38.915l2.265 5.288c.067.172.105.352.105.547v1.5Z"/></svg>`,
97+
},
7498
reload: {
7599
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>`,
76100
},

0 commit comments

Comments
 (0)