1
0
Fork 0

chore(shared): Take control into account in workbench view menu

This commit is contained in:
joostdecock 2023-10-04 20:31:40 +02:00
parent c8f43811b6
commit fc420160de
4 changed files with 120 additions and 81 deletions

View file

@ -35,6 +35,7 @@ docs: Documentation
draft: Draft draft: Draft
draftPattern: Draft pattern draftPattern: Draft pattern
edit: Edit edit: Edit
editByHand: Edit Manually
editCurrentMeasies: Edit Current Measurements editCurrentMeasies: Edit Current Measurements
editCurrentMeasiesDesc: Changes you make here will not be saved to your measurements sets, and will only affect this pattern. editCurrentMeasiesDesc: Changes you make here will not be saved to your measurements sets, and will only affect this pattern.
editCurrentMeasiesHeader: Edit Pattern Measurements editCurrentMeasiesHeader: Edit Pattern Measurements
@ -47,7 +48,7 @@ exportAsData: Export as data
exportForEditing: Export for editing exportForEditing: Export for editing
exportForPrinting: Export for printing exportForPrinting: Export for printing
exportPattern-txt: Export a PDF suitable for your printer, or download this pattern in a variety of formats exportPattern-txt: Export a PDF suitable for your printer, or download this pattern in a variety of formats
exportPattern: Export pattern exportPattern: Export Pattern
fit: Fit fit: Fit
frontPockets: Front pockets frontPockets: Front pockets
generatePdf: Generate print-ready PDF generatePdf: Generate print-ready PDF
@ -80,9 +81,11 @@ partTransfoYes: Show buttons
partTransfoYesDesc: Include these buttons on the pattern output (they will not be printed) partTransfoYesDesc: Include these buttons on the pattern output (they will not be printed)
pathInfo: Path info pathInfo: Path info
patternBookmarkCreated: Pattern bookmark created patternBookmarkCreated: Pattern bookmark created
patternEditor: Pattern Editor
patternInspector: Pattern Inspector patternInspector: Pattern Inspector
patternLogs: Pattern logs patternLogs: Pattern Logs
patternSaved: Pattern saved patternSaved: Pattern saved
patternTests: Pattern Tests
pockets: Pockets pockets: Pockets
printLayout: Print Layout printLayout: Print Layout
printSettings.d: Configure your pattern so you can print it just the way you like it. Includes page size & orientation, margins, and more. printSettings.d: Configure your pattern so you can print it just the way you like it. Includes page size & orientation, margins, and more.

View file

@ -1,4 +1,5 @@
// __SDEFILE__ - This file is a dependency for the stand-alone environment // __SDEFILE__ - This file is a dependency for the stand-alone environment
import { controlLevels } from 'shared/config/freesewing.config.mjs'
// Hooks // Hooks
import { useState } from 'react' import { useState } from 'react'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
@ -44,12 +45,14 @@ export const NavButton = ({
children, children,
onClick = false, onClick = false,
active = false, active = false,
extraClasses = 'lg:bg-neutral lg:text-neutral-content lg:hover:bg-secondary lg:hover:text-secondary-content hover:text-secondary', extraClasses = 'lg:hover:bg-secondary lg:hover:text-secondary-content',
}) => { }) => {
const className = `w-full flex flex-row items-center px-4 py-2 ${extraClasses} ${ const className = `w-full flex flex-row items-center px-4 py-2 ${extraClasses} ${
active ? 'text-secondary' : '' active
? 'font-bold lg:font-normal bg-secondary bg-opacity-10 lg:bg-secondary lg:text-secondary-content lg:bg-opacity-50'
: 'lg:bg-neutral lg:text-neutral-content'
}` }`
const span = <span className="font-normal block grow text-left">{label}</span> const span = <span className="block grow text-left">{label}</span>
return onClick ? ( return onClick ? (
<button {...{ onClick, className }} title={label}> <button {...{ onClick, className }} title={label}>
@ -64,7 +67,7 @@ export const NavButton = ({
) )
} }
const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => { const NavIcons = ({ setView, setDense, dense, view, saveAs = false, control }) => {
const { t } = useTranslation(['header']) const { t } = useTranslation(['header'])
const iconSize = 'h-6 w-6 grow-0' const iconSize = 'h-6 w-6 grow-0'
@ -72,7 +75,7 @@ const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
<> <>
<NavButton <NavButton
onClick={() => setDense(!dense)} onClick={() => setDense(!dense)}
label={t('workbench:viewMenu')} label=""
extraClasses="hidden lg:flex text-accent bg-neutral hover:bg-accent hover:text-neutral-content" extraClasses="hidden lg:flex text-accent bg-neutral hover:bg-accent hover:text-neutral-content"
> >
{dense ? ( {dense ? (
@ -84,34 +87,42 @@ const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
<LeftIcon className={`${iconSize} animate-bounce-right`} stroke={4} /> <LeftIcon className={`${iconSize} animate-bounce-right`} stroke={4} />
)} )}
</NavButton> </NavButton>
<NavButton {control >= controlLevels.views.draft && (
onClick={() => setView('draft')} <NavButton
label={t('workbench:configurePattern')} onClick={() => setView('draft')}
active={view === 'draft'} label={t('workbench:patternEditor')}
> active={view === 'draft'}
<OptionsIcon className={iconSize} /> >
</NavButton> <OptionsIcon className={iconSize} />
<NavButton </NavButton>
onClick={() => setView('measies')} )}
label={t('workbench:measies')} {control >= controlLevels.views.measies && (
active={view === 'measies'} <NavButton
> onClick={() => setView('measies')}
<MeasieIcon className={iconSize} /> label={t('workbench:measies')}
</NavButton> active={view === 'measies'}
<NavButton >
onClick={() => setView('test')} <MeasieIcon className={iconSize} />
label={t('workbench:testPattern')} </NavButton>
active={view === 'test'} )}
> {control >= controlLevels.views.test && (
<BeakerIcon className={iconSize} /> <NavButton
</NavButton> onClick={() => setView('test')}
<NavButton label={t('workbench:patternTests')}
onClick={() => setView('print')} active={view === 'test'}
label={t('workbench:printLayout')} >
active={view === 'print'} <BeakerIcon className={iconSize} />
> </NavButton>
<PrintIcon className={iconSize} /> )}
</NavButton> {control >= controlLevels.views.print && (
<NavButton
onClick={() => setView('print')}
label={t('workbench:printLayout')}
active={view === 'print'}
>
<PrintIcon className={iconSize} />
</NavButton>
)}
{/*!isProduction && ( {/*!isProduction && (
<NavButton <NavButton
onClick={() => setView('cut')} onClick={() => setView('cut')}
@ -121,53 +132,65 @@ const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
<CutIcon className={iconSize} /> <CutIcon className={iconSize} />
</NavButton> </NavButton>
)*/} )*/}
<NavButton {control >= controlLevels.views.save && (
onClick={() => setView('save')} <NavButton
label={t(`workbench:${saveAs ? 'savePattern' : 'savePatternAsHellip'}`)} onClick={() => setView('save')}
active={view === 'save'} label={t(`workbench:${saveAs ? 'savePattern' : 'savePatternAsHellip'}`)}
> active={view === 'save'}
{saveAs ? <SaveIcon className={iconSize} /> : <SaveAsIcon className={iconSize} />} >
</NavButton> {saveAs ? <SaveIcon className={iconSize} /> : <SaveAsIcon className={iconSize} />}
<NavButton </NavButton>
onClick={() => setView('export')} )}
label={t('workbench:exportPattern')} {control >= controlLevels.views.export && (
active={view === 'export'} <NavButton
> onClick={() => setView('export')}
<ExportIcon className={iconSize} /> label={t('workbench:exportPattern')}
</NavButton> active={view === 'export'}
<NavButton >
onClick={() => setView('edit')} <ExportIcon className={iconSize} />
label={t('workbench:editSettings')} </NavButton>
active={view === 'edit'} )}
> {control >= controlLevels.views.edit && (
<EditIcon className={iconSize} /> <NavButton
</NavButton> onClick={() => setView('edit')}
<NavButton label={t('workbench:editByHand')}
onClick={() => setView('logs')} active={view === 'edit'}
label={t('workbench:patternLogs')} >
active={view === 'logs'} <EditIcon className={iconSize} />
> </NavButton>
<CodeIcon className={iconSize} /> )}{' '}
</NavButton> {control >= controlLevels.views.logs && (
<NavButton <NavButton
onClick={() => setView('inspect')} onClick={() => setView('logs')}
label={t('workbench:patternInspector')} label={t('workbench:patternLogs')}
active={view === 'inspect'} active={view === 'logs'}
> >
<XrayIcon className={iconSize} /> <CodeIcon className={iconSize} />
</NavButton> </NavButton>
<NavButton )}
onClick={() => setView('docs')} {control >= controlLevels.views.inspect && (
label={t('workbench:docs')} <NavButton
active={view === 'docs'} onClick={() => setView('inspect')}
> label={t('workbench:patternInspector')}
<DocsIcon className={iconSize} /> active={view === 'inspect'}
</NavButton> >
<XrayIcon className={iconSize} />
</NavButton>
)}
{control >= controlLevels.views.docs && (
<NavButton
onClick={() => setView('docs')}
label={t('workbench:docs')}
active={view === 'docs'}
>
<DocsIcon className={iconSize} />
</NavButton>
)}
</> </>
) )
} }
export const WorkbenchHeader = ({ view, setView, saveAs = false }) => { export const WorkbenchHeader = ({ view, setView, saveAs = false, control = 4 }) => {
const [dense, setDense] = useState(true) const [dense, setDense] = useState(true)
return ( return (
<MenuWrapper <MenuWrapper
@ -194,7 +217,7 @@ export const WorkbenchHeader = ({ view, setView, saveAs = false }) => {
flex flex-col flex flex-col
items-center w-full `} items-center w-full `}
> >
<NavIcons {...{ setView, setDense, dense, view, saveAs }} /> <NavIcons {...{ setView, setDense, dense, view, saveAs, control }} />
</div> </div>
</header> </header>
</MenuWrapper> </MenuWrapper>

View file

@ -167,7 +167,7 @@ export const Workbench = ({ design, Design, DynamicDocs, saveAs = false, preload
if (error) if (error)
return ( return (
<> <>
<WorkbenchHeader {...{ view, setView, update }} /> <WorkbenchHeader {...{ view, setView, update }} control={account.control} />
{error} {error}
<MobileMenubar /> <MobileMenubar />
</> </>
@ -241,7 +241,7 @@ export const Workbench = ({ design, Design, DynamicDocs, saveAs = false, preload
<> <>
{!ui.kiosk && <Header />} {!ui.kiosk && <Header />}
<div className={`flex flex-row min-h-screen ${ui.kiosk ? kioskClasses : ''}`}> <div className={`flex flex-row min-h-screen ${ui.kiosk ? kioskClasses : ''}`}>
<WorkbenchHeader {...{ view, setView, update, saveAs }} /> <WorkbenchHeader {...{ view, setView, update, saveAs }} control={account.control} />
<div className="grow">{viewContent}</div> <div className="grow">{viewContent}</div>
<MobileMenubar /> <MobileMenubar />
</div> </div>

View file

@ -85,6 +85,18 @@ export const freeSewingConfig = {
renderer: 4, renderer: 4,
kiosk: 2, kiosk: 2,
}, },
views: {
draft: 1,
measies: 1,
test: 3,
print: 1,
export: 1,
save: 1,
edit: 4,
logs: 2,
inspect: 4,
docs: 1,
},
}, },
social, social,
statuses: { statuses: {
@ -117,4 +129,5 @@ export const controlLevels = {
patterns: freeSewingConfig.account.patterns, patterns: freeSewingConfig.account.patterns,
core: freeSewingConfig.control.core, core: freeSewingConfig.control.core,
ui: freeSewingConfig.control.ui, ui: freeSewingConfig.control.ui,
views: freeSewingConfig.control.views,
} }