From 4555e5c7d6d1bd5af688aeaa1d4b0dd0abdae058 Mon Sep 17 00:00:00 2001 From: Srinaath Ravichandran Date: Fri, 28 Feb 2020 15:26:57 -0800 Subject: [PATCH 1/4] Attachments background and fonts handled when WC will be bumped to Signed-off-by: Srinaath Ravichandran --- .../ui/editor/emulator/parts/chat/chat.scss | 1 + .../editor/emulator/parts/chat/chat.scss.d.ts | 1 + .../ui/editor/emulator/parts/chat/chat.tsx | 21 ++++++++++++------- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss index 9edefc4b3..51c2b19b2 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss @@ -32,6 +32,7 @@ // :export { bubbleContentColor: var(--bubble-text-color); } +:export { bubbleBackground: var(--webchat-user-bubble-bg); } .chat { background-color: white; diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss.d.ts b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss.d.ts index 849eaea4f..791c9e31a 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss.d.ts +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss.d.ts @@ -1,5 +1,6 @@ // This is a generated file. Changes are likely to result in being overwritten export const bubbleContentColor: string; +export const bubbleBackground: string; export const chat: string; export const disconnected: string; export const chatActivity: string; diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx index e52126482..e83210a38 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx @@ -101,17 +101,22 @@ export class Chat extends PureComponent { const styleSet = createStyleSet({ ...webChatStyleOptions, hideSendBox: isDisabled }); // Overriding default styles of webchat as these properties are not exposed directly - styleSet.uploadButton = { - ...styleSet.uploadButton, - padding: '1px', - }; - styleSet.uploadAttachment = { - ...styleSet.uploadAttachment, - '& > .name, & > .size': { + styleSet.fileContent = { + ...styleSet.fileContent, + background: styles.bubbleBackground, + '& .webchat__fileContent__fileName': { + color: styles.bubbleContentColor, + }, + '& .webchat__fileContent__size': { color: styles.bubbleContentColor, }, + '& .webchat__fileContent__downloadIcon': { + fill: styles.bubbleContentColor, + }, + '& .webchat__fileContent__badge': { + padding: '4px', + }, }; - styleSet.downloadAttachment = updateDownloadAttachmentStyle(styleSet.downloadAttachment); if (directLine) { const bot = { From dfb6d7ef89d2562929815dad5256faf9f4e12783 Mon Sep 17 00:00:00 2001 From: Srinaath Ravichandran Date: Fri, 28 Feb 2020 15:38:29 -0800 Subject: [PATCH 2/4] Changelogs updated Signed-off-by: Srinaath Ravichandran --- CHANGELOG.md | 2 ++ .../src/ui/editor/emulator/parts/chat/chat.tsx | 13 ------------- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a67f9636..86fa650be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [build] Changed one-click installer to assisted installer with new graphics. Also updated application icon in PR [2077](https://github.com/microsoft/BotFramework-Emulator/pull/2077) - [build] Locked `eslint-plugin-import@2.20.0` to avoid unecessary import linting changes in PR [2081](https://github.com/microsoft/BotFramework-Emulator/pull/2081) - [client] Thrown errors in client-side sagas will now be logged in their entirety to the dev tools console in PR [2087](https://github.com/microsoft/BotFramework-Emulator/pull/2087) +- [client] Upload and download attachments bubble texts and background in webchat were hidden. The adjustments have been to override FileContent class. [2071](https://github.com/microsoft/BotFramework-Emulator/issues/2071) + ## Removed - [client/main] Removed legacy payments code in PR [2058](https://github.com/microsoft/BotFramework-Emulator/pull/2058) diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx index e83210a38..83ca8de3d 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx @@ -65,19 +65,6 @@ interface ChatState { highlightedActivities?: Activity[]; } -const updateDownloadAttachmentStyle = downloadAttachment => { - try { - const mutatedDownloadAttachment = { - ...downloadAttachment, - }; - mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = styles.bubbleContentColor; - mutatedDownloadAttachment['& > a']['& > .icon'].fill = styles.bubbleContentColor; - return mutatedDownloadAttachment; - } catch { - return downloadAttachment; - } -}; - export class Chat extends PureComponent { public state = { waitForSpeechToken: false } as ChatState; private activityMap: { [activityId: string]: Activity } = {}; From 8376e0af98e309dba57958652aa2b38dbdbe53f0 Mon Sep 17 00:00:00 2001 From: Srinaath Ravichandran Date: Fri, 28 Feb 2020 15:42:15 -0800 Subject: [PATCH 3/4] typo fixed Signed-off-by: Srinaath Ravichandran --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86fa650be..ae32909f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [build] Changed one-click installer to assisted installer with new graphics. Also updated application icon in PR [2077](https://github.com/microsoft/BotFramework-Emulator/pull/2077) - [build] Locked `eslint-plugin-import@2.20.0` to avoid unecessary import linting changes in PR [2081](https://github.com/microsoft/BotFramework-Emulator/pull/2081) - [client] Thrown errors in client-side sagas will now be logged in their entirety to the dev tools console in PR [2087](https://github.com/microsoft/BotFramework-Emulator/pull/2087) -- [client] Upload and download attachments bubble texts and background in webchat were hidden. The adjustments have been to override FileContent class. [2071](https://github.com/microsoft/BotFramework-Emulator/issues/2071) +- [client] Upload and download attachments bubble texts and background in webchat were hidden. The adjustments have been made to override FileContent class in PR [2088](https://github.com/microsoft/BotFramework-Emulator/pull/2088) ## Removed From 2ac633e0811b26c452e6167eecd4e403d30599b2 Mon Sep 17 00:00:00 2001 From: Srinaath Ravichandran Date: Mon, 2 Mar 2020 10:47:28 -0800 Subject: [PATCH 4/4] Updated tests for fileContent inside styleset Signed-off-by: Srinaath Ravichandran --- .../editor/emulator/parts/chat/chat.spec.tsx | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx index e57dcfe0d..cbbae5852 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx @@ -59,6 +59,9 @@ jest.mock('./chat.scss', () => ({ get bubbleContentColor() { return '#fff'; }, + get bubbleBackground() { + return '#ff0000'; + }, })); jest.mock('electron', () => ({ @@ -156,24 +159,14 @@ describe('', () => { const webChat = wrapper.find(ReactWebChat); const styleSet = createStyleSet({ ...webChatStyleOptions }); - styleSet.uploadButton = { - ...styleSet.uploadButton, - padding: '1px', - }; - - styleSet.uploadAttachment = { - ...styleSet.uploadAttachment, - '& > .name, & > .size': { - color: '#fff', - }, - }; - - const mutatedDownloadAttachment = { - ...styleSet.downloadAttachment, + styleSet.fileContent = { + ...styleSet.fileContent, + background: '#ff0000', + '& .webchat__fileContent__badge': { padding: '4px' }, + '& .webchat__fileContent__downloadIcon': { fill: '#fff' }, + '& .webchat__fileContent__fileName': { color: '#fff' }, + '& .webchat__fileContent__size': { color: '#fff' }, }; - mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = '#fff'; - mutatedDownloadAttachment['& > a']['& > .icon'].fill = '#fff'; - styleSet.downloadAttachment = mutatedDownloadAttachment; expect(webChat.exists()).toBe(true); const wcProps = webChat.props();