2
0

Add icon picker (#496)

Closes #495
This commit is contained in:
Baptiste Arnaud
2023-05-11 10:32:33 -04:00
committed by GitHub
parent 36bec36775
commit 9abc50dce5
1404 changed files with 1587 additions and 30 deletions

View File

@ -6,7 +6,7 @@ import {
import { For, Show, createSignal, onMount } from 'solid-js'
import { Checkbox } from '../buttons/components/Checkbox'
import { SendButton } from '@/components'
import { isDefined, isEmpty } from '@typebot.io/lib'
import { isDefined, isEmpty, isSvgSrc } from '@typebot.io/lib'
import { SearchInput } from '@/components/inputs/SearchInput'
import { isMobile } from '@/utils/isMobileSignal'
@ -103,7 +103,8 @@ export const MultiplePictureChoice = (props: Props) => {
(selectedItemId) => selectedItemId === item.id
)
? ' selected'
: '')
: '') +
(isSvgSrc(item.pictureSrc) ? ' has-svg' : '')
}
data-itemid={item.id}
>
@ -112,6 +113,7 @@ export const MultiplePictureChoice = (props: Props) => {
alt={item.title ?? `Picture ${index() + 1}`}
elementtiming={`Picture choice ${index() + 1}`}
fetchpriority={'high'}
class="m-auto"
/>
<div
class={

View File

@ -1,6 +1,7 @@
import { SearchInput } from '@/components/inputs/SearchInput'
import { InputSubmitContent } from '@/types'
import { isMobile } from '@/utils/isMobileSignal'
import { isSvgSrc } from '@typebot.io/lib/utils'
import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
import { For, Show, createSignal, onMount } from 'solid-js'
@ -67,13 +68,17 @@ export const SinglePictureChoice = (props: Props) => {
// eslint-disable-next-line solid/reactivity
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"
class={
'flex flex-col typebot-picture-button focus:outline-none filter hover:brightness-90 active:brightness-75 justify-between ' +
(isSvgSrc(item.pictureSrc) ? 'has-svg' : '')
}
>
<img
src={item.pictureSrc}
alt={item.title ?? `Picture ${index() + 1}`}
elementtiming={`Picture choice ${index() + 1}`}
fetchpriority={'high'}
class="m-auto"
/>
<div
class={