diff --git a/packages/react/components/Editor/components/HeaderMenu.mjs b/packages/react/components/Editor/components/HeaderMenu.mjs index e8a931f36ca..49f59b3d3f9 100644 --- a/packages/react/components/Editor/components/HeaderMenu.mjs +++ b/packages/react/components/Editor/components/HeaderMenu.mjs @@ -3,6 +3,7 @@ import { missingMeasurements, flattenFlags } from '../lib/index.mjs' // Hooks import React, { useState, useEffect } from 'react' import { useBackend } from '@freesewing/react/hooks/useBackend' +import { useAccount } from '@freesewing/react/hooks/useAccount' import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation' // Components import { Null } from '@freesewing/react/components/Null' @@ -69,7 +70,7 @@ export const HeaderMenuDraftView = (props) => { return ( <> -
+
@@ -265,24 +266,31 @@ export const HeaderMenuDraftViewFlags = (props) => { export const HeaderMenuDraftViewIcons = (props) => { const { update, state } = props const { settings = {} } = state // Guard against undefined settings + const { account } = useAccount() // we need to know the user's preferred units + const accountUnits = account.imperial ? 'imperial' : 'metric' const Button = HeaderMenuButton const size = 'tw:w-5 tw:h-5' - const muted = 'tw:text-current tw:opacity-50' const ux = state.ui.ux const levels = { ...props.config.uxLevels.core, ...props.config.uxLevels.ui, } + // Visual indication between default and non-default settings + const style = { + dflt: 'tw:text-current tw:opacity-50', + custom: 'tw:text-accent', + } + return ( -
+
{ux >= levels.sa ? ( ) : null} {ux >= levels.units ? ( @@ -294,7 +302,7 @@ export const HeaderMenuDraftViewIcons = (props) => { tooltip="Switches Units between metric and imperial (see Core Settings)" > ) : null} @@ -304,9 +312,7 @@ export const HeaderMenuDraftViewIcons = (props) => { updateHandler={() => update.settings('paperless', settings.paperless ? 0 : 1)} tooltip="Turns Paperless on or off (see Core Settings)" > - + ) : null} {ux >= levels.complete ? ( @@ -318,7 +324,7 @@ export const HeaderMenuDraftViewIcons = (props) => { tooltip="Turns Details on or off (see Core Settings)" > ) : null} @@ -331,7 +337,7 @@ export const HeaderMenuDraftViewIcons = (props) => { tooltip="Turns Expand on or off (see Core Settings)" > ) : null} @@ -342,7 +348,7 @@ export const HeaderMenuDraftViewIcons = (props) => { updateHandler={() => update.ui('aside', state.ui.aside ? 0 : 1)} tooltip="Toggles the side menu (see UI Preferences)" > - + ) : null} {ux >= levels.renderer ? ( @@ -354,7 +360,7 @@ export const HeaderMenuDraftViewIcons = (props) => { tooltip="Switches the Render Engine between React and SVG (see UI Preferences)" > ) : null} @@ -369,7 +375,7 @@ export const HeaderMenuUndoIcons = (props) => { const undos = state._?.undos && state._.undos.length > 0 ? state._.undos : false return ( -
+
@@ -689,11 +695,6 @@ const headerMenus = { test: HeaderMenuTestView, layout: HeaderMenuLayoutView, timing: HeaderMenuDraftView, - //HeaderMenuDraftViewDesignOptions, - //HeaderMenuDraftViewCoreSettings, - //HeaderMenuDraftViewUiPreferences, - //HeaderMenuDraftViewFlags, - //HeaderMenuDraftViewIcons, } export const HeaderMenu = ({ config, Design, pattern, state, update, strings }) => { @@ -713,7 +714,7 @@ export const HeaderMenu = ({ config, Design, pattern, state, update, strings }) } tw:transition-[top] tw:duration-300 tw:ease-in-out`} >
diff --git a/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs b/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs index 4c457cf0441..0324ef0fa7c 100644 --- a/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs +++ b/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs @@ -1,4 +1,5 @@ import React from 'react' +import { useAccount } from '@freesewing/react/hooks/useAccount' import { menuCoreSettingsOnlyHandler, menuCoreSettingsSaboolHandler, @@ -32,11 +33,13 @@ import { SettingsIcon } from '@freesewing/react/components/Icon' */ export const CoreSettingsMenu = ({ Design, state, i18n, update }) => { const { settings = {} } = state // Guard against undefined settings + const { account } = useAccount() // We need to know the user's preferred units const structure = menuCoreSettingsStructure({ units: settings.units, sabool: settings.sabool, parts: Design.patternConfig.draftOrder, + accountUnits: account.imperial ? 'imperial' : 'metric', }) const inputs = { diff --git a/packages/react/components/Editor/index.mjs b/packages/react/components/Editor/index.mjs index 9a5390c3aaa..f7029d2142f 100644 --- a/packages/react/components/Editor/index.mjs +++ b/packages/react/components/Editor/index.mjs @@ -122,6 +122,15 @@ export const Editor = ({ // object stored in account.control in localStorage instead of an integer const ux = Number.isInteger(account.control) ? account.control : 3 + /* + * Ensure we respect the units in the user's account + * But only if not units are set + */ + if (!state.settings?.units && account.imperial) { + if (passDownState.settings) passDownState.settings.units = 'imperial' + else passDownState.settings = { units: 'imperial' } + } + if (state.ui?.ux === undefined) { passDownState.ui = { ...(state.ui || {}), ux: ux } } diff --git a/packages/react/components/Editor/lib/core-settings.mjs b/packages/react/components/Editor/lib/core-settings.mjs index ab1b4a548f1..349f996c362 100644 --- a/packages/react/components/Editor/lib/core-settings.mjs +++ b/packages/react/components/Editor/lib/core-settings.mjs @@ -67,7 +67,12 @@ const CoreDocsLink = ({ item }) => ( ) -export function menuCoreSettingsStructure({ units = 'metric', sabool = false, parts = [] }) { +export function menuCoreSettingsStructure({ + units = 'metric', + sabool = false, + parts = [], + accountUnits = 'metric', +}) { return { sabool: { dense: true, @@ -118,7 +123,7 @@ export function menuCoreSettingsStructure({ units = 'metric', sabool = false, pa ), ux: config.uxLevels.core.units, list: ['metric', 'imperial'], - dflt: 'metric', + dflt: accountUnits, choiceTitles: { metric: 'Metric Units (cm)', imperial: 'Imperial Units (inch)',