123 lines
3.9 KiB
JavaScript
123 lines
3.9 KiB
JavaScript
// Dependencies
|
|
import React from 'react'
|
|
import { capitalize } from '@freesewing/utils'
|
|
import { menuLayoutSettingsStructure } from '../../lib/index.mjs'
|
|
// Components
|
|
import { PatternIcon } from '@freesewing/react/components/Icon'
|
|
import { MenuBoolInput, MenuMmInput, MenuListInput, MenuPctInput } from './Input.mjs'
|
|
import { MenuBoolValue, MenuMmValue, MenuPctOptionValue } from './Value.mjs'
|
|
import { MenuItemGroup } from './Container.mjs'
|
|
import { MenuHighlightValue } from './Value.mjs'
|
|
|
|
export const LayoutSettingsMenu = ({ update, state, Design }) => {
|
|
const structure = menuLayoutSettingsStructure()
|
|
|
|
const drillProps = { Design, state, update }
|
|
const inputs = {
|
|
size: (props) => <MenuListInput {...drillProps} {...props} />,
|
|
orientation: (props) => <MenuListInput {...drillProps} {...props} />,
|
|
margin: (props) => <MenuMmInput {...drillProps} {...props} />,
|
|
coverPage: (props) => <MenuBoolInput {...drillProps} {...props} />,
|
|
iconSize: (props) => <MenuPctInput {...drillProps} {...props} />,
|
|
}
|
|
const values = {
|
|
size: ({ current, changed, config }) => (
|
|
<MenuHighlightValue changed={changed}>
|
|
{capitalize(current ? current : config.dflt)}
|
|
</MenuHighlightValue>
|
|
),
|
|
orientation: ({ current, changed }) => (
|
|
<MenuHighlightValue changed={changed}>
|
|
<PatternIcon
|
|
className={`tw:w-6 tw:h-6 tw:text-inherit ${current === 'landscape' ? 'tw:-rotate-90' : ''}`}
|
|
/>
|
|
</MenuHighlightValue>
|
|
),
|
|
margin: MenuMmValue,
|
|
coverPage: MenuBoolValue,
|
|
iconSize: MenuPctOptionValue,
|
|
}
|
|
|
|
return (
|
|
<MenuItemGroup
|
|
{...{
|
|
structure,
|
|
ux: state.ui?.ux,
|
|
currentValues: state.ui.layout || {},
|
|
isFirst: true,
|
|
name: 'UI Preferences',
|
|
passProps: {
|
|
ux: state.ui?.ux,
|
|
settings: state?.settings,
|
|
patternConfig: Design.patternConfig,
|
|
},
|
|
updateHandler: (key, val) => update.ui(['layout', key], val),
|
|
isDesignOptionsGroup: false,
|
|
state,
|
|
Design,
|
|
inputs,
|
|
values,
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
/*
|
|
const PrintActions = ({ state, update }) => (
|
|
<SubAccordion
|
|
items={[
|
|
[
|
|
<div className="tw:w-full tw:flex tw:flex-row tw:gap2 tw:justify-between" key={1}>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">
|
|
<LeftRightIcon />
|
|
<span>{'workbench:partTransfo'}</span>
|
|
</div>
|
|
{state.ui.hideMovableButtons ? <BoolNoIcon /> : <BoolYesIcon />}
|
|
</div>,
|
|
<ListInput
|
|
key={2}
|
|
update={() => update.state.ui('hideMovableButtons', state.ui.hideMovableButtons ? false : true)}
|
|
label={
|
|
<span className="tw:text-base tw:font-normal">{'workbench:partTransfoDesc'}</span>
|
|
}
|
|
list={[
|
|
{
|
|
val: true,
|
|
label: 'workbench:partTransfoNo',
|
|
desc: 'workbench:partTransfoNoDesc',
|
|
},
|
|
{
|
|
val: false,
|
|
label: 'workbench:partTransfoYes',
|
|
desc: 'workbench:partTransfoYesDesc',
|
|
},
|
|
]}
|
|
current={state.ui.hideMovableButtons ? true : false}
|
|
/>,
|
|
'partTransfo',
|
|
],
|
|
[
|
|
<div className="tw:w-full tw:flex tw:flex-row tw:gap2 tw:justify-between" key={1}>
|
|
<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">
|
|
<ResetIcon />
|
|
<span>{'workbench:resetPrintLayout'}</span>
|
|
</div>
|
|
<WarningIcon />
|
|
</div>,
|
|
|
|
<Fragment key={2}>
|
|
<p>{'workbench:resetPrintLayoutDesc'}</p>
|
|
<button
|
|
className={`${horFlexClasses} tw:btn tw:btn-warning tw:btn-outline tw:w-full`}
|
|
onClick={() => update.ui(['layouts', 'print'])}
|
|
>
|
|
<ResetIcon />
|
|
<span>{'workbench:resetPrintLayout'}</span>
|
|
</button>
|
|
</Fragment>,
|
|
'reset',
|
|
],
|
|
]}
|
|
/>
|
|
)
|
|
*/
|