3653700572
- Moved the various tabs on the draft view to their own views. - Renames modes to views - Started to group various aspects of the workbench state under `_state` in the gist to prevent it from getting all mixed up with the core settings. - Updated events title to make it more clear not all events might be present - Removed valid state in measurements input since it was only getting updated on keyboard input but now when preloading measurements (which it does now)
98 lines
3.1 KiB
JavaScript
98 lines
3.1 KiB
JavaScript
import MenuIcon from 'shared/components/icons/menu.js'
|
|
import OptionsIcon from 'shared/components/icons/options.js'
|
|
import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
const View = props => {
|
|
const { t } = useTranslation(['app'])
|
|
const entries = [
|
|
{
|
|
name: 'measurements',
|
|
title: t('measurements'),
|
|
onClick: () => props.updateGist(['_state', 'view'], 'measurements')
|
|
},
|
|
{
|
|
name: 'draft',
|
|
title: t('draftPattern', { pattern: props.pattern.config.name }),
|
|
onClick: () => props.updateGist(['_state', 'view'], 'draft')
|
|
},
|
|
{
|
|
name: 'test',
|
|
title: t('testPattern', { pattern: props.pattern.config.name }),
|
|
onClick: () => props.updateGist(['_state', 'view'], 'test')
|
|
},
|
|
{
|
|
name: 'export',
|
|
title: t('export'),
|
|
onClick: () => props.updateGist(['_state', 'view'], 'export')
|
|
},
|
|
{
|
|
name: 'events',
|
|
title: t('events'),
|
|
onClick: () => props.updateGist(['_state', 'view'], 'events')
|
|
},
|
|
{
|
|
name: 'yaml',
|
|
title: t('YAML'),
|
|
onClick: () => props.updateGist(['_state', 'view'], 'yaml')
|
|
},
|
|
{
|
|
name: 'json',
|
|
title: t('JSON'),
|
|
onClick: () => props.updateGist(['_state', 'view'], 'json')
|
|
},
|
|
]
|
|
|
|
return (
|
|
<details className='py-1' open>
|
|
<summary className={`
|
|
flex flex-row uppercase gap-4 font-bold text-lg
|
|
hover:cursor-row-resize
|
|
p-2
|
|
text-base-content
|
|
sm:text-neutral-content
|
|
items-center
|
|
`}>
|
|
<span className="text-secondary-focus mr-4"><MenuIcon /></span>
|
|
<span className={`grow ${linkClasses} hover:cursor-resize`}>
|
|
{t('view')}
|
|
</span>
|
|
<Chevron />
|
|
</summary>
|
|
<ul className="pl-5 list-inside">
|
|
{entries.map(entry => (
|
|
<li key={entry.title} className="flex flex-row">
|
|
<button title={entry.title} className={`
|
|
grow pl-2 border-l-2
|
|
${linkClasses}
|
|
hover:cursor-pointer
|
|
hover:border-secondary
|
|
sm:hover:border-secondary-focus
|
|
text-left
|
|
capitalize
|
|
${entry.name === props.gist?._state?.view
|
|
? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
|
|
: 'text-base-content sm:text-neutral-content'
|
|
}
|
|
`} onClick={entry.onClick}>
|
|
<span className={`
|
|
text-3xl mr-2 inline-block p-0 leading-3
|
|
${entry.name === props.gist?._state?.view
|
|
? 'text-secondary sm:text-secondary-focus translate-y-1'
|
|
: 'translate-y-3'
|
|
}
|
|
`}>
|
|
{entry.name === props.gist?._state?.view ? <>•</> : <>°</>}
|
|
</span>
|
|
<span className={entry.name === props.gist?._state?.view ? 'font-bold' : ''}>
|
|
{ entry.title }
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</details>
|
|
)
|
|
}
|
|
|
|
export default View
|