diff --git a/sites/shared/components/icons.mjs b/sites/shared/components/icons.mjs index 97387a0f622..915140af86e 100644 --- a/sites/shared/components/icons.mjs +++ b/sites/shared/components/icons.mjs @@ -163,6 +163,16 @@ export const DesktopIcon = (props) => ( ) +export const DetailIcon = (props) => ( + + + + +) + export const DiscordIcon = (props) => ( @@ -306,8 +316,12 @@ export const LinkIcon = (props) => ( ) export const MeasureIcon = (props) => ( - - + + + ) @@ -385,6 +399,16 @@ export const PageSizeIcon = (props) => ( ) +export const PaperlessIcon = (props) => ( + + + + +) + export const PluginIcon = (props) => ( @@ -415,12 +439,25 @@ export const RightIcon = (props) => ( ) +export const RocketIcon = (props) => ( + + + +) + export const RssIcon = (props) => ( ) +export const SaIcon = (props) => ( + + + + +) + export const SearchIcon = (props) => ( diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs index ae24ae46718..b725f1eb180 100644 --- a/sites/shared/components/workbench/header.mjs +++ b/sites/shared/components/workbench/header.mjs @@ -60,7 +60,7 @@ const NavIcons = ({ setModal, setView, setDense, dense, view }) => { <> setDense(!dense)} - label={t('workbench:collapse')} + label={t('workbench:viewMenu')} extraClasses="text-success bg-neutral hover:bg-success hover:text-neutral" > {dense ? ( @@ -71,14 +71,14 @@ const NavIcons = ({ setModal, setView, setDense, dense, view }) => { setView('draft')} - label={t('workbench:draft')} + label={t('workbench:draftPattern')} active={view === 'draft'} > setView('test')} - label={t('workbench:test')} + label={t('workbench:testPattern')} active={view === 'test'} > @@ -99,40 +99,40 @@ const NavIcons = ({ setModal, setView, setDense, dense, view }) => { setView('save')} - label={t('workbench:save')} + label={t('workbench:savePattern')} active={view === 'save'} > setView('export')} - label={t('workbench:export')} + label={t('workbench:exportPattern')} active={view === 'export'} > setView('edit')} - label={t('workbench:edit')} + label={t('workbench:editSettings')} active={view === 'edit'} > setView('logs')} - label={t('workbench:logs')} + label={t('workbench:patternLogs')} active={view === 'logs'} > setView('inspect')} - label={t('workbench:inspector')} + label={t('workbench:patternInspector')} active={view === 'inspect'} > - + diff --git a/sites/shared/components/workbench/index.mjs b/sites/shared/components/workbench/index.mjs index 67c771125c1..e50c2f26505 100644 --- a/sites/shared/components/workbench/index.mjs +++ b/sites/shared/components/workbench/index.mjs @@ -3,6 +3,7 @@ import { useEffect, useState } from 'react' import { useTranslation } from 'next-i18next' import { useView } from 'shared/hooks/use-view.mjs' import { useAccount } from 'shared/hooks/use-account.mjs' +import { useControlState } from 'shared/components/account/control.mjs' // Dependencies import { pluginTheme } from '@freesewing/plugin-theme' import { pluginI18n } from '@freesewing/plugin-i18n' @@ -20,6 +21,7 @@ import { EditView, ns as editNs } from './views/edit/index.mjs' import { TestView, ns as testNs } from 'shared/components/workbench/views/test/index.mjs' import { ExportView, ns as exportNs } from 'shared/components/workbench/views/exporting/index.mjs' import { LogView, ns as logNs } from 'shared/components/workbench/views/logs/index.mjs' +import { InspectView, ns as inspectNs } from 'shared/components/workbench/views/inspect/index.mjs' export const ns = [ 'account', @@ -46,15 +48,17 @@ const views = { edit: EditView, test: TestView, logs: LogView, + inspect: InspectView, } -const draftViews = ['draft'] +const draftViews = ['draft', 'inspect'] export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) => { // Hooks const { t, i18n } = useTranslation(ns) const { language } = i18n const { account } = useAccount() + const controlState = useControlState() // State const [view, setView] = useView() @@ -72,6 +76,17 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) = const update = { settings: (path, val) => setSettings(objUpdate({ ...settings }, path, val)), ui: (path, val) => setUi(objUpdate({ ...ui }, path, val)), + toggleSa: () => { + if (settings.sabool) { + const mm = settings.sa + setSettings(objUpdate({ ...settings }, ['sabool'], 0)) + setSettings(objUpdate({ ...settings }, ['sa'], 0)) + } else { + setSettings(objUpdate({ ...settings }, ['sabool'], 1)) + setSettings(objUpdate({ ...settings }, ['sa'], settings.samm)) + } + }, + setControl: controlState.update, } // Don't bother without a Design diff --git a/sites/shared/components/workbench/menus/ui-settings/config.mjs b/sites/shared/components/workbench/menus/ui-settings/config.mjs index dfc74d38362..4f71cc2612d 100644 --- a/sites/shared/components/workbench/menus/ui-settings/config.mjs +++ b/sites/shared/components/workbench/menus/ui-settings/config.mjs @@ -20,44 +20,6 @@ export const loadSettingsConfig = (settings, view) => { dflt: 'react', emoji: '🚀', }, - inspect: settings.renderer !== 'svg' && { - control: 4, // Show when control > 3 - list: [0, 1], - choiceTitles: { - 0: 'inspectNo', - 1: 'inspectYes', - }, - valueTitles: { - 0: 'no', - 1: 'yes', - }, - dflt: 0, - emoji: '🔬', - }, - view: { - control: 3, - list: ['draft', 'test', 'print', 'cut', 'save', 'export', 'logs'], - dflt: view, - emoji: '👀', - choiceTitles: { - draft: 'draft', - test: 'test', - print: 'print', - cut: 'cut', - save: 'save', - export: 'export', - logs: 'logs', - }, - valueTitles: { - draft: 'draft', - test: 'test', - print: 'print', - cut: 'cut', - save: 'save', - export: 'export', - logs: 'logs', - }, - }, } uiSettings.control.list.forEach( diff --git a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs index db140f87b7b..7492e7040f0 100644 --- a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs +++ b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs @@ -15,20 +15,7 @@ export const ControlSettingInput = (props) => { ) } -const ViewInput = (props) => { - props.config.dflt = props.view - return ( - props.setView(newVal)} - current={props.view} - /> - ) -} - export const inputs = { renderer: ListInput, - inspect: BoolInput, control: ControlSettingInput, - view: ViewInput, } diff --git a/sites/shared/components/workbench/menus/ui-settings/values.mjs b/sites/shared/components/workbench/menus/ui-settings/values.mjs index a519f038b3a..1cdc672cd14 100644 --- a/sites/shared/components/workbench/menus/ui-settings/values.mjs +++ b/sites/shared/components/workbench/menus/ui-settings/values.mjs @@ -3,7 +3,5 @@ import { ListValue } from '../shared/values.mjs' export const values = { renderer: ListValue, - inspect: ListValue, control: ({ control }) => , - view: ListValue, } diff --git a/sites/shared/components/workbench/views/draft/index.mjs b/sites/shared/components/workbench/views/draft/index.mjs index bc4e5169de8..8ae8df1de96 100644 --- a/sites/shared/components/workbench/views/draft/index.mjs +++ b/sites/shared/components/workbench/views/draft/index.mjs @@ -1,11 +1,87 @@ import { useState } from 'react' import { PanZoomPattern as ShowPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs' -import { InspectorPattern } from './inspector/pattern.mjs' import { DraftMenu, ns as menuNs } from './menu.mjs' import { objUpdate } from 'shared/utils.mjs' +import { + SettingsIcon, + PaperlessIcon, + SaIcon, + DesktopIcon, + RocketIcon, + BulletIcon, + MeasureIcon, + DetailIcon, +} from 'shared/components/icons.mjs' export const ns = menuNs +const IconButton = ({ Icon, onClick, dflt = true }) => ( + +) + +const Spacer = () => | + +export const DraftViewHeader = ({ update, settings, ui, control }) => { + return ( +
+
+ update.toggleSa()} + /> + update.settings(['paperless'], !settings.paperless)} + /> + + update.settings( + ['complete'], + typeof settings.complete === 'undefined' ? 0 : settings.complete ? 0 : 1 + ) + } + /> + + } + dflt={settings.units !== 'imperial'} + onClick={() => + update.settings(['units'], settings.units === 'imperial' ? 'metric' : 'imperial') + } + /> +
+ +
+ {[1, 2, 3, 4, 5].map((score) => ( + + ))} +
+ +
+ update.ui(['renderer'], ui.renderer === 'react' ? 'svg' : 'react')} + /> +
+
+ ) +} + export const DraftView = ({ design, pattern, @@ -19,38 +95,6 @@ export const DraftView = ({ setView, view, }) => { - // State for inspector - const [inspect, setInspect] = useState({ - show: {}, - reveal: {}, - }) - - const inspector = { - show: (data) => { - const newInspect = { ...inspect } - newInspect.show[data.id] = data - setInspect(newInspect) - }, - hide: (id) => { - const newInspect = { ...inspect } - delete newInspect.show[id] - delete newInspect.reveal[id] - setInspect(newInspect) - }, - reveal: (id) => { - const newInspect = { ...inspect } - if (newInspect.reveal[id]) delete newInspect.reveal[id] - else newInspect.reveal[id] = 1 - setInspect(newInspect) - }, - update: (path, val) => { - const newInspect = objUpdate({ ...inspect }, path, val) - setInspect(newInspect) - }, - data: inspect, - pattern: pattern, - } - let output = null let renderProps = false if (ui.renderer === 'svg') { @@ -62,34 +106,39 @@ export const DraftView = ({ } } else { renderProps = pattern.getRenderProps() - output = ui.inspect ? ( - - ) : ( - - ) + output = } return ( -
-
{output}
-
- +
+ +
+
{output}
+
+ +
) diff --git a/sites/shared/components/workbench/views/draft/menu.mjs b/sites/shared/components/workbench/views/draft/menu.mjs index e0bcf8292e3..482c0f15ce1 100644 --- a/sites/shared/components/workbench/views/draft/menu.mjs +++ b/sites/shared/components/workbench/views/draft/menu.mjs @@ -7,9 +7,8 @@ import { ns as coreMenuNs, } from 'shared/components/workbench/menus/core-settings/index.mjs' import { UiSettings, ns as uiNs } from 'shared/components/workbench/menus/ui-settings/index.mjs' -import { Inspector, ns as inspectorNs } from './inspector/menu.mjs' -export const ns = [...coreMenuNs, ...designMenuNs, ...uiNs, inspectorNs] +export const ns = [...coreMenuNs, ...designMenuNs, ...uiNs] export const DraftMenu = ({ design, @@ -20,7 +19,6 @@ export const DraftMenu = ({ language, account, DynamicDocs, - inspector = false, renderProps, view, setView, @@ -39,7 +37,6 @@ export const DraftMenu = ({ return (