chore(shared): Take control into account in workbench view menu
This commit is contained in:
parent
c8f43811b6
commit
fc420160de
4 changed files with 120 additions and 81 deletions
|
@ -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.
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue