VSinerva/freesewing
1
0
Fork 0
Code Activity

fix(shared): Deal with list option inputs

Browse source
This commit is contained in:
joostdecock 2023-05-18 14:06:22 +02:00
parent fc3559a124
commit e986ec33e9
3 changed files with 13 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

8
sites/shared/components/workbench/menus/design-options/index.mjs
View file

@ -67,16 +67,18 @@ const values = {
// Emojis for option groups :) // Emojis for option groups :)
const emojis = { const emojis = {
advanced: '🤓',
fit: '👕', fit: '👕',
style: '💃🏽', style: '💃🏽',
dflt: '🕹️', dflt: '🕹️',
groupDflt: '📁',
} }
const GroupTitle = ({ group, t, open = false }) => ( const GroupTitle = ({ group, t, open = false }) => (
<div className={`flex flex-row gap-1 items-center w-full ${open ? '' : 'justify-between'}`}> <div className={`flex flex-row gap-1 items-center w-full ${open ? '' : 'justify-between'}`}>
<span className="font-medium"> <span className="font-medium">
<span role="img" className="pr-2"> <span role="img" className="pr-2">
{emojis[group] ? emojis[group] : emojis.dflt} {emojis[group] ? emojis[group] : emojis.groupDflt}
</span> </span>
{t(`design-options:${group}.t`)} {t(`design-options:${group}.t`)}
{open ? ':' : ''} {open ? ':' : ''}
@ -138,7 +140,7 @@ export const DesignOption = ({
<HelpIcon className="w-4 h-4" /> <HelpIcon className="w-4 h-4" />
</button>, </button>,
] ]
if (['pct'].includes(type)) if (['pct', 'count'].includes(type))
openButtons.push( openButtons.push(
<button <button
className="btn btn-xs btn-ghost px-0" className="btn btn-xs btn-ghost px-0"
@ -196,7 +198,7 @@ export const DesignOptionGroup = ({
changed={wasChanged(settings.options?.[option], patternConfig.options[option])} changed={wasChanged(settings.options?.[option], patternConfig.options[option])}
/> />
) : ( ) : (
<OptionGroup <DesignOptionGroup
{...{ design, patternConfig, settings, update, Option, t, loadDocs }} {...{ design, patternConfig, settings, update, Option, t, loadDocs }}
group={option} group={option}
options={type} options={type}

29
sites/shared/components/workbench/menus/design-options/inputs.mjs
View file

@ -25,12 +25,11 @@ const EditCount = (props) => (
</div> </div>
) )
export const CountOptionInput = ({ name, config, current, update, t }) => { export const CountOptionInput = ({ name, design, config, current, update, t, override }) => {
const { count, max, min } = config const { count, max, min } = config
if (typeof current === 'undefined') current = count if (typeof current === 'undefined') current = count
const [value, setValue] = useState(current) const [value, setValue] = useState(current)
const [editCount, setEditCount] = useState(false)
const handleChange = (evt) => { const handleChange = (evt) => {
const newCurrent = evt.target.value const newCurrent = evt.target.value
@ -43,10 +42,11 @@ export const CountOptionInput = ({ name, config, current, update, t }) => {
} }
return ( return (
<div className="py-4 mx-6 border-l-2 pl-2"> <>
<p>{t(`${design}:o.${name}.d`)}</p>
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
{editCount ? ( {override ? (
<EditCount {...{ value, handleChange, min, max, setEditCount, t }} /> <EditCount {...{ value, handleChange, min, max, t }} />
) : ( ) : (
<> <>
<span className="opacity-50">{min}</span> <span className="opacity-50">{min}</span>
@ -64,25 +64,10 @@ export const CountOptionInput = ({ name, config, current, update, t }) => {
onChange={handleChange} onChange={handleChange}
className={` className={`
range range-sm mt-1 range range-sm mt-1
${val === count ? 'range-secondary' : 'range-accent'} ${current === count ? 'range-secondary' : 'range-accent'}
`} `}
/> />
<div className="flex flex-row justify-between"> </>
<span></span>
<div>
<button
title={t('editThing', { thing: '#' })}
className={`
btn btn-ghost btn-xs hover:text-secondary-focus
${editCount ? 'text-accent' : 'text-secondary'}
`}
onClick={() => setEditCount(!editCount)}
>
<EditIcon />
</button>
</div>
</div>
</div>
) )
} }

2
sites/shared/components/workbench/menus/design-options/values.mjs
View file

@ -35,7 +35,7 @@ export const CountOptionValue = ({ name, config, current }) =>
) )
export const ListOptionValue = ({ name, config, current, t }) => { export const ListOptionValue = ({ name, config, current, t }) => {
const translate = config.doNotTranslate ? (input) => input : (input) => t(`${option}.o.${input}`) const translate = config.doNotTranslate ? (input) => input : (input) => t(`${name}.o.${input}`)
return config.dflt == current || typeof current === 'undefined' ? ( return config.dflt == current || typeof current === 'undefined' ? (
<span className="text-secondary-focus">{translate(config.dflt)}</span> <span className="text-secondary-focus">{translate(config.dflt)}</span>