KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Add flat design for widget (#4065)

Browse source
This commit is contained in:
Pranav Raj S 2022-02-25 16:18:18 +05:30 • committed by GitHub
parent dcecbf4b80
commit 6c94768bdb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 251 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/javascript/sdk/IFrameHelper.js
View file

@ -26,6 +26,7 @@ import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
import { SET_USER_ERROR } from '../widget/constants/errorTypes';
import { getUserCookieName } from './cookieHelpers';
import { isFlatWidgetStyle } from './settingsHelper';
export const IFrameHelper = {
getUrl({ baseUrl, websiteToken }) {
@ -52,6 +53,10 @@ export const IFrameHelper = {
if (window.$chatwoot.hideMessageBubble) {
holderClassName += ` woot-widget--without-bubble`;
}
if (isFlatWidgetStyle(window.$chatwoot.widgetStyle)) {
holderClassName += ` woot-widget-holder--flat`;
}
addClass(widgetHolder, holderClassName);
widgetHolder.appendChild(iframe);
body.appendChild(widgetHolder);
@ -121,6 +126,7 @@ export const IFrameHelper = {
position: window.$chatwoot.position,
hideMessageBubble: window.$chatwoot.hideMessageBubble,
showPopoutButton: window.$chatwoot.showPopoutButton,
widgetStyle: window.$chatwoot.widgetStyle,
});
IFrameHelper.onLoad({
widgetColor: message.config.channelConfig.widgetColor,
@ -222,21 +228,27 @@ export const IFrameHelper = {
createBubbleHolder();
onLocationChangeListener();
if (!window.$chatwoot.hideMessageBubble) {
let className = 'woot-widget-bubble';
let closeBtnClassName = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
if (isFlatWidgetStyle(window.$chatwoot.widgetStyle)) {
className += ' woot-widget-bubble--flat';
closeBtnClassName += ' woot-widget-bubble--flat';
}
const chatIcon = createBubbleIcon({
className: 'woot-widget-bubble',
className,
src: bubbleImg,
target: chatBubble,
});
const closeIcon = closeBubble;
const closeIconclassName = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
addClass(closeIcon, closeIconclassName);
addClass(closeBubble, closeBtnClassName);
chatIcon.style.background = widgetColor;
closeIcon.style.background = widgetColor;
closeBubble.style.background = widgetColor;
bubbleHolder.appendChild(chatIcon);
bubbleHolder.appendChild(closeIcon);
bubbleHolder.appendChild(closeBubble);
bubbleHolder.appendChild(createNotificationBubble());
onClickChatBubble();
}