diff --git a/packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs b/packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs index 99d2f482ac7..67e1a9c33e9 100644 --- a/packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs +++ b/packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs @@ -35,8 +35,13 @@ import { OptionsIcon } from '@freesewing/react/components/Icon' */ export const DesignOptionsMenu = ({ Design, isFirst = true, state, i18n, update }) => { const structure = useMemo( - () => menuDesignOptionsStructure(Design.patternConfig.options, state.settings), - [Design.patternConfig, state.settings] + () => + menuDesignOptionsStructure( + Design.designConfig.data.id, + Design.patternConfig.options, + state.settings + ), + [Design.designConfig.data.id, Design.patternConfig, state.settings] ) const updateHandler = useCallback( (name, value = '__UNSET__') => update.settings(['options', ...name], value), diff --git a/packages/react/components/Editor/components/menus/Input.mjs b/packages/react/components/Editor/components/menus/Input.mjs index 1ece88e007f..93b40e93b9a 100644 --- a/packages/react/components/Editor/components/menus/Input.mjs +++ b/packages/react/components/Editor/components/menus/Input.mjs @@ -10,9 +10,9 @@ import { capitalize } from '@freesewing/core' /** A boolean version of {@see MenuListInput} that sets up the necessary configuration */ export const MenuBoolInput = (props) => { const { name, config } = props - const boolConfig = useBoolConfig(name, config) + //const boolConfig = useBoolConfig(name, config) - return + return } /** A placeholder for an input to handle constant values */ @@ -136,13 +136,19 @@ export const MenuListInput = ({ onClick={() => handleChange(entry)} >
-
{config.choiceTitles[entry]}
+
{config.choiceTitles[entry]}
{compact || !config.choiceDescriptions ? null : ( -
{config.choiceDescriptions[entry]}
+
+ {config.choiceDescriptions[entry]} +
)}
@@ -390,19 +396,6 @@ const useBoolConfig = (name, config) => { /** an input for the 'only' setting. toggles individual parts*/ export const MenuOnlySettingInput = (props) => { const { config } = props - //config.sideBySide = true - //config.titleMethod = (entry, t) => { - // const chunks = entry.split('.') - // return {entry} //t(`${chunks[0]}:${chunks[1]}`)} - //} - //config.valueMethod = (entry) => ( - // {capitalize(entry.split('.')[0])} - //) - //config.dense = true - // Sort alphabetically - //const order = [] - //order.sort() - console.log(i18n) config.list = config.list.sort() config.choiceTitles = {} for (const part of config.list) { diff --git a/packages/react/components/Editor/lib/design-options.mjs b/packages/react/components/Editor/lib/design-options.mjs index 0726ffb0392..f865615d6b0 100644 --- a/packages/react/components/Editor/lib/design-options.mjs +++ b/packages/react/components/Editor/lib/design-options.mjs @@ -1,20 +1,73 @@ +import React from 'react' import { mergeOptions } from '@freesewing/core' import { designOptionType, set, orderBy } from '@freesewing/utils' +import { i18n } from '@freesewing/collection' +import { linkClasses } from '@freesewing/utils' -export function menuDesignOptionsStructure(options, settings, asFullList = false) { +const DesignDocsLink = ({ design, item }) => ( + + Learn more + +) + +export function menuDesignOptionsStructure(design, options, settings, asFullList = false) { if (!options) return options const sorted = {} for (const [name, option] of Object.entries(options)) { - if (typeof option === 'object') sorted[name] = { ...option, name } + if (typeof option === 'object') { + sorted[name] = { + ...option, + name, + title: i18n[design].en.o[name].t, + about: ( + + {i18n[design].en.o[name].d} + + + ), + dense: true, + sideBySide: true, + } + } } const menu = {} - // Fixme: One day we should sort this based on the translation for (const option of orderBy(sorted, ['order', 'menu', 'name'], ['asc', 'asc', 'asc'])) { if (typeof option === 'object') { const oType = designOptionType(option) option.dflt = option.dflt || option[oType] + // Percentage option tweaks if (oType === 'pct') option.dflt /= 100 + // List option tweaks + else if (oType === 'list') { + option.valueTitles = {} + option.choiceTitles = {} + option.choiceDescriptions = {} + for (const entry of option.list) { + option.choiceTitles[entry] = i18n[design].en.o[`${option.name}.${entry}`].t + option.choiceDescriptions[entry] = i18n[design].en.o[`${option.name}.${entry}`].d + option.valueTitles[entry] = i18n[design].en.o[`${option.name}.${entry}`].t + } + } + // Bool option tweaks + else if (oType === 'bool') { + option.list = [false, true] + option.valueTitles = {} + option.choiceTitles = {} + option.choiceDescriptions = {} + for (const entry of option.list) { + option.choiceTitles.false = i18n[design].en.o[`${option.name}No`].t + option.choiceDescriptions.false = i18n[design].en.o[`${option.name}No`].d + option.valueTitles.false = 'No' + option.choiceTitles.true = i18n[design].en.o[`${option.name}Yes`].t + option.choiceDescriptions.true = i18n[design].en.o[`${option.name}Yes`].d + option.valueTitles.true = 'Yes' + } + } if (typeof option.menu === 'function') option.menu = asFullList ? 'conditional' diff --git a/packages/react/components/Input/index.mjs b/packages/react/components/Input/index.mjs index 8de586e3fa3..62d72d0088c 100644 --- a/packages/react/components/Input/index.mjs +++ b/packages/react/components/Input/index.mjs @@ -98,7 +98,7 @@ export const ButtonFrame = ({ }) => (