blsmedia/bot
2
0
Fork 0
Code Issues Activity

🐛 Use position fixed for bubble

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-21 14:29:53 +01:00
parent ab43d809c3
commit 527dc8a5b1
9 changed files with 115 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx
View File

@@ -56,7 +56,6 @@ export const ChoiceForm = (props: Props) => {
? ''
: 'selectable')
}
data-testid="button"
data-itemid={item.id}
>
{item.content}

1
packages/js/src/features/blocks/inputs/payment/components/PaymentForm.tsx
View File

@@ -14,7 +14,6 @@ export const PaymentForm = (props: Props) => (
<Switch>
<Match when={props.options.provider === PaymentProvider.STRIPE}>
<StripePaymentForm
// eslint-disable-next-line solid/reactivity
onSuccess={props.onSuccess}
options={props.options}
context={props.context}

3
packages/js/src/features/bubble/components/Bubble.tsx
View File

@@ -125,9 +125,10 @@ export const Bubble = (props: BubbleProps) => {
transform: isBotOpened() ? 'scale3d(1, 1, 1)' : 'scale3d(0, 0, 1)',
'box-shadow': 'rgb(0 0 0 / 16%) 0px 5px 40px',
'background-color': bubbleProps.theme?.chatWindow?.backgroundColor,
'z-index': 42424242,
}}
class={
'absolute bottom-20 sm:right-4 rounded-lg w-full sm:w-[400px] max-h-[704px] ' +
'fixed bottom-20 sm:right-4 rounded-lg w-full sm:w-[400px] max-h-[704px] ' +
(isBotOpened() ? 'opacity-1' : 'opacity-0 pointer-events-none')
}
>

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

@@ -15,10 +15,11 @@ export const BubbleButton = (props: Props) => {
<button
onClick={() => props.toggleBot()}
class={
'absolute bottom-4 right-4 shadow-md w-12 h-12 rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in'
'fixed bottom-4 right-4 shadow-md w-12 h-12 rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in'
}
style={{
'background-color': props.backgroundColor ?? defaultButtonColor,
'z-index': 42424242,
}}
>
<Show when={isNotDefined(props.customIconSrc)} keyed>

6
packages/js/src/features/bubble/components/PreviewMessage.tsx
View File

@@ -19,13 +19,13 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
return (
<div
// eslint-disable-next-line solid/reactivity
onClick={props.onClick}
class="absolute bottom-20 right-4 w-64 rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
onClick={() => props.onClick()}
class="fixed bottom-20 right-4 w-64 rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
style={{
'background-color':
props.previewMessageTheme?.backgroundColor ?? defaultBackgroundColor,
color: props.previewMessageTheme?.textColor ?? defaultTextColor,
'z-index': 42424242,
}}
onMouseEnter={() => setIsPreviewMessageHovered(true)}
onMouseLeave={() => setIsPreviewMessageHovered(false)}