LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: Update colors in widget buttons to fix invalid colors (#6033)

Browse Source 
Co-authored-by: nithindavid <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2022-12-15 04:51:20 +05:30
committed by GitHub
parent 26e05de642
commit 2972319026
11 changed files with 99 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/sdk/IFrameHelper.js
View File

@@ -10,7 +10,7 @@ import {
widgetHolder,
createBubbleHolder,
createBubbleIcon,
bubbleImg,
bubbleSVG,
chatBubble,
closeBubble,
bubbleHolder,
@@ -21,6 +21,7 @@ import {
addUnreadClass,
removeUnreadClass,
} from './bubbleHelpers';
import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
import { SET_USER_ERROR } from '../widget/constants/errorTypes';
@@ -277,9 +278,14 @@ export const IFrameHelper = {
closeBtnClassName += ' woot-widget-bubble--flat';
}
if (isWidgetColorLighter(widgetColor)) {
className += ' woot-widget-bubble-color--lighter';
closeBtnClassName += ' woot-widget-bubble-color--lighter';
}
const chatIcon = createBubbleIcon({
className,
src: bubbleImg,
path: bubbleSVG,
target: chatBubble,
});

28
app/javascript/sdk/bubbleHelpers.js
View File

@@ -2,8 +2,8 @@ import { addClasses, removeClasses, toggleClass } from './DOMHelpers';
import { IFrameHelper } from './IFrameHelper';
import { isExpandedView } from './settingsHelper';
export const bubbleImg =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg==';
export const bubbleSVG =
'M240.808 240.808H122.123C56.6994 240.808 3.45695 187.562 3.45695 122.122C3.45695 56.7031 56.6994 3.45697 122.124 3.45697C187.566 3.45697 240.808 56.7031 240.808 122.122V240.808Z';
export const body = document.getElementsByTagName('body')[0];
export const widgetHolder = document.createElement('div');
@@ -20,11 +20,27 @@ export const setBubbleText = bubbleText => {
}
};
export const createBubbleIcon = ({ className, src, target }) => {
export const createBubbleIcon = ({ className, path, target }) => {
let bubbleClassName = `${className} woot-elements--${window.$chatwoot.position}`;
const bubbleIcon = document.createElement('img');
bubbleIcon.src = src;
bubbleIcon.alt = 'bubble-icon';
const bubbleIcon = document.createElementNS(
'http://www.w3.org/2000/svg',
'svg'
);
bubbleIcon.setAttributeNS(null, 'id', 'woot-widget-bubble-icon');
bubbleIcon.setAttributeNS(null, 'width', '24');
bubbleIcon.setAttributeNS(null, 'height', '24');
bubbleIcon.setAttributeNS(null, 'viewBox', '0 0 240 240');
bubbleIcon.setAttributeNS(null, 'fill', 'none');
bubbleIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
const bubblePath = document.createElementNS(
'http://www.w3.org/2000/svg',
'path'
);
bubblePath.setAttributeNS(null, 'd', path);
bubblePath.setAttributeNS(null, 'fill', '#FFFFFF');
bubbleIcon.appendChild(bubblePath);
target.appendChild(bubbleIcon);
if (isExpandedView(window.$chatwoot.type)) {

19
app/javascript/sdk/sdk.js
View File

@@ -1,6 +1,7 @@
export const SDK_CSS = `
:root {
--b-100: #F2F3F7;
--s-700: #37546D;
}
.woot-widget-holder {
@@ -64,7 +65,7 @@ export const SDK_CSS = `
width: 56px;
}
.woot-widget-bubble.woot-widget-bubble--flat img {
.woot-widget-bubble.woot-widget-bubble--flat svg {
margin: 16px;
}
@@ -107,7 +108,11 @@ export const SDK_CSS = `
width: auto !important;
}
.woot-widget-bubble.woot-widget--expanded img {
.woot-widget-bubble.woot-widget--expanded.woot-widget-bubble-color--lighter div{
color: var(--s-700);
}
.woot-widget-bubble.woot-widget--expanded svg {
height: 20px;
margin: 14px 8px 14px 16px;
width: 20px;
@@ -126,13 +131,17 @@ export const SDK_CSS = `
box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
}
.woot-widget-bubble img {
.woot-widget-bubble svg {
all: revert;
height: 24px;
margin: 20px;
width: 24px;
}
.woot-widget-bubble.woot-widget-bubble-color--lighter path{
fill: var(--s-700);
}
@media only screen and (min-width: 667px) {
.woot-widget-holder.woot-elements--left {
left: 20px;
@@ -157,6 +166,10 @@ export const SDK_CSS = `
width: 2px;
}
.woot-widget-bubble-color--lighter.woot--close::before, .woot-widget-bubble-color--lighter.woot--close::after {
background-color: var(--s-700);
}
.woot--close::before {
transform: rotate(45deg);
}