VSinerva/freesewing
1
0
Fork 0
Code Activity

shared component for views that have patterns and side menus

Browse source
This commit is contained in:
Enoch Riese 2023-06-23 17:45:50 -05:00
parent 22bb896bc2
commit 6c94afe99f
18 changed files with 221 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

25
sites/shared/components/workbench/menus/shared/menu-wrapper.mjs
View file

@ -1,11 +1,11 @@
import { useContext, useState, useEffect, useCallback } from 'react'
import { ModalContext } from 'shared/context/modal-context.mjs'
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
import { CloseIcon } from 'shared/components/icons.mjs'
import { CloseIcon, WrenchIcon } from 'shared/components/icons.mjs'
import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
export const MenuWrapper = ({ Icon, children, childProps }) => {
const { setModal, clearModal, setModalProps, modalContent } = useContext(ModalContext)
export const MenuWrapper = ({ children }) => {
const { setModal, clearModal, modalContent } = useContext(ModalContext)
const [modalOpen, setModalOpen] = useState(false)
const Modal = useCallback(
@ -17,7 +17,7 @@ export const MenuWrapper = ({ Icon, children, childProps }) => {
return (
<ModalWrapper slideFrom="right" keepOpenOnClick keepOpenOnSwipe>
{children(props)}
{children}
<button
className="btn btn-primary btn-circle sticky bottom-2 float-right"
onClick={closeModal}
@ -33,8 +33,8 @@ export const MenuWrapper = ({ Icon, children, childProps }) => {
useEffect(() => {
if (!modalOpen) return
setModal(Modal, childProps)
}, [childProps, modalOpen, Modal])
setModal(Modal)
}, [modalOpen, Modal])
useEffect(() => {
if (modalContent === null) setModalOpen(false)
@ -46,11 +46,14 @@ export const MenuWrapper = ({ Icon, children, childProps }) => {
return (
<>
<div className="hidden lg:block">{children(childProps)}</div>
<div className="lg:hidden">
<button className={`btn btn-primary btn-circle fixed right-2 bottom-16`} onClick={onClick}>
<Icon />{' '}
</button>
<button
className={`btn btn-primary btn-circle sticky m-4 bottom-16 self-end lg:hidden`}
onClick={onClick}
>
<WrenchIcon />{' '}
</button>
<div className="hidden lg:block w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll">
{children}
</div>
</>
)

29
sites/shared/components/workbench/views/cut/index.mjs
View file

@ -2,6 +2,7 @@ import { useEffect, useCallback } from 'react'
import { useTranslation } from 'next-i18next'
import { CutMenu, ns as menuNs } from './menu.mjs'
import { MovablePattern } from 'shared/components/workbench/pattern/movable/index.mjs'
import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
import { IconWrapper } from 'shared/components/icons.mjs'
import {
activeMaterialPath,
@ -11,7 +12,7 @@ import {
useMaterialLength,
} from './hooks'
export const ns = [...menuNs]
export const ns = [...menuNs, ...wrapperNs]
const SheetIcon = (props) => (
<IconWrapper {...props}>
@ -44,6 +45,7 @@ export const CutView = ({
account,
DynamicDocs,
Design,
setSettings,
}) => {
const { t } = useTranslation(['workbench', 'plugin'])
@ -64,15 +66,22 @@ export const CutView = ({
}, [materialSettings, materialList, setActiveMaterial])
return (
<div>
<div className="flex flex-row">
<div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
<div className="flex justify-between items-baseline">
<PatternWithMenu
{...{
settings,
ui,
update,
control: account.control,
setSettings,
title: (
<div className="px-2 flex flex-wrap justify-between items-baseline">
<h2 className="capitalize">
{t('layoutThing', { thing: design }) + ' ' + t('forCutting')}
</h2>
<MaterialCounter settings={settings} renderProps={renderProps} />
</div>
),
pattern: (
<div className="my-4">
{materialList.length > 1 ? (
<div className="tabs">
@ -99,8 +108,8 @@ export const CutView = ({
}}
/>
</div>
</div>
<div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
),
menu: (
<CutMenu
{...{
design,
@ -115,8 +124,8 @@ export const CutView = ({
materialSettings,
}}
/>
</div>
</div>
</div>
),
}}
/>
)
}

2
sites/shared/components/workbench/views/cut/menu.mjs
View file

@ -19,7 +19,7 @@ const CutActions = ({ update, ui, materialSettings }) => {
const resetLayout = () => update.ui(['layouts', 'cut', materialSettings.activeMaterial])
return (
<div className="mt-2 mb-4">
<div>
<div className="flex justify-evenly flex-col lg:flex-row">
<ShowButtonsToggle update={update} ui={ui} />
<button className="btn btn-primary btn-outline" onClick={resetLayout}>

67
sites/shared/components/workbench/views/draft/index.mjs
View file

@ -1,9 +1,8 @@
import { PanZoomPattern as ShowPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
import { DraftMenu, ns as menuNs } from './menu.mjs'
import { ViewHeader, ns as headerNs } from 'shared/components/workbench/views/view-header.mjs'
import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
export const ns = [menuNs, ...headerNs]
export const ns = [...menuNs, ...wrapperNs]
export const DraftView = ({
design,
@ -34,39 +33,33 @@ export const DraftView = ({
}
return (
<PanZoomContextProvider>
<div className="flex flex-col">
<ViewHeader
{...{
settings,
ui,
update,
control: account.control,
setSettings,
}}
/>
<div className="flex flex-row">
<div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">{output}</div>
<div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
<DraftMenu
{...{
design,
pattern,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
renderProps,
view,
setView,
}}
/>
</div>
</div>
</div>
</PanZoomContextProvider>
<PatternWithMenu
{...{
settings,
ui,
update,
control: account.control,
pattern: output,
setSettings,
menu: (
<DraftMenu
{...{
design,
pattern,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
renderProps,
view,
setView,
}}
/>
),
}}
/>
)
}

66
sites/shared/components/workbench/views/draft/menu.mjs
View file

@ -7,46 +7,38 @@ 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 { MenuWrapper } from 'shared/components/workbench/menus/shared/menu-wrapper.mjs'
import { WrenchIcon } from 'shared/components/icons.mjs'
export const ns = [...coreMenuNs, ...designMenuNs, ...uiNs]
export const DraftMenu = (props) => {
return (
<MenuWrapper Icon={WrenchIcon} childProps={props}>
{({
design,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
view,
setView,
}) => {
const control = account.control
const menuProps = {
design,
patternConfig,
settings,
update,
language,
account,
DynamicDocs,
control,
}
export const DraftMenu = ({
design,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
view,
setView,
}) => {
const control = account.control
const menuProps = {
design,
patternConfig,
settings,
update,
language,
account,
DynamicDocs,
control,
}
return (
<nav className="grow mb-12">
<DesignOptions {...menuProps} />
<CoreSettings {...menuProps} />
<UiSettings {...menuProps} {...{ ui, view, setView }} />
</nav>
)
}}
</MenuWrapper>
return (
<nav>
<DesignOptions {...menuProps} />
<CoreSettings {...menuProps} />
<UiSettings {...menuProps} {...{ ui, view, setView }} />
</nav>
)
}

69
sites/shared/components/workbench/views/inspect/index.mjs
View file

@ -2,16 +2,16 @@ import { useState } from 'react'
import { InspectorPattern } from './inspector/pattern.mjs'
import { DraftMenu, ns as menuNs } from './menu.mjs'
import { objUpdate } from 'shared/utils.mjs'
import { ViewHeader } from '../view-header.mjs'
import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
export const ns = menuNs
export const ns = [...menuNs, ...wrapperNs]
export const InspectView = ({
design,
pattern,
patternConfig,
settings,
setSettings,
ui,
update,
language,
@ -67,39 +67,34 @@ export const InspectView = ({
}
return (
<PanZoomContextProvider>
<div className="flex flex-col">
<ViewHeader
{...{
settings,
ui,
update,
control: account.control,
}}
/>
<div className="flex flex-row">
<div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">{output}</div>
<div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
<DraftMenu
{...{
design,
pattern,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
inspector,
renderProps,
view,
setView,
}}
/>
</div>
</div>
</div>
</PanZoomContextProvider>
<PatternWithMenu
{...{
settings,
ui,
update,
control: account.control,
setSettings,
pattern: output,
menu: (
<DraftMenu
{...{
design,
pattern,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
inspector,
renderProps,
view,
setView,
}}
/>
),
}}
/>
)
}

2
sites/shared/components/workbench/views/inspect/inspector/menu.mjs
View file

@ -123,7 +123,7 @@ const StackFinder = ({ renderProps, inspector, t }) => {
<select
className="select select-bordered w-full"
onChange={findPath}
defaultvalue="__title"
defaultValue="__title"
>
<option disabled value="__title">
Paths

2
sites/shared/components/workbench/views/inspect/menu.mjs
View file

@ -38,7 +38,7 @@ export const DraftMenu = ({
}
return (
<nav className="grow mb-12">
<nav>
<Inspector {...menuProps} {...{ ui, inspector, renderProps }} />
<DesignOptions {...menuProps} />
<CoreSettings {...menuProps} />

37
sites/shared/components/workbench/views/pattern-with-menu.mjs Normal file
View file

@ -0,0 +1,37 @@
import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
import { ViewHeader, ns as headerNs } from './view-header.mjs'
import { MenuWrapper } from 'shared/components/workbench/menus/shared/menu-wrapper.mjs'
export const ns = headerNs
export const PatternWithMenu = ({
settings,
ui,
update,
control,
title,
pattern,
menu,
setSettings,
}) => (
<PanZoomContextProvider>
<div className="flex flex-col h-full">
<ViewHeader
{...{
settings,
ui,
update,
control,
setSettings,
}}
/>
<div className="flex flex-col lg:flex-row grow max-h-[90vh] lg:my-4">
<div className="lg:w-2/3 flex flex-col h-full grow px-4">
{title}
{pattern}
</div>
{menu && <MenuWrapper>{menu}</MenuWrapper>}
</div>
</div>
</PanZoomContextProvider>
)

31
sites/shared/components/workbench/views/print/index.mjs
View file

@ -12,9 +12,10 @@ import { defaultPrintSettings, printSettingsPath } from './config.mjs'
import { PrintIcon, RightIcon } from 'shared/components/icons.mjs'
import { LoadingContext } from 'shared/context/loading-context.mjs'
import { useToast } from 'shared/hooks/use-toast.mjs'
import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
const viewNs = ['print', ...exportNs]
export const ns = [...viewNs, ...menuNs]
export const ns = [...viewNs, ...menuNs, ...wrapperNs]
const PageCounter = ({ pattern }) => {
const pages = pattern.setStores[0].get('pages', {})
@ -40,6 +41,7 @@ export const PrintView = ({
pattern,
patternConfig,
settings,
setSettings,
ui,
update,
language,
@ -85,15 +87,22 @@ export const PrintView = ({
}
return (
<div>
<div className="flex flex-row">
<div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
<div className="flex justify-between items-baseline">
<h2 className="capitalize">
<PatternWithMenu
{...{
settings,
ui,
update,
control: account.control,
setSettings,
title: (
<div className="flex lg:justify-between items-baseline flex-wrap px-2">
<h2 className="text-center lg:text-left capitalize">
{t('layoutThing', { thing: design }) + ' ' + t('forPrinting')}
</h2>
<PageCounter pattern={pattern} />
</div>
),
pattern: (
<MovablePattern
{...{
renderProps,
@ -103,8 +112,8 @@ export const PrintView = ({
showButtons: !ui.hideMovableButtons,
}}
/>
</div>
<div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
),
menu: (
<PrintMenu
{...{
design,
@ -119,8 +128,8 @@ export const PrintView = ({
exportIt,
}}
/>
</div>
</div>
</div>
),
}}
/>
)
}

2
sites/shared/components/workbench/views/print/menu.mjs
View file

@ -34,7 +34,7 @@ export const PrintMenu = ({
control,
}
return (
<nav className="grow mb-12">
<nav>
<PrintActions {...menuProps} ui={ui} exportIt={exportIt} />
<PrintSettings {...menuProps} ui={ui} />
<DesignOptions {...menuProps} isFirst={false} />

67
sites/shared/components/workbench/views/test/index.mjs
View file

@ -1,10 +1,9 @@
import { useTranslation } from 'next-i18next'
import { PanZoomPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
import { TestMenu, ns as menuNs } from './menu.mjs'
import { ViewHeader } from '../view-header.mjs'
import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
export const ns = menuNs
export const ns = [...menuNs, wrapperNs]
export const TestView = ({
design,
@ -14,6 +13,7 @@ export const TestView = ({
update,
language,
account,
setSettings,
DynamicDocs,
}) => {
const { t } = useTranslation(ns)
@ -26,39 +26,32 @@ export const TestView = ({
const title = t('testThing', { design, thing: t(settings.sample?.[settings.sample.type]) })
return (
<PanZoomContextProvider>
<div className="flex flex-col">
<ViewHeader
{...{
settings,
ui,
update,
control: account.control,
}}
/>
<div className="flex flex-row ml-0 lg:ml-10">
<div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
<h2 className="capitalize">{title}</h2>
<PanZoomPattern {...{ renderProps }} />
</div>
<div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
<TestMenu
{...{
design,
pattern,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
renderProps,
}}
/>
</div>
</div>
</div>
</PanZoomContextProvider>
<PatternWithMenu
{...{
settings,
ui,
update,
control: account.control,
setSettings,
title: <h2 className="px-2 capitalize">{title}</h2>,
pattern: <PanZoomPattern {...{ renderProps }} />,
menu: (
<TestMenu
{...{
design,
pattern,
patternConfig,
settings,
ui,
update,
language,
account,
DynamicDocs,
renderProps,
}}
/>
),
}}
/>
)
}

2
sites/shared/components/workbench/views/test/menu.mjs
View file

@ -24,7 +24,7 @@ export const TestMenu = ({
}
return (
<nav className="grow mb-12">
<nav>
<TestOptions {...menuProps} />
<TestMeasurements {...menuProps} />
</nav>

2
sites/shared/components/workbench/views/test/options.mjs
View file

@ -21,7 +21,7 @@ export const SampleItem = ({ name, passProps, t, updateFunc }) => {
return (
<div
className={`collapse my-2 shadow border-solid border-l-[6px] min-h-10 rounded-none
className={`collapse my-2 shadow border-solid border-l-[6px] min-h-10 rounded-none w-full
${checked ? openClasses : closedClasses}`}
>
<input

11
sites/shared/components/workbench/views/view-header.mjs
View file

@ -77,17 +77,8 @@ export const ViewHeader = ({ update, settings, ui, control, setSettings }) => {
const { t } = useTranslation(ns)
return (
<div
className={`flex sticky top-0 z-20 lg:${shownHeaderSelector}top-24 transition-[top] duration-300 ease-in-out drawer`}
className={`hidden lg:flex sticky top-0 z-20 lg:${shownHeaderSelector}top-24 transition-[top] duration-300 ease-in-out drawer`}
>
<label htmlFor="view-header" className="btn btn-primary btn-circle m-2 swap">
<input type="checkbox" id="view-header" />
<span className="swap-off">
<WrenchIcon />
</span>
<span className="swap-on">
<CloseIcon />
</span>
</label>
<div className="hidden lg:flex flex-row flex-wrap gap-4 py-4 pt-4 w-full bg-neutral text-neutral-content items-center justify-center">
<ZoomButtons t={t} />
<Spacer />

2
sites/shared/components/wrappers/modal.mjs
View file

@ -67,7 +67,7 @@ export const ModalWrapper = ({
children
) : (
<div
className={`bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg max-h-full overflow-auto`}
className={`bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg max-h-full overflow-auto grow`}
>
{children}
</div>

4
sites/shared/components/wrappers/page.mjs
View file

@ -33,7 +33,7 @@ export const PageWrapper = (props) => {
/*
* Contexts
*/
const { modalContent, modalProps } = useContext(ModalContext)
const { modalContent } = useContext(ModalContext)
const { setNavigation, slug } = useContext(NavigationContext)
/*
@ -94,7 +94,7 @@ export const PageWrapper = (props) => {
<LayoutWrapper {...childProps}>
{Layout ? <Layout {...childProps}>{children}</Layout> : children}
</LayoutWrapper>
{typeof modalContent === 'function' ? modalContent(modalProps) : modalContent}
{typeof modalContent === 'function' ? modalContent() : modalContent}
</div>
</SwipeWrapper>
)

11
sites/shared/context/modal-context.mjs
View file

@ -7,7 +7,6 @@ export const ModalContextProvider = ({ children }) => {
__setModal({
...__modal,
modalContent: null,
modalProps: {},
})
}
@ -15,23 +14,13 @@ export const ModalContextProvider = ({ children }) => {
__setModal({
...__modal,
modalContent: content,
modalProps: props,
})
}
function setModalProps(props = {}) {
__setModal({
...__modal,
modalProps: props,
})
}
const [__modal, __setModal] = useState({
setModal,
clearModal,
setModalProps,
modalContent: null,
modalProps: {},
})
return <ModalContext.Provider value={__modal}>{children}</ModalContext.Provider>