chore(shared): Take control into account in workbench view menu
This commit is contained in:
joostdecock
parent
c8f43811b6
commit
fc420160de
4 changed files with 120 additions and 81 deletions
|
|
@ -1,4 +1,5 @@
|
|||
// __SDEFILE__ - This file is a dependency for the stand-alone environment
|
||||
import { controlLevels } from 'shared/config/freesewing.config.mjs'
|
||||
// Hooks
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
@ -44,12 +45,14 @@ export const NavButton = ({
|
|||
children,
|
||||
onClick = 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} ${
|
||||
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 ? (
|
||||
<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 iconSize = 'h-6 w-6 grow-0'
|
||||
|
||||
|
|
@ -72,7 +75,7 @@ const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
|
|||
<>
|
||||
<NavButton
|
||||
onClick={() => setDense(!dense)}
|
||||
label={t('workbench:viewMenu')}
|
||||
label=""
|
||||
extraClasses="hidden lg:flex text-accent bg-neutral hover:bg-accent hover:text-neutral-content"
|
||||
>
|
||||
{dense ? (
|
||||
|
|
@ -84,34 +87,42 @@ const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
|
|||
<LeftIcon className={`${iconSize} animate-bounce-right`} stroke={4} />
|
||||
)}
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('draft')}
|
||||
label={t('workbench:configurePattern')}
|
||||
active={view === 'draft'}
|
||||
>
|
||||
<OptionsIcon className={iconSize} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('measies')}
|
||||
label={t('workbench:measies')}
|
||||
active={view === 'measies'}
|
||||
>
|
||||
<MeasieIcon className={iconSize} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('test')}
|
||||
label={t('workbench:testPattern')}
|
||||
active={view === 'test'}
|
||||
>
|
||||
<BeakerIcon className={iconSize} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('print')}
|
||||
label={t('workbench:printLayout')}
|
||||
active={view === 'print'}
|
||||
>
|
||||
<PrintIcon className={iconSize} />
|
||||
</NavButton>
|
||||
{control >= controlLevels.views.draft && (
|
||||
<NavButton
|
||||
onClick={() => setView('draft')}
|
||||
label={t('workbench:patternEditor')}
|
||||
active={view === 'draft'}
|
||||
>
|
||||
<OptionsIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)}
|
||||
{control >= controlLevels.views.measies && (
|
||||
<NavButton
|
||||
onClick={() => setView('measies')}
|
||||
label={t('workbench:measies')}
|
||||
active={view === 'measies'}
|
||||
>
|
||||
<MeasieIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)}
|
||||
{control >= controlLevels.views.test && (
|
||||
<NavButton
|
||||
onClick={() => setView('test')}
|
||||
label={t('workbench:patternTests')}
|
||||
active={view === 'test'}
|
||||
>
|
||||
<BeakerIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)}
|
||||
{control >= controlLevels.views.print && (
|
||||
<NavButton
|
||||
onClick={() => setView('print')}
|
||||
label={t('workbench:printLayout')}
|
||||
active={view === 'print'}
|
||||
>
|
||||
<PrintIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)}
|
||||
{/*!isProduction && (
|
||||
<NavButton
|
||||
onClick={() => setView('cut')}
|
||||
|
|
@ -121,53 +132,65 @@ const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
|
|||
<CutIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)*/}
|
||||
<NavButton
|
||||
onClick={() => setView('save')}
|
||||
label={t(`workbench:${saveAs ? 'savePattern' : 'savePatternAsHellip'}`)}
|
||||
active={view === 'save'}
|
||||
>
|
||||
{saveAs ? <SaveIcon className={iconSize} /> : <SaveAsIcon className={iconSize} />}
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('export')}
|
||||
label={t('workbench:exportPattern')}
|
||||
active={view === 'export'}
|
||||
>
|
||||
<ExportIcon className={iconSize} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('edit')}
|
||||
label={t('workbench:editSettings')}
|
||||
active={view === 'edit'}
|
||||
>
|
||||
<EditIcon className={iconSize} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('logs')}
|
||||
label={t('workbench:patternLogs')}
|
||||
active={view === 'logs'}
|
||||
>
|
||||
<CodeIcon className={iconSize} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('inspect')}
|
||||
label={t('workbench:patternInspector')}
|
||||
active={view === 'inspect'}
|
||||
>
|
||||
<XrayIcon className={iconSize} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
onClick={() => setView('docs')}
|
||||
label={t('workbench:docs')}
|
||||
active={view === 'docs'}
|
||||
>
|
||||
<DocsIcon className={iconSize} />
|
||||
</NavButton>
|
||||
{control >= controlLevels.views.save && (
|
||||
<NavButton
|
||||
onClick={() => setView('save')}
|
||||
label={t(`workbench:${saveAs ? 'savePattern' : 'savePatternAsHellip'}`)}
|
||||
active={view === 'save'}
|
||||
>
|
||||
{saveAs ? <SaveIcon className={iconSize} /> : <SaveAsIcon className={iconSize} />}
|
||||
</NavButton>
|
||||
)}
|
||||
{control >= controlLevels.views.export && (
|
||||
<NavButton
|
||||
onClick={() => setView('export')}
|
||||
label={t('workbench:exportPattern')}
|
||||
active={view === 'export'}
|
||||
>
|
||||
<ExportIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)}
|
||||
{control >= controlLevels.views.edit && (
|
||||
<NavButton
|
||||
onClick={() => setView('edit')}
|
||||
label={t('workbench:editByHand')}
|
||||
active={view === 'edit'}
|
||||
>
|
||||
<EditIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)}{' '}
|
||||
{control >= controlLevels.views.logs && (
|
||||
<NavButton
|
||||
onClick={() => setView('logs')}
|
||||
label={t('workbench:patternLogs')}
|
||||
active={view === 'logs'}
|
||||
>
|
||||
<CodeIcon className={iconSize} />
|
||||
</NavButton>
|
||||
)}
|
||||
{control >= controlLevels.views.inspect && (
|
||||
<NavButton
|
||||
onClick={() => setView('inspect')}
|
||||
label={t('workbench:patternInspector')}
|
||||
active={view === 'inspect'}
|
||||
>
|
||||
<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)
|
||||
return (
|
||||
<MenuWrapper
|
||||
|
|
@ -194,7 +217,7 @@ export const WorkbenchHeader = ({ view, setView, saveAs = false }) => {
|
|||
flex flex-col
|
||||
items-center w-full `}
|
||||
>
|
||||
<NavIcons {...{ setView, setDense, dense, view, saveAs }} />
|
||||
<NavIcons {...{ setView, setDense, dense, view, saveAs, control }} />
|
||||
</div>
|
||||
</header>
|
||||
</MenuWrapper>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue