From ec626ebd16c0a6737c1e632e428564db428c1e02 Mon Sep 17 00:00:00 2001 From: TJ Durnford Date: Thu, 5 Sep 2019 17:36:58 -0700 Subject: [PATCH 1/4] Added avatar background options --- CHANGELOG.md | 1 + ...asic-js-avatar-background-color-1-snap.png | Bin 0 -> 19526 bytes __tests__/basic.js | 20 ++++++++++++++++++ .../component/src/Styles/StyleSet/Avatar.js | 17 +++++++++++++-- .../src/Styles/defaultStyleOptions.js | 2 ++ 5 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 __tests__/__image_snapshots__/chrome-docker/basic-js-avatar-background-color-1-snap.png diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f17823130..5c856b5312 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -98,6 +98,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Specifically [`OffscreenCanvas.getContext('2d')`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/getContext) - Added `timestampFormat` option to the default style options and created `AbsoluteTime` component, by [@tdurnford](https://github.com/tdurnford), in PR [#2295](https://github.com/microsoft/BotFramework-WebChat/pull/2295) - `embed`: Added ES5 polyfills and dev server, by [@compulim](https://github.com/compulim), in PR [#2315](https://github.com/microsoft/BotFramework-WebChat/pull/2315) +- Fix [#2380](https://github.com/microsoft/BotFramework-WebChat/issues/2380). Added `botAvatarBackgroundColor` and `userAvatarBackgroundColor` to the default style options, by [@tdurnford](https://github.com/tdurnford) in PR [#23XX](https://github.com/microsoft/BotFramework-WebChat/pull/23XX) ### Samples diff --git a/__tests__/__image_snapshots__/chrome-docker/basic-js-avatar-background-color-1-snap.png b/__tests__/__image_snapshots__/chrome-docker/basic-js-avatar-background-color-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..573c231640714e0411b370e2fcdb6c00166b2770 GIT binary patch literal 19526 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

cpaf|1D@=u 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 { expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); }); + +test('avatar background color', async () => { + const styleOptions = { + botAvatarBackgroundColor: 'red', + botAvatarInitials: 'B', + userAvatarBackgroundColor: 'blue', + userAvatarInitials: 'TJ' + }; + + const { driver, pageObjects } = await setupWebDriver({ props: { styleOptions } }); + + await driver.wait(uiConnected(), timeouts.directLine); + await pageObjects.sendMessageViaSendBox('echo "Hello, World!"', { waitForSend: true }); + + await driver.wait(minNumActivitiesShown(3), timeouts.directLine); + + const base64PNG = await driver.takeScreenshot(); + + expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); +}); diff --git a/packages/component/src/Styles/StyleSet/Avatar.js b/packages/component/src/Styles/StyleSet/Avatar.js index ad522cdbfc..c52d8a0e9f 100644 --- a/packages/component/src/Styles/StyleSet/Avatar.js +++ b/packages/component/src/Styles/StyleSet/Avatar.js @@ -1,7 +1,12 @@ -export default function createAvatarStyle({ accent, avatarSize, primaryFont }) { +export default function createAvatarStyle({ + accent, + avatarSize, + botAvatarBackgroundColor, + primaryFont, + userAvatarBackgroundColor +}) { return { alignItems: 'center', - backgroundColor: accent, borderRadius: '50%', color: 'White', // TODO: [P2] We should not set "display" in styleSet, this will allow the user to break the layout for no good reasons. @@ -13,6 +18,14 @@ export default function createAvatarStyle({ accent, avatarSize, primaryFont }) { position: 'relative', width: avatarSize, + '&.from-user': { + backgroundColor: userAvatarBackgroundColor || accent + }, + + '&:not(.from-user)': { + backgroundColor: botAvatarBackgroundColor || accent + }, + '& > .image': { left: 0, position: 'absolute', diff --git a/packages/component/src/Styles/defaultStyleOptions.js b/packages/component/src/Styles/defaultStyleOptions.js index 0624c58b41..b13589fc89 100644 --- a/packages/component/src/Styles/defaultStyleOptions.js +++ b/packages/component/src/Styles/defaultStyleOptions.js @@ -27,8 +27,10 @@ const DEFAULT_OPTIONS = { // Avatar avatarSize: 40, + botAvatarBackgroundColor: null, // defaults to accent color in styleSet botAvatarImage: '', botAvatarInitials: '', + userAvatarBackgroundColor: null, // defaults to accent color in styleSet userAvatarImage: '', userAvatarInitials: '', From 1d3a1d69de569b7c9064232c1940d20ac8f1e036 Mon Sep 17 00:00:00 2001 From: TJ Durnford Date: Thu, 5 Sep 2019 17:44:14 -0700 Subject: [PATCH 2/4] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c856b5312..cdbc18e050 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -98,7 +98,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Specifically [`OffscreenCanvas.getContext('2d')`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/getContext) - Added `timestampFormat` option to the default style options and created `AbsoluteTime` component, by [@tdurnford](https://github.com/tdurnford), in PR [#2295](https://github.com/microsoft/BotFramework-WebChat/pull/2295) - `embed`: Added ES5 polyfills and dev server, by [@compulim](https://github.com/compulim), in PR [#2315](https://github.com/microsoft/BotFramework-WebChat/pull/2315) -- Fix [#2380](https://github.com/microsoft/BotFramework-WebChat/issues/2380). Added `botAvatarBackgroundColor` and `userAvatarBackgroundColor` to the default style options, by [@tdurnford](https://github.com/tdurnford) in PR [#23XX](https://github.com/microsoft/BotFramework-WebChat/pull/23XX) +- Fix [#2380](https://github.com/microsoft/BotFramework-WebChat/issues/2380). Added `botAvatarBackgroundColor` and `userAvatarBackgroundColor` to the default style options, by [@tdurnford](https://github.com/tdurnford) in PR [#2384](https://github.com/microsoft/BotFramework-WebChat/pull/2384) ### Samples From 1f8e2c8b4842959c49f502a32354d7c1d1c4f00e Mon Sep 17 00:00:00 2001 From: TJ Durnford Date: Fri, 6 Sep 2019 11:22:03 -0700 Subject: [PATCH 3/4] Added additional default style options --- .../src/Styles/StyleSet/CarouselFlipper.js | 4 +- .../src/Styles/StyleSet/ScrollToEndButton.js | 4 +- .../src/Styles/StyleSet/SendBoxButton.js | 5 ++- .../src/Styles/StyleSet/SendBoxTextArea.js | 5 ++- .../src/Styles/StyleSet/SendBoxTextBox.js | 15 ++++++-- .../src/Styles/StyleSet/SendStatus.js | 4 +- .../src/Styles/StyleSet/SuggestedAction.js | 22 +++++++++-- .../StyleSet/SuggestedActionsStyleSet.js | 4 +- .../src/Styles/StyleSet/Timestamp.js | 4 +- .../src/Styles/StyleSet/UploadButton.js | 5 ++- .../src/Styles/defaultStyleOptions.js | 37 ++++++++++++------- .../index.html | 26 ++++++++++++- 12 files changed, 96 insertions(+), 39 deletions(-) diff --git a/packages/component/src/Styles/StyleSet/CarouselFlipper.js b/packages/component/src/Styles/StyleSet/CarouselFlipper.js index 3ddae5b5f9..0168f8d795 100644 --- a/packages/component/src/Styles/StyleSet/CarouselFlipper.js +++ b/packages/component/src/Styles/StyleSet/CarouselFlipper.js @@ -22,12 +22,12 @@ export default function CarouselFlipper({ '&:focus > div.slider > div.button': { backgroundColor: transcriptOverlayButtonBackgroundOnFocus, - color: transcriptOverlayButtonColorOnFocus + color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor }, '&:hover > div.slider > div.button': { backgroundColor: transcriptOverlayButtonBackgroundOnHover, - color: transcriptOverlayButtonColorOnHover + color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor } }; } diff --git a/packages/component/src/Styles/StyleSet/ScrollToEndButton.js b/packages/component/src/Styles/StyleSet/ScrollToEndButton.js index 6e541e2a2e..466d1ed453 100644 --- a/packages/component/src/Styles/StyleSet/ScrollToEndButton.js +++ b/packages/component/src/Styles/StyleSet/ScrollToEndButton.js @@ -26,12 +26,12 @@ export default function createScrollToEndButtonStyle({ '&:hover': { backgroundColor: transcriptOverlayButtonBackgroundOnHover, - color: transcriptOverlayButtonColorOnHover + color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor }, '&:focus': { backgroundColor: transcriptOverlayButtonBackgroundOnFocus, - color: transcriptOverlayButtonColorOnFocus + color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor } }; } diff --git a/packages/component/src/Styles/StyleSet/SendBoxButton.js b/packages/component/src/Styles/StyleSet/SendBoxButton.js index 240dfe7a6a..57c72b3b7a 100644 --- a/packages/component/src/Styles/StyleSet/SendBoxButton.js +++ b/packages/component/src/Styles/StyleSet/SendBoxButton.js @@ -3,7 +3,8 @@ export default function createSendBoxButtonStyle({ sendBoxButtonColorOnDisabled, sendBoxButtonColorOnFocus, sendBoxButtonColorOnHover, - sendBoxHeight + sendBoxHeight, + subtle }) { return { backgroundColor: 'Transparent', @@ -26,7 +27,7 @@ export default function createSendBoxButtonStyle({ }, '& svg': { - fill: sendBoxButtonColor + fill: sendBoxButtonColor || subtle }, '&:disabled svg': { diff --git a/packages/component/src/Styles/StyleSet/SendBoxTextArea.js b/packages/component/src/Styles/StyleSet/SendBoxTextArea.js index 33bd0959c6..251694680f 100644 --- a/packages/component/src/Styles/StyleSet/SendBoxTextArea.js +++ b/packages/component/src/Styles/StyleSet/SendBoxTextArea.js @@ -4,7 +4,8 @@ export default function createSendBoxTextAreaStyle({ sendBoxBackground, sendBoxMaxHeight, sendBoxPlaceholderColor, - sendBoxTextColor + sendBoxTextColor, + subtle }) { return { alignItems: 'center', @@ -51,7 +52,7 @@ export default function createSendBoxTextAreaStyle({ wordBreak: 'break-word', '&::placeholder': { - color: sendBoxPlaceholderColor + color: sendBoxPlaceholderColor || subtle } } } diff --git a/packages/component/src/Styles/StyleSet/SendBoxTextBox.js b/packages/component/src/Styles/StyleSet/SendBoxTextBox.js index e7253ff1eb..20321825ee 100644 --- a/packages/component/src/Styles/StyleSet/SendBoxTextBox.js +++ b/packages/component/src/Styles/StyleSet/SendBoxTextBox.js @@ -1,8 +1,10 @@ export default function createSendBoxTextBoxStyle({ primaryFont, sendBoxBackground, + sendBoxDisabledTextColor, sendBoxPlaceholderColor, - sendBoxTextColor + sendBoxTextColor, + subtle }) { return { alignItems: 'center', @@ -11,15 +13,22 @@ export default function createSendBoxTextBoxStyle({ '& > input': { backgroundColor: sendBoxBackground, border: 0, - color: sendBoxTextColor, fontFamily: 'inherit', fontSize: 'inherit', height: '100%', outline: 0, padding: 0, + '&:not(:disabled)': { + color: sendBoxTextColor + }, + + '&:disabled': { + color: sendBoxDisabledTextColor || subtle + }, + '&::placeholder': { - color: sendBoxPlaceholderColor + color: sendBoxPlaceholderColor || subtle } } }; diff --git a/packages/component/src/Styles/StyleSet/SendStatus.js b/packages/component/src/Styles/StyleSet/SendStatus.js index 17451b61a8..07a006b8fe 100644 --- a/packages/component/src/Styles/StyleSet/SendStatus.js +++ b/packages/component/src/Styles/StyleSet/SendStatus.js @@ -1,6 +1,6 @@ -export default function createSendStatusStyle({ accent, fontSizeSmall, primaryFont, timestampColor }) { +export default function createSendStatusStyle({ accent, fontSizeSmall, primaryFont, subtle, timestampColor }) { return { - color: timestampColor, + color: timestampColor || subtle, fontFamily: primaryFont, fontSize: fontSizeSmall, paddingTop: 5, diff --git a/packages/component/src/Styles/StyleSet/SuggestedAction.js b/packages/component/src/Styles/StyleSet/SuggestedAction.js index e1598a12e1..149c96ac70 100644 --- a/packages/component/src/Styles/StyleSet/SuggestedAction.js +++ b/packages/component/src/Styles/StyleSet/SuggestedAction.js @@ -1,18 +1,26 @@ /* eslint no-magic-numbers: "off" */ export default function createSuggestedActionStyle({ + accent, paddingRegular, paddingWide, primaryFont, suggestedActionBackground, suggestedActionBorder, + suggestedActionBorderColor, + suggestedActionBorderStyle, + suggestedActionBorderWidth, suggestedActionBorderRadius, suggestedActionImageHeight, suggestedActionTextColor, suggestedActionDisabledBackground, suggestedActionDisabledBorder, + suggestedActionDisabledBorderColor, + suggestedActionDisabledBorderStyle, + suggestedActionDisabledBorderWidth, suggestedActionDisabledTextColor, - suggestedActionHeight + suggestedActionHeight, + subtle }) { return { paddingBottom: paddingRegular, @@ -30,15 +38,21 @@ export default function createSuggestedActionStyle({ paddingRight: paddingWide, '&:disabled': { - background: suggestedActionDisabledBackground, + background: suggestedActionDisabledBackground || suggestedActionBackground, border: suggestedActionDisabledBorder, - color: suggestedActionDisabledTextColor + borderColor: !suggestedActionDisabledBorder ? suggestedActionDisabledBorderColor : null, + borderStyle: !suggestedActionDisabledBorder ? suggestedActionDisabledBorderStyle : null, + borderWidth: !suggestedActionDisabledBorder ? suggestedActionDisabledBorderWidth : null, + color: suggestedActionDisabledTextColor || subtle }, '&:not(:disabled)': { background: suggestedActionBackground, border: suggestedActionBorder, - color: suggestedActionTextColor + borderColor: !suggestedActionBorder ? suggestedActionBorderColor || accent : null, + borderStyle: !suggestedActionBorder ? suggestedActionBorderStyle : null, + borderWidth: !suggestedActionBorder ? suggestedActionBorderWidth : null, + color: suggestedActionTextColor || accent }, '& > img': { diff --git a/packages/component/src/Styles/StyleSet/SuggestedActionsStyleSet.js b/packages/component/src/Styles/StyleSet/SuggestedActionsStyleSet.js index 4ab349b5f3..390fcf5872 100644 --- a/packages/component/src/Styles/StyleSet/SuggestedActionsStyleSet.js +++ b/packages/component/src/Styles/StyleSet/SuggestedActionsStyleSet.js @@ -36,12 +36,12 @@ export default function createSuggestedActionsStyleSet({ '&:focus > div.slider > div': { backgroundColor: transcriptOverlayButtonBackgroundOnFocus, - color: transcriptOverlayButtonColorOnFocus + color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor }, '&:hover > div.slider > div': { backgroundColor: transcriptOverlayButtonBackgroundOnHover, - color: transcriptOverlayButtonColorOnHover + color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor } }); diff --git a/packages/component/src/Styles/StyleSet/Timestamp.js b/packages/component/src/Styles/StyleSet/Timestamp.js index 426b4b205f..df16aad64b 100644 --- a/packages/component/src/Styles/StyleSet/Timestamp.js +++ b/packages/component/src/Styles/StyleSet/Timestamp.js @@ -1,6 +1,6 @@ -export default function createTimestampStyle({ timestampColor, primaryFont, fontSizeSmall }) { +export default function createTimestampStyle({ fontSizeSmall, primaryFont, subtle, timestampColor }) { return { - color: timestampColor, + color: timestampColor || subtle, fontFamily: primaryFont, fontSize: fontSizeSmall, paddingTop: 5 diff --git a/packages/component/src/Styles/StyleSet/UploadButton.js b/packages/component/src/Styles/StyleSet/UploadButton.js index 40f185b5bf..923a09b0ba 100644 --- a/packages/component/src/Styles/StyleSet/UploadButton.js +++ b/packages/component/src/Styles/StyleSet/UploadButton.js @@ -2,14 +2,15 @@ export default function createUploadButtonStyle({ sendBoxButtonColor, sendBoxButtonColorOnFocus, sendBoxButtonColorOnHover, - sendBoxHeight + sendBoxHeight, + subtle }) { return { // We use the sendBoxHeight, so the button looks square width: sendBoxHeight, '& > .icon > svg': { - fill: sendBoxButtonColor + fill: sendBoxButtonColor || subtle }, '& > input:hover + .icon > svg': { diff --git a/packages/component/src/Styles/defaultStyleOptions.js b/packages/component/src/Styles/defaultStyleOptions.js index b13589fc89..5c934da46b 100644 --- a/packages/component/src/Styles/defaultStyleOptions.js +++ b/packages/component/src/Styles/defaultStyleOptions.js @@ -27,14 +27,15 @@ const DEFAULT_OPTIONS = { // Avatar avatarSize: 40, - botAvatarBackgroundColor: null, // defaults to accent color in styleSet + botAvatarBackgroundColor: null, // defaults to accent color botAvatarImage: '', botAvatarInitials: '', - userAvatarBackgroundColor: null, // defaults to accent color in styleSet + userAvatarBackgroundColor: null, // defaults to accent color userAvatarImage: '', userAvatarInitials: '', // Bubble + // TODO: Should we make a bubbleFromBot* bubbleBackground: 'White', bubbleBorderColor: '#E6E6E6', bubbleBorderRadius: 2, @@ -74,18 +75,20 @@ const DEFAULT_OPTIONS = { hideUploadButton: false, microphoneButtonColorOnDictate: '#F33', sendBoxBackground: 'White', - sendBoxButtonColor: '#767676', + sendBoxButtonColor: null, // defaults to subtle sendBoxButtonColorOnDisabled: '#CCC', sendBoxButtonColorOnFocus: '#333', sendBoxButtonColorOnHover: '#333', + sendBoxDisabledTextColor: null, // defaults to subtle sendBoxHeight: 40, sendBoxMaxHeight: 200, sendBoxTextColor: 'Black', + // TODO: We should deprecate this because there isn't an easy way to make the width of the send box, narrower than the transcript sendBoxBorderBottom: '', sendBoxBorderLeft: '', sendBoxBorderRight: '', - sendBoxBorderTop: 'solid 1px #E6E6E6', - sendBoxPlaceholderColor: '#767676', + sendBoxBorderTop: 'solid 1px #E6E6E6', // split into 3 + sendBoxPlaceholderColor: null, // defaults to subtle sendBoxTextWrap: false, // Visually show spoken text @@ -93,17 +96,23 @@ const DEFAULT_OPTIONS = { // Suggested actions suggestedActionBackground: 'White', - suggestedActionBorder: `solid 2px ${DEFAULT_ACCENT}`, + suggestedActionBorder: null, // split into 3, null + suggestedActionBorderColor: null, // defaults to accent + suggestedActionBorderStyle: 'solid', + suggestedActionBoarderWidth: 2, suggestedActionBorderRadius: 0, suggestedActionImageHeight: 20, - suggestedActionTextColor: DEFAULT_ACCENT, - suggestedActionDisabledBackground: 'White', - suggestedActionDisabledBorder: `solid 2px #E6E6E6`, - suggestedActionDisabledTextColor: DEFAULT_SUBTLE, + suggestedActionTextColor: null, + suggestedActionDisabledBackground: null, // defaults to suggestedActionBackground + suggestedActionDisabledBorder: null, + suggestedActionDisabledBorderColor: '#E6E6E6', + suggestedActionDisabledBorderStyle: 'solid', + suggestedActionDisabledBorderWidth: 2, + suggestedActionDisabledTextColor: null, // defaults to subtle suggestedActionHeight: 40, // Timestamp - timestampColor: DEFAULT_SUBTLE, + timestampColor: null, // defaults to subtle timestampFormat: 'relative', // 'absolute' // Transcript overlay buttons (e.g. carousel and suggested action flippers, scroll to bottom, etc.) @@ -111,8 +120,8 @@ const DEFAULT_OPTIONS = { transcriptOverlayButtonBackgroundOnFocus: 'rgba(0, 0, 0, .8)', transcriptOverlayButtonBackgroundOnHover: 'rgba(0, 0, 0, .8)', transcriptOverlayButtonColor: 'White', - transcriptOverlayButtonColorOnFocus: 'White', - transcriptOverlayButtonColorOnHover: 'White', + transcriptOverlayButtonColorOnFocus: null, // defaults to transcriptOverlayButtonColor + transcriptOverlayButtonColorOnHover: null, // defaults to transcriptOverlayButtonColor // Video videoHeight: 270, // based on bubbleMaxWidth, 480 / 16 * 9 = 270 @@ -121,7 +130,7 @@ const DEFAULT_OPTIONS = { connectivityIconPadding: PADDING_REGULAR * 1.2, connectivityMarginLeftRight: PADDING_REGULAR * 1.4, connectivityMarginTopBottom: PADDING_REGULAR * 0.8, - connectivityTextSize: 12, + connectivityTextSize: '75%', failedConnectivity: '#C50F1F', slowConnectivity: '#EAA300', notificationText: '#5E5E5E', diff --git a/samples/01.a.getting-started-full-bundle/index.html b/samples/01.a.getting-started-full-bundle/index.html index af2acf5206..4620005e12 100644 --- a/samples/01.a.getting-started-full-bundle/index.html +++ b/samples/01.a.getting-started-full-bundle/index.html @@ -7,7 +7,7 @@ This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed: https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits --> - +