Skip to content

Commit 0b66f20

Browse files
compulimcompulim
committed
Use moddable icon
1 parent 64643a3 commit 0b66f20

File tree

5 files changed

+83
-96
lines changed

5 files changed

+83
-96
lines changed

‎packages/component/src/ModdableIcon/ModdableIconStyle.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function createModdableIconStyle() {
1313
backgroundSize: 'var(--webchat__moddable-icon--size, 1em)',
1414

1515
// 2. If image is not set, fallback to solid color.
16-
backgroundColor: 'var(--webchat__moddable-icon--color, currentColor)',
16+
backgroundColor: 'var(--webchat__moddable-icon--color, transparent)',
1717

1818
// 3. Set the mask if any.
1919
maskImage: 'var(--webchat__moddable-icon--mask)', // TODO: Need to think about 3P customization story.

‎packages/component/src/SendBox/AttachmentBar/Preview/FileIcon.tsx‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎packages/component/src/SendBox/AttachmentBar/Preview/FilePreview.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import React, { memo } from 'react';
44
import { object, picklist, pipe, readonly, string, type InferInput } from 'valibot';
55

66
import { useStyleSet } from '../../../hooks';
7-
import FileIcon from './FileIcon';
8-
import ImageIcon from './ImageIcon';
7+
import ModdableIcon from '../../../ModdableIcon/ModdableIcon';
98
import { sendBoxAttachmentSchema } from './sendBoxAttachment';
109

1110
const sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema = pipe(
@@ -34,21 +33,26 @@ function SendBoxAttachmentBarItemFileAttachmentPreview(props: SendBoxAttachmentB
3433
className={classNames(
3534
sendBoxAttachmentBarItemFilePreviewClassName,
3635
'webchat__send-box-attachment-bar-item-file-preview',
37-
'webchat__send-box-attachment-bar-item-file-preview--as-list-item'
36+
'webchat__send-box-attachment-bar-item-file-preview--as-list-item',
37+
{
38+
'webchat__send-box-attachment-bar-item-file-preview--is-file': !attachment.thumbnailURL,
39+
'webchat__send-box-attachment-bar-item-file-preview--is-image': attachment.thumbnailURL
40+
}
3841
)}
3942
>
40-
{attachment.thumbnailURL ? <ImageIcon /> : <FileIcon />}
43+
<ModdableIcon />
4144
<div className="webchat__send-box-attachment-bar-item-file-preview__text">{attachmentName}</div>
4245
</div>
4346
) : (
4447
<div
4548
className={classNames(
4649
sendBoxAttachmentBarItemFilePreviewClassName,
4750
'webchat__send-box-attachment-bar-item-file-preview',
48-
'webchat__send-box-attachment-bar-item-file-preview--as-thumbnail'
51+
'webchat__send-box-attachment-bar-item-file-preview--as-thumbnail',
52+
'webchat__send-box-attachment-bar-item-file-preview--is-file'
4953
)}
5054
>
51-
<FileIcon size="large" />
55+
<ModdableIcon />
5256
</div>
5357
);
5458
}

‎packages/component/src/SendBox/AttachmentBar/Preview/FilePreviewStyle.ts‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,81 @@ export default function createSendBoxAttachmentBarItemFilePreviewStyle({ primary
1515

1616
'&.webchat__send-box-attachment-bar-item-file-preview--as-thumbnail': {
1717
height: '100%',
18-
justifyContent: 'center',
18+
justifyContent: 'stretch',
1919
width: '100%'
2020
},
2121

22+
'&.webchat__send-box-attachment-bar-item-file-preview--is-file.webchat__send-box-attachment-bar-item-file-preview--as-thumbnail':
23+
{
24+
'--webchat__moddable-icon--image': `url(data:image/svg+xml;utf8,${encodeURIComponent(`<svg fill="none" height="36" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg">
25+
<path
26+
d="M7.386 33H28.6C28.816 33 29 32.83 29 32.628V10H23.4C22.628 10 22 9.372 22 8.6V3H7.4C7.184 3 7 3.17 7 3.372V32.642C7 32.839 7.173 33 7.386 33Z"
27+
fill="#FFFFFF"
28+
/>
29+
<path d="M28.204 9.00043L23 3.81543V8.60043C23 8.82043 23.18 9.00043 23.4 9.00043H28.204Z" fill="white" />
30+
<path
31+
clip-rule="evenodd"
32+
d="M29.613 8.993L23.018 2.421C22.7473 2.15221 22.3815 2.00095 22 2H7.4C6.628 2 6 2.615 6 3.372V32.642C6 33.39 6.622 34 7.386 34H28.6C29.372 34 30 33.385 30 32.628V9.923C30 9.577 29.86 9.237 29.613 8.993ZM23 3.815L28.204 9H23.4C23.1791 9 23 8.82091 23 8.6V3.815ZM28.6 33C28.816 33 29 32.83 29 32.628V10H23.4C22.628 10 22 9.372 22 8.6V3H7.4C7.184 3 7 3.17 7 3.372V32.642C7 32.84 7.173 33 7.386 33H28.6Z"
33+
fill="#605E5C"
34+
fill-rule="evenodd"
35+
opacity="0.67"
36+
/>
37+
</svg>`)})`,
38+
'--webchat__moddable-icon--size': '36px'
39+
},
40+
41+
'&.webchat__send-box-attachment-bar-item-file-preview--is-file.webchat__send-box-attachment-bar-item-file-preview--as-list-item':
42+
{
43+
'--webchat__moddable-icon--image': `url(data:image/svg+xml;utf8,${encodeURIComponent(`<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
44+
<path
45+
d="M3.5 15H12.5C12.775 15 13 14.775 13 14.5V5H11.5C10.673 5 10 4.327 10 3.5V1H3.5C3.225 1 3 1.225 3 1.5V14.5C3 14.775 3.225 15 3.5 15Z"
46+
fill="#FCFCFC"
47+
/>
48+
<path
49+
d="M13 4V3.914C13.0004 3.78156 12.9478 3.65446 12.854 3.561L11 1.707V3.5C11 3.775 11.225 4 11.5 4H13Z"
50+
fill="#FCFCFC"
51+
/>
52+
<path
53+
clip-rule="evenodd"
54+
d="M13.56 2.853L11.146 0.44C10.8643 0.159539 10.4835 0.00143923 10.086 0H3.5C2.673 0 2 0.673 2 1.5V14.5C2 15.327 2.673 16 3.5 16H12.5C13.327 16 14 15.327 14 14.5V3.914C14 3.514 13.844 3.137 13.56 2.854V2.853ZM12.853 3.561C12.948 3.655 13 3.781 13 3.914V4H11.5C11.2241 3.99945 11.0006 3.77591 11 3.5V1.707L12.854 3.561H12.853ZM3.5 15H12.5C12.775 15 13 14.775 13 14.5V5H11.5C10.673 5 10 4.327 10 3.5V1H3.5C3.225 1 3 1.225 3 1.5V14.5C3.00055 14.7759 3.22409 14.9994 3.5 15Z"
55+
fill="#616161"
56+
fill-rule="evenodd"
57+
opacity="0.67"
58+
/>
59+
</svg>`)})`,
60+
'--webchat__moddable-icon--size': '16px'
61+
},
62+
63+
'&.webchat__send-box-attachment-bar-item-file-preview--is-image': {
64+
'--webchat__moddable-icon--image': `url(data:image/svg+xml;utf8,${encodeURIComponent(`<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
65+
<path
66+
d="M2.5 14H13.5C13.775 14 14 13.775 14 13.5V2.5C14 2.225 13.775 2 13.5 2H2.5C2.225 2 2 2.225 2 2.5V13.5C2 13.775 2.225 14 2.5 14Z"
67+
fill="#FCFCFC"
68+
/>
69+
<path
70+
clip-rule="evenodd"
71+
d="M9.27768 8.63L8.66968 9.476L7.38468 7.792C7.19551 7.54408 6.90152 7.39861 6.58968 7.39861C6.27784 7.39861 5.98385 7.54408 5.79468 7.792L4.18968 9.893C3.95877 10.1953 3.91939 10.6024 4.08807 10.9434C4.25675 11.2844 4.60427 11.5001 4.98468 11.5H11.0137C11.3887 11.4997 11.7321 11.2896 11.903 10.9557C12.074 10.6219 12.0437 10.2205 11.8247 9.916L10.9007 8.63C10.7128 8.36861 10.4106 8.21365 10.0887 8.21365C9.76678 8.21365 9.46456 8.36861 9.27668 8.63H9.27768Z"
72+
fill="#FCFCFC"
73+
fill-rule="evenodd"
74+
stroke="#A6CCC3"
75+
/>
76+
<path
77+
clip-rule="evenodd"
78+
d="M10.5 6.5C11.0523 6.5 11.5 6.05228 11.5 5.5C11.5 4.94772 11.0523 4.5 10.5 4.5C9.94772 4.5 9.5 4.94772 9.5 5.5C9.5 6.05228 9.94772 6.5 10.5 6.5Z"
79+
fill-rule="evenodd"
80+
stroke="#FF9810"
81+
/>
82+
<path
83+
clip-rule="evenodd"
84+
d="M2.5 15H13.5C14.327 15 15 14.327 15 13.5V2.5C15 1.673 14.327 1 13.5 1H2.5C1.673 1 1 1.673 1 2.5V13.5C1 14.327 1.673 15 2.5 15ZM2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5Z"
85+
fill="#616161"
86+
fill-rule="evenodd"
87+
opacity="0.67"
88+
/>
89+
</svg>`)})`,
90+
'--webchat__moddable-icon--size': '16px'
91+
},
92+
2293
'& .webchat__send-box-attachment-bar-item-file-preview__text': {
2394
overflow: 'hidden',
2495
textOverflow: 'ellipsis',

‎packages/component/src/SendBox/AttachmentBar/Preview/ImageIcon.tsx‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)