shared component for views that have patterns and side menus

sites/shared/components/workbench/menus/shared/menu-wrapper.mjs

@@ -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
+        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>
     </>
   )

sites/shared/components/workbench/views/cut/index.mjs

@@ -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>
+        ),
+      }}
+    />
   )
 }

sites/shared/components/workbench/views/cut/menu.mjs

@@ -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}>

sites/shared/components/workbench/views/draft/index.mjs

@@ -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,20 +33,15 @@ export const DraftView = ({
   }
 
   return (
-    <PanZoomContextProvider>
-      <div className="flex flex-col">
-        <ViewHeader
+    <PatternWithMenu
       {...{
         settings,
         ui,
         update,
         control: account.control,
+        pattern: output,
         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">
+        menu: (
           <DraftMenu
             {...{
               design,
@@ -64,9 +58,8 @@ export const DraftView = ({
               setView,
             }}
           />
-          </div>
-        </div>
-      </div>
-    </PanZoomContextProvider>
+        ),
+      }}
+    />
   )
 }

sites/shared/components/workbench/views/draft/menu.mjs

@@ -7,15 +7,10 @@ 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}>
-      {({
+export const DraftMenu = ({
   design,
   patternConfig,
   settings,
@@ -26,7 +21,7 @@ export const DraftMenu = (props) => {
   DynamicDocs,
   view,
   setView,
-      }) => {
+}) => {
   const control = account.control
   const menuProps = {
     design,
@@ -40,13 +35,10 @@ export const DraftMenu = (props) => {
   }
 
   return (
-          <nav className="grow mb-12">
+    <nav>
       <DesignOptions {...menuProps} />
       <CoreSettings {...menuProps} />
       <UiSettings {...menuProps} {...{ ui, view, setView }} />
     </nav>
   )
-      }}
-    </MenuWrapper>
-  )
 }

sites/shared/components/workbench/views/inspect/index.mjs

@@ -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,19 +67,15 @@ export const InspectView = ({
   }
 
   return (
-    <PanZoomContextProvider>
-      <div className="flex flex-col">
-        <ViewHeader
+    <PatternWithMenu
       {...{
         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">
+        setSettings,
+        pattern: output,
+        menu: (
           <DraftMenu
             {...{
               design,
@@ -97,9 +93,8 @@ export const InspectView = ({
               setView,
             }}
           />
-          </div>
-        </div>
-      </div>
-    </PanZoomContextProvider>
+        ),
+      }}
+    />
   )
 }

sites/shared/components/workbench/views/inspect/inspector/menu.mjs

@@ -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

sites/shared/components/workbench/views/inspect/menu.mjs

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

sites/shared/components/workbench/views/pattern-with-menu.mjs

@@ -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>
+)

sites/shared/components/workbench/views/print/index.mjs

@@ -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>
+        ),
+      }}
+    />
   )
 }

sites/shared/components/workbench/views/print/menu.mjs

@@ -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} />

sites/shared/components/workbench/views/test/index.mjs

@@ -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,22 +26,16 @@ export const TestView = ({
 
   const title = t('testThing', { design, thing: t(settings.sample?.[settings.sample.type]) })
   return (
-    <PanZoomContextProvider>
-      <div className="flex flex-col">
-        <ViewHeader
+    <PatternWithMenu
       {...{
         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">
+        setSettings,
+        title: <h2 className="px-2 capitalize">{title}</h2>,
+        pattern: <PanZoomPattern {...{ renderProps }} />,
+        menu: (
           <TestMenu
             {...{
               design,
@@ -56,9 +50,8 @@ export const TestView = ({
               renderProps,
             }}
           />
-          </div>
-        </div>
-      </div>
-    </PanZoomContextProvider>
+        ),
+      }}
+    />
   )
 }

sites/shared/components/workbench/views/test/menu.mjs

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

sites/shared/components/workbench/views/test/options.mjs

@@ -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

sites/shared/components/workbench/views/view-header.mjs

@@ -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 />

sites/shared/components/wrappers/modal.mjs

@@ -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>

sites/shared/components/wrappers/page.mjs

@@ -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>
   )

sites/shared/context/modal-context.mjs

@@ -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>