From 272b3c2e035d314fa4877ee74b6dc364b405ceba Mon Sep 17 00:00:00 2001 From: Srinaath Ravichandran Date: Thu, 30 Jan 2020 11:14:29 -0800 Subject: [PATCH 1/2] Srravich/bugfix/1929 attachment (#2068) * Added size and text color for attachments Signed-off-by: Srinaath Ravichandran * Comment update Signed-off-by: Srinaath Ravichandran * Test fixes Signed-off-by: Srinaath Ravichandran * Updated download attachment style updated Signed-off-by: Srinaath Ravichandran --- .../ui/editor/emulator/parts/chat/chat.scss | 2 ++ .../editor/emulator/parts/chat/chat.scss.d.ts | 1 + .../editor/emulator/parts/chat/chat.spec.tsx | 20 +++++++++++++ .../ui/editor/emulator/parts/chat/chat.tsx | 30 +++++++++++++++++++ .../emulator/parts/chat/webChatTheme.ts | 1 + .../ngrokDebugger/ngrokStatusIndicator.scss | 2 +- .../app/client/src/ui/styles/themes/dark.css | 4 +++ .../src/ui/styles/themes/high-contrast.css | 4 +++ .../app/client/src/ui/styles/themes/light.css | 4 +++ 9 files changed, 67 insertions(+), 1 deletion(-) 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 4292712b2..9edefc4b3 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 @@ -31,6 +31,8 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. // +:export { bubbleContentColor: var(--bubble-text-color); } + .chat { background-color: white; display: flex; 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 7c6e204bd..849eaea4f 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,4 +1,5 @@ // This is a generated file. Changes are likely to result in being overwritten +export const bubbleContentColor: 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.spec.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx index 8b4be2bb7..e3ac4ddd7 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 @@ -55,6 +55,12 @@ import webChatStyleOptions from './webChatTheme'; import { ChatContainer } from './chatContainer'; import { ChatProps, Chat } from './chat'; +jest.mock('./chat.scss', () => ({ + get bubbleContentColor() { + return '#fff'; + }, +})); + jest.mock('electron', () => ({ ipcMain: new Proxy( {}, @@ -155,6 +161,20 @@ describe('', () => { padding: '1px', }; + styleSet.uploadAttachment = { + ...styleSet.uploadAttachment, + '& > .name, & > .size': { + color: '#fff', + }, + }; + + const mutatedDownloadAttachment = { + ...styleSet.downloadAttachment, + }; + mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = '#fff'; + mutatedDownloadAttachment['& > a']['& > .icon'].fill = '#fff'; + styleSet.downloadAttachment = mutatedDownloadAttachment; + expect(webChat.exists()).toBe(true); const wcProps = webChat.props(); expect(wcProps.bot).toEqual({ id: defaultDocument.botId, name: 'Bot' }); 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 b5f53cea3..e52126482 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,6 +65,19 @@ 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 } = {}; @@ -87,10 +100,18 @@ 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': { + color: styles.bubbleContentColor, + }, + }; + styleSet.downloadAttachment = updateDownloadAttachmentStyle(styleSet.downloadAttachment); if (directLine) { const bot = { @@ -146,10 +167,19 @@ export class Chat extends PureComponent { popup.location.href = url; break; } + case 'downloadFile': + //Fall through + case 'playAudio': + //Fall through + case 'playVideo': + //Fall through + case 'showImage': + //Fall through + case 'openUrl': if (value) { this.props.showOpenUrlDialog(value).then(result => { diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts b/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts index 2f885c3d9..67e22f1ef 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts @@ -38,6 +38,7 @@ export default { primaryFont: 'var(--default-font-family)', bubbleBackground: 'var(--webchat-bubble-bg)', + bubbleFromUserBackground: 'var(--webchat-user-bubble-bg)', bubbleFromUserTextColor: 'var(--webchat-user-bubble-text)', bubbleTextColor: 'var(--webchat-bubble-text)', bubbleMinHeight: 20, diff --git a/packages/app/client/src/ui/editor/ngrokDebugger/ngrokStatusIndicator.scss b/packages/app/client/src/ui/editor/ngrokDebugger/ngrokStatusIndicator.scss index 4a8b91a1f..a78de4edb 100644 --- a/packages/app/client/src/ui/editor/ngrokDebugger/ngrokStatusIndicator.scss +++ b/packages/app/client/src/ui/editor/ngrokDebugger/ngrokStatusIndicator.scss @@ -15,7 +15,7 @@ %common-tunnel-indicator { margin-right: 3px; padding: 5px; - color: var(--focused-list-item); + color: var(--ngrok-text-color); } .tunnel-details-list { diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css index eda9f920e..08e544825 100644 --- a/packages/app/client/src/ui/styles/themes/dark.css +++ b/packages/app/client/src/ui/styles/themes/dark.css @@ -297,6 +297,10 @@ html { --ngrok-active: #47B07F; --ngrok-error: #BE1100; --ngrok-error-outline: #F5B1B1; + --ngrok-text-color: #fff; + + /* Webchat style overrides */ + --bubble-text-color: #fff; } .dialog { diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css index 6b3cfdd1c..687a65c71 100644 --- a/packages/app/client/src/ui/styles/themes/high-contrast.css +++ b/packages/app/client/src/ui/styles/themes/high-contrast.css @@ -294,6 +294,10 @@ html { --ngrok-active: #47B07F; --ngrok-error: #BE1100; --ngrok-error-outline: #F5B1B1; + --ngrok-text-color: #000000; + + /* Webchat style overrides */ + --bubble-text-color: #000000; } .dialog .ms-Button-label { diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css index 16fe21c3c..9c1391a6c 100644 --- a/packages/app/client/src/ui/styles/themes/light.css +++ b/packages/app/client/src/ui/styles/themes/light.css @@ -297,4 +297,8 @@ html { --ngrok-active: #47B07F; --ngrok-error: #BE1100; --ngrok-error-outline: #F5B1B1; + --ngrok-text-color: #fff; + + /* Webchat style overrides */ + --bubble-text-color: #fff; } From 3b1c824e4c5968810f7f1350451638441d450b83 Mon Sep 17 00:00:00 2001 From: Tony Anziano Date: Thu, 30 Jan 2020 11:16:07 -0800 Subject: [PATCH 2/2] Fixed an issue where the themes menu was empty on Windows & Linux (#2069) --- CHANGELOG.md | 5 ++--- .../client/src/ui/shell/appMenu/appMenu.spec.tsx | 14 ++++++++++++++ .../app/client/src/ui/shell/appMenu/appMenu.tsx | 2 +- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9154220fb..7a3b0470b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,13 +13,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Fixed - [client] Hid services pane by default in PR [2059](https://github.com/microsoft/BotFramework-Emulator/pull/2059) - [client] Fixed an issue where trying to add a QnA KB manually after signing into Azure was causing the app to crash in PR [2066](https://github.com/microsoft/BotFramework-Emulator/pull/2066) +- [client] Removed buble background on attachments [2067](https://github.com/microsoft/BotFramework-Emulator/pull/2067) +- [client] Fixed an issue where the themes menu was empty on Windows & Linux in PR [2069](https://github.com/microsoft/BotFramework-Emulator/pull/2069) ## Removed - [client/main] Removed legacy payments code in PR [2058](https://github.com/microsoft/BotFramework-Emulator/pull/2058) -## Fixed -- [client] Removed buble background on attachments [2067](https://github.com/microsoft/BotFramework-Emulator/pull/2067) - ## v4.7.0 - 2019 - 12 - 13 ## Fixed - [client] Added an empty state for the recent bots submenu in the app menu for Windows in PR [1945](https://github.com/microsoft/BotFramework-Emulator/pull/1945) diff --git a/packages/app/client/src/ui/shell/appMenu/appMenu.spec.tsx b/packages/app/client/src/ui/shell/appMenu/appMenu.spec.tsx index 09a001b7c..223d6c168 100644 --- a/packages/app/client/src/ui/shell/appMenu/appMenu.spec.tsx +++ b/packages/app/client/src/ui/shell/appMenu/appMenu.spec.tsx @@ -106,11 +106,25 @@ describe('', () => { ...instance.props, activeBot: undefined, activeDocumentType: SharedConstants.ContentTypes.CONTENT_TYPE_WELCOME_PAGE, + availableThemes: [ + { name: 'Light', href: '' }, + { name: 'Dark', href: '' }, + { name: 'High contrast', href: '' }, + ], + currentTheme: 'Light', + recentBots: [ + { displayName: 'bot1', path: 'path1' }, + { displayName: 'bot2', path: 'path2' }, + { displayName: 'bot3', path: 'path3' }, + { displayName: 'bot4', path: 'path4' }, + ], }; const menuTemplate = (instance as any).updateMenu(AppMenuTemplate.template); expect(Object.keys(menuTemplate)).toHaveLength(6); + expect(menuTemplate['file'][3].items.length).toBe(4); // recent bots menu should be populated expect(menuTemplate['file'][7].disabled).toBe(true); // "Close tab" should be disabled + expect(menuTemplate['file'][14].items.length).toBe(3); // themes menu should be populated expect(menuTemplate['conversation'][0].disabled).toBe(true); // send activity menu should be disabled on welcome page }); diff --git a/packages/app/client/src/ui/shell/appMenu/appMenu.tsx b/packages/app/client/src/ui/shell/appMenu/appMenu.tsx index e5865d6c8..b2e9daf26 100644 --- a/packages/app/client/src/ui/shell/appMenu/appMenu.tsx +++ b/packages/app/client/src/ui/shell/appMenu/appMenu.tsx @@ -86,7 +86,7 @@ export class AppMenu extends React.Component { private updateMenu(template: { [key: string]: MenuItem[] }): { [key: string]: MenuItem[] } { const fileMenu = template['file']; - fileMenu[12].items = this.getThemeMenuItems(); + fileMenu[14].items = this.getThemeMenuItems(); fileMenu[3].items = this.getRecentBotsMenuItems(); // disable / enable "Close tab" button fileMenu[7].disabled = !this.props.activeBot;