blsmedia/bot
2
0
Fork 0
Code Activity

💄 Improve picture choice description UI

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-06-01 10:29:02 +02:00
parent 537b9fe6ce
commit b6e5002a56
8 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
View File

@ -120,14 +120,17 @@ export const MultiplePictureChoice = (props: Props) => {
'flex gap-3 py-2 flex-shrink-0' +
(isEmpty(item.title) && isEmpty(item.description)
? ' justify-center'
: ' pl-4')
: ' px-3')
}
>
<Checkbox
isChecked={selectedItemIds().some(
(selectedItemId) => selectedItemId === item.id
)}
class={item.title || item.description ? 'mt-1' : undefined}
class={
'flex-shrink-0' +
(item.title || item.description ? ' mt-1' : undefined)
}
/>
<Show when={item.title || item.description}>
<div class="flex flex-col gap-1 ">
@ -135,7 +138,9 @@ export const MultiplePictureChoice = (props: Props) => {
<span class="font-semibold">{item.title}</span>
</Show>
<Show when={item.description}>
<span class="text-sm">{item.description}</span>
<span class="text-sm whitespace-pre-wrap text-left">
{item.description}
</span>
</Show>
</div>
</Show>
@ -186,9 +191,10 @@ export const MultiplePictureChoice = (props: Props) => {
(selectedItemId) => selectedItemId === selectedItem.id
)}
class={
selectedItem.title || selectedItem.description
? 'mt-1'
: undefined
'flex-shrink-0' +
(selectedItem.title || selectedItem.description
? ' mt-1'
: undefined)
}
/>
<Show when={selectedItem.title || selectedItem.description}>
@ -197,7 +203,9 @@ export const MultiplePictureChoice = (props: Props) => {
<span class="font-semibold">{selectedItem.title}</span>
</Show>
<Show when={selectedItem.description}>
<span class="text-sm">{selectedItem.description}</span>
<span class="text-sm whitespace-pre-wrap text-left">
{selectedItem.description}
</span>
</Show>
</div>
</Show>

6
packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
View File

@ -69,7 +69,7 @@ export const SinglePictureChoice = (props: Props) => {
on:click={handleClick(index())}
data-itemid={item.id}
class={
'flex flex-col typebot-picture-button focus:outline-none filter hover:brightness-90 active:brightness-75 justify-between ' +
'flex flex-col typebot-picture-button focus:outline-none filter hover:brightness-90 active:brightness-75 justify-between ' +
(isSvgSrc(item.pictureSrc) ? 'has-svg' : '')
}
>
@ -87,7 +87,9 @@ export const SinglePictureChoice = (props: Props) => {
}
>
<span class="font-semibold">{item.title}</span>
<span class="text-sm">{item.description}</span>
<span class="text-sm whitespace-pre-wrap text-left">
{item.description}
</span>
</div>
</button>
)}