diff --git a/sites/shared/components/workbench/menus/core-settings/config.mjs b/sites/shared/components/workbench/menus/core-settings/config.mjs index 31dedd5fe73..3e3540b2558 100644 --- a/sites/shared/components/workbench/menus/core-settings/config.mjs +++ b/sites/shared/components/workbench/menus/core-settings/config.mjs @@ -99,6 +99,7 @@ export const loadSettingsConfig = ({ only: { control: 4, // Show when control > 3 dflt: false, + list: parts, parts, emoji: '🛍️', }, diff --git a/sites/shared/components/workbench/menus/core-settings/index.mjs b/sites/shared/components/workbench/menus/core-settings/index.mjs index 31963dc4162..08d99b9b374 100644 --- a/sites/shared/components/workbench/menus/core-settings/index.mjs +++ b/sites/shared/components/workbench/menus/core-settings/index.mjs @@ -82,28 +82,28 @@ export const CoreSettings = ({ sabool: settings.sabool, parts: patternConfig.draftOrder, }) - // Default control level is 2 (in case people are not logged in) - const control = account.control || 5 + + const control = account.control return ( `site/draft/core-settings${setting ? `/${setting}` : ''}`, + Icon: SettingsIcon, + inputs, + language, + name: 'coreSettings', + ns, passProps: { samm: typeof settings.samm === 'undefined' ? defaultSamm(settings.units) : settings.samm, units: settings.units, }, - language, - DynamicDocs, - getDocsPath: (setting) => `site/draft/core-settings${setting ? `/${setting}` : ''}`, + updateFunc: update.settings, + values, }} /> ) diff --git a/sites/shared/components/workbench/menus/core-settings/inputs.mjs b/sites/shared/components/workbench/menus/core-settings/inputs.mjs index 7e4fb993092..28316306a5d 100644 --- a/sites/shared/components/workbench/menus/core-settings/inputs.mjs +++ b/sites/shared/components/workbench/menus/core-settings/inputs.mjs @@ -12,46 +12,26 @@ export const PaperlessSettingInput = ListInput export const MarginSettingInput = MmInput export const ScaleSettingInput = SliderInput -export const OnlySettingInput = ({ name, config, current, updateFunc, t, draftOrder, design }) => { - const partNames = config.parts.map((part) => ({ - id: part, - t: t(`${design}:${part}.t`), - d: t(`${design}:${part}.d`), - })) +export const OnlySettingInput = (props) => { + props.config.choiceTitles = {} + props.config.list.forEach((p) => (props.config.choiceTitles[p] = p)) - const togglePart = (part) => { - const parts = current || [] - const newParts = new Set(parts) - if (newParts.has(part)) newParts.delete(part) - else newParts.add(part) - if (newParts.size < 1) reset() - else updateFunc(['only'], [...newParts]) - } + const onlyUpdateFunc = useCallback( + (path, part) => { + if (part === undefined) return props.updateFunc(path, part) - const reset = () => { - updateFunc(['only']) - } + let newParts = new Set(props.current || []) + if (newParts.has(part)) newParts.delete(part) + else newParts.add(part) + if (newParts.size < 1) newParts = undefined + else newParts = [...newParts] - return ( - <> -

{t(`core-settings:only.d`)}

- {orderBy(partNames, ['name'], ['asc']).map((part) => { - const included = Array.isArray(current) ? (current.includes(part.id) ? true : false) : true - - return ( - togglePart(part.id)} - > - {part.d} - - ) - })} - + props.updateFunc(path, newParts) + }, + [props.updateFunc, props.current] ) + + return } export const SaMmSettingInput = (props) => { diff --git a/sites/shared/components/workbench/menus/core-settings/values.mjs b/sites/shared/components/workbench/menus/core-settings/values.mjs index 5f0e4ca9099..2cb358b0f44 100644 --- a/sites/shared/components/workbench/menus/core-settings/values.mjs +++ b/sites/shared/components/workbench/menus/core-settings/values.mjs @@ -1,4 +1,4 @@ -import { ListValue, MmValue, PlainValue, HighlightedValue } from '../shared/values' +import { ListValue, MmValue, PlainValue } from '../shared/values' export const RendererSettingValue = ListValue export const LocaleSettingValue = ListValue @@ -10,11 +10,14 @@ export const UnitsSettingValue = ListValue export const MarginSettingValue = MmValue export const SaMmSettingValue = MmValue -export const ScaleSettingValue = PlainValue +export const ScaleSettingValue = ({ current, config, changed }) => ( + +) export const OnlySettingValue = ({ current, config }) => ( - - {' '} - {current ? current.length : config.parts.length}{' '} - + ) diff --git a/sites/shared/components/workbench/menus/design-options/index.mjs b/sites/shared/components/workbench/menus/design-options/index.mjs index 5b7d09972e8..93369151e25 100644 --- a/sites/shared/components/workbench/menus/design-options/index.mjs +++ b/sites/shared/components/workbench/menus/design-options/index.mjs @@ -39,7 +39,7 @@ const inputs = { count: SliderInput, deg: DegInput, list: ListInput, - mm: MmInput, + mm: () => FIXME: Mm options are deprecated. Please report this , pct: PctInput, } @@ -68,7 +68,7 @@ export const DesignOption = ({ current, config, settings, - update, + updateFunc, t, loadDocs, changed = false, @@ -81,30 +81,13 @@ export const DesignOption = ({ // Hide option? if (config?.hide || (typeof config?.hide === 'function' && config.hide(settings))) return null - if (type === 'bool') { - config = { - ...config, - list: [0, 1], - choiceTitles: { - 0: `${name}No`, - 1: `${name}Yes`, - }, - valueTitles: { - 0: 'no', - 1: 'yes', - }, - dflt: config.dflt ? 1 : 0, - } - } - return ( ( - - } - openTitle={t(group)} - > - {Object.entries(options).map(([option, type]) => - typeof type === 'string' ? ( - - ) : ( - - ) - )} - -) - export const DesignOptions = ({ design, patternConfig, @@ -183,31 +119,19 @@ export const DesignOptions = ({ return ( update.settings(['options', name], value), }} - > - - + /> ) } diff --git a/sites/shared/components/workbench/menus/design-options/values.mjs b/sites/shared/components/workbench/menus/design-options/values.mjs index e2eb181dd38..dc17e961bae 100644 --- a/sites/shared/components/workbench/menus/design-options/values.mjs +++ b/sites/shared/components/workbench/menus/design-options/values.mjs @@ -1,7 +1,7 @@ import { formatMm, formatPercentage } from 'shared/utils.mjs' import { ListValue, HighlightedValue, PlainValue } from '../shared/values' export const PctOptionValue = ({ name, config, current, settings, changed }) => { - const val = typeof current === 'undefined' ? config.pct / 100 : current + const val = changed ? current : config.pct / 100 return ( @@ -23,7 +23,7 @@ export const BoolOptionValue = ({ name, config, current, t, changed }) => ( ) export const CountOptionValue = ({ config, current, changed }) => ( - + ) export const ListOptionValue = ({ name, config, current, t, changed }) => { diff --git a/sites/shared/components/workbench/menus/shared/index.mjs b/sites/shared/components/workbench/menus/shared/index.mjs index 45094a0adc2..9cae192add1 100644 --- a/sites/shared/components/workbench/menus/shared/index.mjs +++ b/sites/shared/components/workbench/menus/shared/index.mjs @@ -1,6 +1,6 @@ import { useContext } from 'react' import { Collapse } from 'shared/components/collapse.mjs' -import { MenuItem, wasChanged } from './menu-item.mjs' +import { MenuItemGroup, wasChanged } from './menu-item.mjs' import { useTranslation } from 'next-i18next' import { HelpIcon } from 'shared/components/icons.mjs' import { ModalWrapper } from 'shared/components/wrappers/modal.mjs' @@ -25,7 +25,6 @@ export const useDocsLoader = (DynamicDocs, getDocsPath, language) => { export const WorkbenchMenu = ({ updateFunc, - updatePath = [], ns, Icon, name, @@ -38,6 +37,8 @@ export const WorkbenchMenu = ({ DynamicDocs = false, getDocsPath = () => {}, language, + emojis, + Item, children, }) => { const { t, i18n } = useTranslation(ns) @@ -69,29 +70,24 @@ export const WorkbenchMenu = ({ openTitle={t(`${name}.t`)} openButtons={openButtons} > -

{t('core-settings:coreSettings.d')}

- {children || - Object.keys(config) - .filter((name) => config[name].control <= control) - .map((name) => ( - - ))} + {children || ( + + )} ) } diff --git a/sites/shared/components/workbench/menus/shared/inputs.mjs b/sites/shared/components/workbench/menus/shared/inputs.mjs index f724ecb4718..21b19cbe7be 100644 --- a/sites/shared/components/workbench/menus/shared/inputs.mjs +++ b/sites/shared/components/workbench/menus/shared/inputs.mjs @@ -29,17 +29,17 @@ const EditCount = (props) => ( ) -const useSharedHandlers = ({ dflt, updateFunc, updatePath, name, setReset }) => { - const reset = useCallback(() => updateFunc([...updatePath, name]), [updatePath, updateFunc, name]) +const useSharedHandlers = ({ dflt, updateFunc, name, setReset }) => { + const reset = useCallback(() => updateFunc(name), [updateFunc, name]) const handleChange = useCallback( (newCurrent) => { if (newCurrent === dflt) reset() else { - updateFunc([...updatePath, name], newCurrent) + updateFunc(name, newCurrent) } }, - [dflt, updateFunc, updatePath, name] + [dflt, updateFunc, name] ) useEffect(() => setReset(() => reset), [reset, setReset]) @@ -47,20 +47,10 @@ const useSharedHandlers = ({ dflt, updateFunc, updatePath, name, setReset }) => return { handleChange, reset } } -export const ListInput = ({ - name, - config, - current, - updateFunc, - updatePath = [], - compact = false, - t, - setReset, -}) => { +export const ListInput = ({ name, config, current, updateFunc, compact = false, t, setReset }) => { const { handleChange, reset, set } = useSharedHandlers({ dflt: config.dflt, updateFunc, - updatePath, name, setReset, }) @@ -86,7 +76,23 @@ export const ListInput = ({ ) } -export const BoolInput = ListInput +export const BoolInput = (props) => { + const boolConfig = { + list: [0, 1], + choiceTitles: { + 0: `${props.name}No`, + 1: `${props.name}Yes`, + }, + valueTitles: { + 0: 'no', + 1: 'yes', + }, + dflt: props.config.dflt ? 1 : 0, + ...props.config, + } + + return +} const EditInputValue = (props) => (
@@ -123,7 +129,6 @@ export const SliderInput = ({ config, current, updateFunc, - updatePath = [], t, override, suffix = '', @@ -136,7 +141,6 @@ export const SliderInput = ({ current, dflt: config.dflt, updateFunc, - updatePath, name, setReset, }) @@ -192,8 +196,7 @@ export const SliderInput = ({ export const PctInput = ({ config, settings, current, updateFunc, type = 'pct', ...rest }) => { const suffix = type === 'deg' ? '°' : '%' const factor = type === 'deg' ? 1 : 100 - const dflt = config[type] - let pctCurrent = typeof current === 'undefined' ? dflt : current * factor + let pctCurrent = typeof current === 'undefined' ? config.dflt : current * factor const valFormatter = (val) => round(val) const pctUpdateFunc = useCallback( @@ -208,7 +211,6 @@ export const PctInput = ({ config, settings, current, updateFunc, type = 'pct', config: { ...config, step: 0.1, - dflt, }, current: pctCurrent, updateFunc: pctUpdateFunc, @@ -217,7 +219,7 @@ export const PctInput = ({ config, settings, current, updateFunc, type = 'pct', }} >
- + {config.toAbs && settings.measurements ? formatMm(config.toAbs(current / factor, settings)) : ' '} @@ -238,6 +240,7 @@ export const MmInput = (props) => { }, [props.updateFunc, props.units] ) + return ( { +export const wasChanged = (current, config) => { if (typeof current === 'undefined') return false - if (current === settingsConfig[name].dflt) return false + if (current === config.dflt) return false return true } @@ -16,18 +16,17 @@ export const ItemTitle = ({ name, t, changed, current = null, open = false, emoj {emoji} {t(`${name}.t`)} - {open ? ':' : ''} {current}
) +const openButtonClass = 'btn btn-xs btn-ghost px-0' export const MenuItem = ({ name, config, current, updateFunc, - updatePath = [], t, passProps = {}, changed, @@ -35,9 +34,10 @@ export const MenuItem = ({ Input, Value, allowOverride = false, + control = Infinity, }) => { const [override, setOverride] = useState(false) - const [reset, setReset] = useState(() => () => updateFunc([...updatePath, name])) + const [reset, setReset] = useState(() => () => updateFunc(name)) const drillProps = useMemo( () => ({ @@ -47,23 +47,20 @@ export const MenuItem = ({ updateFunc, t, changed, - updatePath, override, setReset, ...passProps, }), - [name, config, current, updateFunc, t, changed, updatePath, override, setReset, passProps] + [name, config, current, updateFunc, t, changed, override, setReset, passProps] ) + if (config.control && config.control > control) return null + const buttons = [] const openButtons = [] if (loadDocs) openButtons.push( - ) @@ -71,7 +68,7 @@ export const MenuItem = ({ openButtons.push( ) if (changed) { - buttons.push( + const ResetButton = ({ open }) => ( - ) - openButtons.push( - ) + buttons.push() + openButtons.push() } const titleProps = { name, t, current: , emoji: config.emoji } @@ -124,29 +110,37 @@ export const MenuItem = ({ export const MenuItemGroup = ({ collapsible = true, + control, name, - groupConfig, - currents = {}, - items, + currentValues = {}, + structure, Item = MenuItem, + values = {}, + inputs = {}, loadDocs, - itemProps = {}, + passProps = {}, emojis = {}, + updateFunc, t, }) => { - const content = Object.entries(items).map(([itemName, item]) => { - if (typeof item === 'string') + const content = Object.entries(structure).map(([itemName, item]) => { + if (itemName === 'isMenu' || item === false) return null + if (!item.isMenu) return ( ) @@ -156,43 +150,34 @@ export const MenuItemGroup = ({ key={itemName} {...{ collapsible: true, + control, name: itemName, - groupConfig, - currents, - items: item, + currentValues, + structure: item, Item, + values, + inputs, loadDocs, - itemProps, + passProps, emojis, + updateFunc, t, }} /> ) }) + const titleProps = { + name, + t, + emoji: emojis[name] || emojis.dflt, + } return collapsible ? ( - } - openTitle={ - - } + title={} + openTitle={} > {content} diff --git a/sites/shared/components/workbench/menus/shared/values.mjs b/sites/shared/components/workbench/menus/shared/values.mjs index 2332a261c44..948cb7550b2 100644 --- a/sites/shared/components/workbench/menus/shared/values.mjs +++ b/sites/shared/components/workbench/menus/shared/values.mjs @@ -1,18 +1,23 @@ import { formatMm, formatFraction128 } from 'shared/utils.mjs' export const HighlightedValue = ({ changed, children }) => ( - {children} + {children} ) -export const PlainValue = ({ current, config, changed }) => ( - {changed ? current : config.dflt} +export const PlainValue = ({ current, dflt, changed }) => ( + {changed ? current : dflt} ) -export const ListValue = ({ current, t, config, changed }) => ( - - {changed ? t(`${config.valueTitles[current]}`) : t(`${config.valueTitles[config.dflt]}`)} - -) +export const ListValue = ({ current, t, config, changed }) => { + const val = changed ? current : config.dflt + let key + if (config.valueTitles) key = config.valueTitles[val] + else if (typeof val === 'string') key = val + else if (val) key = 'yes' + else key = 'no' + + return {t(key)} +} export const MmValue = ({ current, t, config, units, changed }) => ( diff --git a/sites/shared/hooks/use-account.mjs b/sites/shared/hooks/use-account.mjs index 80d516d483f..30f460464c2 100644 --- a/sites/shared/hooks/use-account.mjs +++ b/sites/shared/hooks/use-account.mjs @@ -8,9 +8,9 @@ const usePersistedToken = createPersistedState('fs-token') const usePersistedSeenUser = createPersistedState('fs-seen-user') /* - * Make it possible to always check for account.username + * Make it possible to always check for account.username and account.control */ -const noAccount = { username: false } +const noAccount = { username: false, control: 2 } /* * The useAccount hook diff --git a/sites/shared/utils.mjs b/sites/shared/utils.mjs index 34a87e84ea1..a088654785d 100644 --- a/sites/shared/utils.mjs +++ b/sites/shared/utils.mjs @@ -197,8 +197,11 @@ export const optionsMenuStructure = (options) => { // Fixme: One day we should sort this based on the translation for (const option of orderBy(sorted, ['menu', 'name'], ['asc'])) { if (typeof option === 'object') { - if (option.menu) set(menu, `${option.menu}.${option.name}`, optionType(option)) - else if (typeof option.menu === 'undefined') { + option.dflt = option.dflt || option[optionType(option)] + if (option.menu) { + set(menu, `${option.menu}.isMenu`, true) + set(menu, `${option.menu}.${option.name}`, option) + } else if (typeof option.menu === 'undefined') { console.log( `Warning: Option ${option.name} does not have a menu config. ` + 'Either configure it, or set it to false to hide this option.'