diff --git a/sites/shared/components/collapse.mjs b/sites/shared/components/collapse.mjs index bcadfdcb75c..fdf5d6dd8b3 100644 --- a/sites/shared/components/collapse.mjs +++ b/sites/shared/components/collapse.mjs @@ -12,7 +12,7 @@ const OpenTitleButton = ({
{label} + console.log('in button', label, onClick) return onClick ? (
diff --git a/sites/shared/components/workbench/index.mjs b/sites/shared/components/workbench/index.mjs index ec3a5c603dc..f45c36f0b66 100644 --- a/sites/shared/components/workbench/index.mjs +++ b/sites/shared/components/workbench/index.mjs @@ -38,6 +38,7 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) = // Effect useEffect(() => { // Force re-render when baseSettings changes. Required when they are loaded async. + console.log('in effect') setSettings({ ...baseSettings, embed: true }) }, [baseSettings]) @@ -54,11 +55,11 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) = if (error) return ( <> - + {error} ) - console.log(baseSettings) + // Deal with each view const viewProps = { account, @@ -102,7 +103,7 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) = return ( <> - + {viewContent} ) diff --git a/sites/shared/components/workbench/menus/core-settings/config.mjs b/sites/shared/components/workbench/menus/core-settings/config.mjs index 7998263f73a..928535bfcad 100644 --- a/sites/shared/components/workbench/menus/core-settings/config.mjs +++ b/sites/shared/components/workbench/menus/core-settings/config.mjs @@ -111,18 +111,4 @@ export const loadSettingsConfig = ({ step: 1, emoji: '🔲', }, - renderer: { - control: 4, // Show when control > 3 - list: ['react', 'svg'], - choiceTitles: { - react: 'renderWithReact', - svg: 'renderWithCore', - }, - valueTitles: { - react: 'React', - svg: 'SVG', - }, - dflt: 'react', - emoji: '🚀', - }, }) diff --git a/sites/shared/components/workbench/menus/core-settings/core-settings.en.yaml b/sites/shared/components/workbench/menus/core-settings/core-settings.en.yaml index efb9285b3cd..9a273a0d36d 100644 --- a/sites/shared/components/workbench/menus/core-settings/core-settings.en.yaml +++ b/sites/shared/components/workbench/menus/core-settings/core-settings.en.yaml @@ -19,12 +19,6 @@ margin.t: Margin margin.d: Controls the margin around pattern parts scale.t: Scale scale.d: Controls the overall line width, font size, and other elements that do not scale with the pattern's measurements -renderer.t: Render Engine -renderer.d: Controls how the pattern is rendered (drawn) on the screen -renderWithReact.t: Render with FreeSewing's React components -renderWithReact.d: Render as SVG through our React components. Allows interactivity and is optimized for screen. Use this if you are not sure what to pick. -renderWithCore.t: Render with Freesewing's Core library -renderWithCore.d: Render directly to SVG from Core. Allows no interactivity and is optimized for print. Use this if you want to know what it will look like when exported. de.t: German de.d: Use this to generate a German pattern en.t: English diff --git a/sites/shared/components/workbench/menus/core-settings/index.mjs b/sites/shared/components/workbench/menus/core-settings/index.mjs index 65fc99e180e..8e85544d2c8 100644 --- a/sites/shared/components/workbench/menus/core-settings/index.mjs +++ b/sites/shared/components/workbench/menus/core-settings/index.mjs @@ -62,7 +62,7 @@ const inputs = { units: UnitsSettingInput, } -const CoreTitle = ({ name, t, changed, current = null, open = false, emoji = '' }) => ( +export const CoreTitle = ({ name, t, changed, current = null, open = false, emoji = '' }) => (
@@ -94,6 +94,7 @@ export const Setting = ({ settingsConfig, changed, loadDocs, + control, }) => { const drillProps = { name, config, current, update, t, units, changed } @@ -144,6 +145,36 @@ export const Setting = ({ const titleProps = { name, t, current: , emoji: config.emoji } + const boolSettings = ['sabool', 'paperless', 'details'] + + if (control > 4) { + // Save gurus some clicks + if (boolSettings.includes(name)) + return ( + } + onClick={() => update.settings([name], current ? 0 : 1)} + /> + ) + if (name === 'units') + return ( + } + onClick={() => update.settings([name], current === 'metric' ? 'imperial' : 'metric')} + /> + ) + if (name === 'renderer') + return ( + } + onClick={() => update.ui([name], current === 'svg' ? 'react' : 'svg')} + /> + ) + } + return ( ( { +export const ListSetting = ({ name, list, config, current, update, t, setUi }) => { if (typeof current === 'undefined') current = config.dflt const [value, setValue] = useState(current) @@ -12,7 +12,8 @@ export const ListSetting = ({ name, list, config, current, update, t }) => { const handleChange = (newCurrent) => { if (newCurrent === config.dflt) reset() else { - update.settings([name], newCurrent) + if (setUi) update.ui(setUi, newCurrent) + else update.settings([name], newCurrent) setValue(newCurrent) } } @@ -139,7 +140,6 @@ export const UnitsSettingInputs = ({ name, config, current, update, t }) => ( export const MarginSettingInput = (props) => export const ScaleSettingInput = (props) => -export const RendererSettingInput = (props) => export const CompleteSettingInput = (props) => export const PaperlessSettingInput = (props) => diff --git a/sites/shared/components/workbench/menus/core-settings/values.mjs b/sites/shared/components/workbench/menus/core-settings/values.mjs index fbe948ec427..ee4252c1684 100644 --- a/sites/shared/components/workbench/menus/core-settings/values.mjs +++ b/sites/shared/components/workbench/menus/core-settings/values.mjs @@ -5,7 +5,6 @@ const ListValue = ({ current, t, config, changed }) => ? t(`core-settings:${config.valueTitles[current]}`) : t(`core-settings:${config.valueTitles[config.dflt]}`) -export const RendererSettingValue = ListValue export const LocaleSettingValue = ListValue export const CompleteSettingValue = ListValue export const PaperlessSettingValue = ListValue diff --git a/sites/shared/components/workbench/menus/xray/attributes.mjs b/sites/shared/components/workbench/menus/ui-settings/attributes.mjs similarity index 100% rename from sites/shared/components/workbench/menus/xray/attributes.mjs rename to sites/shared/components/workbench/menus/ui-settings/attributes.mjs diff --git a/sites/shared/components/workbench/menus/ui-settings/config.mjs b/sites/shared/components/workbench/menus/ui-settings/config.mjs new file mode 100644 index 00000000000..15100b15f59 --- /dev/null +++ b/sites/shared/components/workbench/menus/ui-settings/config.mjs @@ -0,0 +1,36 @@ +export const loadSettingsConfig = () => ({ + control: { + control: 1, // Show when control > 0 + list: ['1', '2', '3', '4', '5'], + choiceTitles: { + 1: 'renderWithReact', + 2: 'renderWithCore', + 3: 'renderWithCore', + 4: 'renderWithCore', + 5: 'renderWithCore', + }, + valueTitles: { + 1: 'renderWithReact', + 2: 'renderWithCore', + 3: 'renderWithCore', + 4: 'renderWithCore', + 5: 'renderWithCore', + }, + dflt: '2', + emoji: '🖥️', + }, + renderer: { + control: 4, // Show when control > 3 + list: ['react', 'svg'], + choiceTitles: { + react: 'renderWithReact', + svg: 'renderWithCore', + }, + valueTitles: { + react: 'React', + svg: 'SVG', + }, + dflt: 'react', + emoji: '🚀', + }, +}) diff --git a/sites/shared/components/workbench/menus/ui-settings/index.mjs b/sites/shared/components/workbench/menus/ui-settings/index.mjs new file mode 100644 index 00000000000..de2e3282805 --- /dev/null +++ b/sites/shared/components/workbench/menus/ui-settings/index.mjs @@ -0,0 +1,210 @@ +import { XrayIcon } from 'shared/components/icons.mjs' +//import { ConsoleLog } from './log.mjs' +//import { XrayReset } from './reset.mjs' +//import { XrayList } from './list.mjs' +import { useTranslation } from 'next-i18next' +import { Popout } from 'shared/components/popout.mjs' +//Dependencies +import { loadSettingsConfig } from './config.mjs' +// Components +import { Collapse } from 'shared/components/collapse.mjs' +import { HelpIcon } from 'shared/components/icons.mjs' +import { ControlSettingInput, RendererSettingInput, XRaySettingInput } from './inputs.mjs' +import { ControlSettingValue, RendererSettingValue, XRaySettingValue } from './values.mjs' + +export const ns = ['ui-settings'] + +// Facilitate lookup of the value component +const values = { + control: ControlSettingValue, + renderer: RendererSettingValue, + xray: XRaySettingValue, +} + +// Facilitate lookup of the input component +const inputs = { + control: ControlSettingInput, + renderer: RendererSettingInput, + xray: XRaySettingInput, +} + +const wasChanged = (current, name, settingsConfig) => { + if (typeof current === 'undefined') return false + if (current === settingsConfig[name].dflt) return false + + return true +} + +export const UiTitle = ({ name, t, changed, current = null, open = false, emoji = '' }) => ( +
+ + + {emoji} + + {t(`ui-settings:${name}.t`)} + {open ? ':' : ''} + + {current} +
+) + +export const Setting = ({ + name, + config, + current, + update, + t, + settingsConfig, + changed, + loadDocs, + control, + ui, +}) => { + const drillProps = { name, config, current, update, t, changed, control } + + // Don't bother with X-Ray in SVG mode + if (name === 'xray' && ui.renderer === 'svg') return null + + const Input = inputs[name] + const Value = values[name] + + const buttons = [] + const openButtons = [] + if (loadDocs) + openButtons.push( + + ) + if (changed) { + buttons.push( + + ) + openButtons.push( + + ) + } + + const titleProps = { name, t, current: , emoji: config.emoji } + + const boolSettings = ['sabool', 'paperless', 'details'] + + if (control > 4) { + // Save gurus some clicks + if (name === 'renderer') + return ( + } + onClick={() => (current === 'svg' ? update.ui([name]) : update.ui([name], 'svg'))} + /> + ) + } + + return ( + } + title={} + buttons={buttons} + openButtons={openButtons} + > + + + ) +} + +export const UiSettings = ({ + design, + update, + settings, + ui, + account, + control, + language, + DynamicDocs, +}) => { + const { t } = useTranslation(ns) + + const settingsConfig = loadSettingsConfig() + + const loadDocs = DynamicDocs + ? (evt, setting = false) => { + evt.stopPropagation() + let path = `site/draft/ui-settings` + if (setting) path += `/${setting}` + setModal( + +
+ +
+ + ) + } + : false + + const openButtons = [] + if (loadDocs) + openButtons.push( + + ) + + const toggleXray = () => update.ui(['xray', 'enabled'], ui?.xray?.enabled ? false : true) + + return ( + <> +
+ {control > 4 ? ( +
+ ) : ( + <> +
+ + {t('ui-settings:uiSettings')} +
+

{t('ui-settings:uiSettings.d')}

+ + )} +
+ {Object.keys(settingsConfig) + .filter((name) => settingsConfig[name].control <= control) + .map((name) => ( + + ))} + + ) +} diff --git a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs new file mode 100644 index 00000000000..d48d6270a23 --- /dev/null +++ b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs @@ -0,0 +1,59 @@ +import { useState } from 'react' +import { ChoiceButton } from 'shared/components/choice-button.mjs' +import { ControlSettings } from 'shared/components/account/control.mjs' + +// Shared input for list inputs +export const ListSetting = ({ name, list, config, current, update, t }) => { + if (typeof current === 'undefined') current = config.dflt + + const [value, setValue] = useState(current) + + const handleChange = (newCurrent) => { + if (newCurrent === config.dflt) reset() + else { + update.ui([name], newCurrent) + setValue(newCurrent) + } + } + + const reset = () => { + update.ui([name]) + setValue(config.dflt) + } + + return ( + <> +

{t(`ui-settings:${name}.d`)}

+ {config.list.map((entry) => ( + handleChange(entry)} + > + {t(`ui-settings:${config.choiceTitles[entry]}.d`)} + + ))} + + ) +} + +export const ControlSettingInput = ({ t, name }) => ( + <> +

{t(`ui-settings:${name}.d`)}

+ + +) + +export const RendererSettingInput = ({ name, config, current, update, t }) => ( + ({ + key, + title: key, + }))} + /> +) + +export const XRaySettingInput = (props) => diff --git a/sites/shared/components/workbench/menus/xray/list.mjs b/sites/shared/components/workbench/menus/ui-settings/list.mjs similarity index 100% rename from sites/shared/components/workbench/menus/xray/list.mjs rename to sites/shared/components/workbench/menus/ui-settings/list.mjs diff --git a/sites/shared/components/workbench/menus/xray/log.mjs b/sites/shared/components/workbench/menus/ui-settings/log.mjs similarity index 100% rename from sites/shared/components/workbench/menus/xray/log.mjs rename to sites/shared/components/workbench/menus/ui-settings/log.mjs diff --git a/sites/shared/components/workbench/menus/xray/path-ops.mjs b/sites/shared/components/workbench/menus/ui-settings/path-ops.mjs similarity index 100% rename from sites/shared/components/workbench/menus/xray/path-ops.mjs rename to sites/shared/components/workbench/menus/ui-settings/path-ops.mjs diff --git a/sites/shared/components/workbench/menus/xray/path.mjs b/sites/shared/components/workbench/menus/ui-settings/path.mjs similarity index 100% rename from sites/shared/components/workbench/menus/xray/path.mjs rename to sites/shared/components/workbench/menus/ui-settings/path.mjs diff --git a/sites/shared/components/workbench/menus/xray/point.mjs b/sites/shared/components/workbench/menus/ui-settings/point.mjs similarity index 100% rename from sites/shared/components/workbench/menus/xray/point.mjs rename to sites/shared/components/workbench/menus/ui-settings/point.mjs diff --git a/sites/shared/components/workbench/menus/xray/reset.mjs b/sites/shared/components/workbench/menus/ui-settings/reset.mjs similarity index 100% rename from sites/shared/components/workbench/menus/xray/reset.mjs rename to sites/shared/components/workbench/menus/ui-settings/reset.mjs diff --git a/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml b/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml new file mode 100644 index 00000000000..f5c80c53824 --- /dev/null +++ b/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml @@ -0,0 +1,11 @@ +uiSettings.t: UI Preferences +uiSettings.d: These preferences control the UI (User Interface) aspects of our online pattern drafting environment. +renderer.t: Render Engine +renderer.d: Controls how the pattern is rendered (drawn) on the screen +renderWithReact.t: Render with FreeSewing's React components +renderWithReact.d: Render as SVG through our React components. Allows interactivity and is optimized for screen. Use this if you are not sure what to pick. +renderWithCore.t: Render with Freesewing's Core library +renderWithCore.d: Render directly to SVG from Core. Allows no interactivity and is optimized for print. Use this if you want to know what it will look like when exported. +control.t: User Experience +control.d: Which user experience do you prefer? Please note that this is an account setting, so it will impact the entire website. + diff --git a/sites/shared/components/workbench/menus/ui-settings/values.mjs b/sites/shared/components/workbench/menus/ui-settings/values.mjs new file mode 100644 index 00000000000..931d900223c --- /dev/null +++ b/sites/shared/components/workbench/menus/ui-settings/values.mjs @@ -0,0 +1,10 @@ +import { Difficulty } from 'shared/components/designs/difficulty.mjs' + +const ListValue = ({ current, t, config, changed }) => + changed + ? t(`ui-settings:${config.valueTitles[current]}`) + : t(`ui-settings:${config.valueTitles[config.dflt]}`) + +export const RendererSettingValue = ListValue +export const XRaysValue = ListValue +export const ControlSettingValue = ({ control }) => diff --git a/sites/shared/components/workbench/menus/xray/xray.en.yaml b/sites/shared/components/workbench/menus/ui-settings/xray.en.yaml similarity index 100% rename from sites/shared/components/workbench/menus/xray/xray.en.yaml rename to sites/shared/components/workbench/menus/ui-settings/xray.en.yaml diff --git a/sites/shared/components/workbench/menus/xray/index.mjs b/sites/shared/components/workbench/menus/xray/index.mjs deleted file mode 100644 index 40cef62d02b..00000000000 --- a/sites/shared/components/workbench/menus/xray/index.mjs +++ /dev/null @@ -1,35 +0,0 @@ -import { XrayIcon } from 'shared/components/icons.mjs' -//import { ConsoleLog } from './log.mjs' -//import { XrayReset } from './reset.mjs' -//import { XrayList } from './list.mjs' -import { useTranslation } from 'next-i18next' -import { Popout } from 'shared/components/popout.mjs' - -export const ns = ['xray'] - -export const XrayMenu = ({ design, update, settings, ui, account, control }) => { - const { t } = useTranslation(ns) - - if (ui.renderer !== 'react' || control < 4) return null - - const toggleXray = () => update.ui(['xray', 'enabled'], ui?.xray?.enabled ? false : true) - - return ( - <> -
- {control > 4 ? ( -
- ) : ( - <> -
- - {t('xray:xrayPattern')} -
-

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

- - )} -
- Implement X-Ray - - ) -} diff --git a/sites/shared/components/workbench/pattern/index.mjs b/sites/shared/components/workbench/pattern/index.mjs index e882f1df999..e16843b701d 100644 --- a/sites/shared/components/workbench/pattern/index.mjs +++ b/sites/shared/components/workbench/pattern/index.mjs @@ -5,7 +5,7 @@ export const Pattern = ({ pattern, setView, settings, ui, update }) => { // Render as SVG return ui.renderer === 'svg' ? ( -
+
) : ( ) diff --git a/sites/shared/components/workbench/views/draft/menu.mjs b/sites/shared/components/workbench/views/draft/menu.mjs index 3802f839392..46fe53ed2ed 100644 --- a/sites/shared/components/workbench/views/draft/menu.mjs +++ b/sites/shared/components/workbench/views/draft/menu.mjs @@ -6,9 +6,9 @@ import { CoreSettings, ns as coreMenuNs, } from 'shared/components/workbench/menus/core-settings/index.mjs' -import { XrayMenu, ns as xrayNs } from 'shared/components/workbench/menus/xray/index.mjs' +import { UiSettings, ns as uiNs } from 'shared/components/workbench/menus/ui-settings/index.mjs' -export const ns = [...coreMenuNs, ...designMenuNs, ...xrayNs] +export const ns = [...coreMenuNs, ...designMenuNs, ...uiNs] export const DraftMenu = ({ design, @@ -38,7 +38,7 @@ export const DraftMenu = ({ ) } diff --git a/sites/shared/components/workbench/workbench.en.yaml b/sites/shared/components/workbench/workbench.en.yaml index 58f9916b237..c6dc7943105 100644 --- a/sites/shared/components/workbench/workbench.en.yaml +++ b/sites/shared/components/workbench/workbench.en.yaml @@ -6,7 +6,7 @@ cutLayout: Cut Layout save: Save export: Export edit: Edit -clear: Clear +reset: Reset help: Help name: Name width: Width @@ -20,4 +20,3 @@ showOnlyThisPart: Show only this pattern part partInfo: Pattern part info pathInfo: Path info part: Pattern part -control: Experience