blsmedia/bot
2
0
Fork 0
Code Activity

🐛 (embed) Fix custom close icon placement in bubble button

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-07-31 09:39:30 +02:00
parent f8af76d347
commit 81c2e5022b
5 changed files with 58 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/embeds/js/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@typebot.io/js",
"version": "0.1.11",
"version": "0.1.12",
"description": "Javascript library to display typebots on your website",
"type": "module",
"main": "dist/index.js",
@@ -29,6 +29,7 @@
"@typebot.io/tsconfig": "workspace:*",
"autoprefixer": "10.4.14",
"babel-preset-solid": "1.7.7",
"clsx": "2.0.0",
"eslint": "8.44.0",
"eslint-config-custom": "workspace:*",
"eslint-plugin-solid": "0.12.1",

95
packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
View File

@@ -2,6 +2,7 @@ import { Show } from 'solid-js'
import { isNotDefined, isSvgSrc } from '@typebot.io/lib'
import { BubbleTheme, ButtonTheme } from '../types'
import { isLight } from '@typebot.io/lib/hexToRgb'
import { clsx } from 'clsx'
type Props = Pick<BubbleTheme, 'placement'> &
ButtonTheme & {
@@ -20,11 +21,11 @@ export const BubbleButton = (props: Props) => (
<button
part="button"
onClick={() => props.toggleBot()}
class={
'fixed bottom-5 shadow-md rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in' +
(props.size === 'large' ? ' w-16 h-16' : ' w-12 h-12') +
(props.placement === 'left' ? ' left-5' : ' right-5')
}
class={clsx(
'fixed bottom-5 shadow-md rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in',
props.size === 'large' ? ' w-16 h-16' : ' w-12 h-12',
props.placement === 'left' ? ' left-5' : ' right-5'
)}
style={{
'background-color': props.backgroundColor ?? defaultButtonColor,
'z-index': 42424242,
@@ -40,11 +41,11 @@ export const BubbleButton = (props: Props) => (
? defaultDarkIconColor
: defaultLightIconColor),
}}
class={
`stroke-2 fill-transparent absolute duration-200 transition ` +
(props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100') +
(props.size === 'large' ? ' w-9' : ' w-7')
}
class={clsx(
'stroke-2 fill-transparent absolute duration-200 transition',
props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100',
props.size === 'large' ? 'w-9' : 'w-7'
)}
>
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
@@ -53,27 +54,25 @@ export const BubbleButton = (props: Props) => (
<img
part="button-icon"
src={props.customIconSrc}
class={
'duration-200 transition' +
(props.isBotOpened
? ' scale-0 opacity-0'
: ' scale-100 opacity-100') +
(isSvgSrc(props.customIconSrc)
class={clsx(
'duration-200 transition',
props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100',
isSvgSrc(props.customIconSrc)
? props.size === 'large'
? ' w-9 h-9'
: ' w-7 h-7'
: ' w-[90%] h-[90%]') +
(isSvgSrc(props.customIconSrc) ? '' : ' object-cover rounded-full')
}
? 'w-9 h-9'
: 'w-7 h-7'
: 'w-[90%] h-[90%]',
isSvgSrc(props.customIconSrc) ? '' : 'object-cover rounded-full'
)}
alt="Bubble button icon"
/>
</Show>
<Show when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
<span
class={
'text-4xl duration-200 transition' +
(props.isBotOpened ? ' scale-0 opacity-0' : ' scale-100 opacity-100')
}
class={clsx(
'text-4xl duration-200 transition',
props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
)}
style={{
'font-family':
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
@@ -92,13 +91,13 @@ export const BubbleButton = (props: Props) => (
? defaultDarkIconColor
: defaultLightIconColor),
}}
class={
`absolute duration-200 transition ` +
(props.isBotOpened
class={clsx(
'absolute duration-200 transition',
props.isBotOpened
? 'scale-100 rotate-0 opacity-100'
: 'scale-0 -rotate-180 opacity-0') +
(props.size === 'large' ? ' w-9' : ' w-7')
}
: 'scale-0 -rotate-180 opacity-0',
props.size === 'large' ? ' w-9' : ' w-7'
)}
>
<path
fill-rule="evenodd"
@@ -113,33 +112,31 @@ export const BubbleButton = (props: Props) => (
<img
part="button-icon"
src={props.customCloseIconSrc}
class={
'duration-200 transition' +
(props.isBotOpened
class={clsx(
'absolute duration-200 transition',
props.isBotOpened
? 'scale-100 rotate-0 opacity-100'
: 'scale-0 -rotate-180 opacity-0') +
(isSvgSrc(props.customCloseIconSrc)
: 'scale-0 -rotate-180 opacity-0',
isSvgSrc(props.customCloseIconSrc)
? props.size === 'large'
? ' w-9 h-9'
: ' w-7 h-7'
: ' w-[90%] h-[90%]') +
(isSvgSrc(props.customCloseIconSrc)
? ''
: ' object-cover rounded-full')
}
alt="Bubble button clost icon"
? 'w-9 h-9'
: 'w-7 h-7'
: 'w-[90%] h-[90%]',
isSvgSrc(props.customCloseIconSrc) ? '' : 'object-cover rounded-full'
)}
alt="Bubble button close icon"
/>
</Show>
<Show
when={props.customCloseIconSrc && !isImageSrc(props.customCloseIconSrc)}
>
<span
class={
'text-4xl duration-200 transition' +
(props.isBotOpened
class={clsx(
'absolute text-4xl duration-200 transition',
props.isBotOpened
? 'scale-100 rotate-0 opacity-100'
: 'scale-0 -rotate-180 opacity-0')
}
: 'scale-0 -rotate-180 opacity-0'
)}
style={{
'font-family':
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",