feat: extending sidepanel example to include rounded corners + new icon #270
Conversation
Also adding a fullscreen example. Also fixed a bug in the example where we were leaving the parent element still on the screen blocking clicks. Can not be merged until 8.2 goes out with rounded corner support.
| @@ -81,6 +85,8 @@ | |||
| // Move the main window to the off-screen position and then un-hide it. | |||
| instance.elements.getMainWindow().addClassName('StartOpenAnimation'); | |||
| instance.elements.getMainWindow().removeClassName('HideWebChat'); | |||
| // Make the custom element visible. | |||
| customElement.classList.remove('WebChatContainer--hidden'); | |||
There was a problem hiding this comment.
I don't think this should be here. One of the points of this tutorial is to demonstrate how to animate the opening and closing of web chat and still use our built-in launcher. If you hide the custom element, you can't do that. And in fact, because of this, this example doesn't actually work. If you open this html file as-is, the custom element is hidden and the launcher is invisible.
There was a problem hiding this comment.
If I remove the changes to the hide the custom element, the entrance animation doesn't work. Web chat just instantly appears. The exit animation does however work.
| // Have the "close" button be an icon to show that the chat will close to the right. | ||
| closeButtonIconType: 'side-panel-right' | ||
| }, | ||
| carbonTheme: { |
There was a problem hiding this comment.
This should be themeConfig, not carbonConfig.
| element: customElement, | ||
| // Move to fullscreen layout option. | ||
| layout: { | ||
| // Removes dropshadows and borders. |
There was a problem hiding this comment.
Typo: dropshadows -> drop shadows
| @@ -47,6 +48,8 @@ function viewChangeHandler(event, instance, stylesInitializedRef) { | |||
| // Move the main window to the off-screen position and then un-hide it. | |||
| instance.elements.getMainWindow().addClassName('StartOpenAnimation'); | |||
| instance.elements.getMainWindow().removeClassName('HideWebChat'); | |||
| // Make the custom element visible. | |||
| customElement.classList.remove('WebChatContainer--hidden'); | |||
There was a problem hiding this comment.
In this case, the launcher is visible when you first launch the app and you can use it to open web chat but when you close the web chat, the launcher does not become visible again and you can't open web chat back up.
| @@ -6,6 +6,9 @@ const config = { | |||
| region: 'us-south', | |||
| serviceInstanceID: '9a3613d2-3ce6-4928-8eb6-4d659d87ae68', | |||
| subscriptionID: null, | |||
| // You would likely use our own launcher in this scenario. | |||
There was a problem hiding this comment.
If you want square corners like the JS example, you should add the corners option.
Also adding a fullscreen example.
Also fixed a bug in the example where we were leaving the parent element still on the screen blocking clicks.
Cannot be merged until 8.2 goes out with rounded corner support.