1
0
Fork 0

chore: Restyled draft configurator

This commit is contained in:
Joost De Cock 2021-01-02 18:17:22 +01:00
parent 1bbf61700c
commit c130826d3b
10 changed files with 38 additions and 17 deletions

View file

@ -102,7 +102,7 @@ const DraftSettingSa = (props) => {
</React.Fragment>
)
return (
<li>
<li className={expanded ? 'expanded' : 'collapsed'}>
<OptionPreamble
dflt={saDfltToggle}
designDflt={'dflt'}

View file

@ -114,13 +114,13 @@ const DraftSettings = ({
return (
<>
<ul className="config l2 nogroups">
<ul className="config level-1 nogroups">
<DraftSettingSa {...addProps('sa')} />
<DraftSettingPaperless {...addProps('paperless')} />
<DraftSettingAdvanced {...addProps('advanced')} />
</ul>
{data.settings.advanced && (
<ul className="config l2">
<ul className="config level-1">
{Object.keys(groups).map((group) => {
let open = true
if (expanded.indexOf(group) === -1) open = false

View file

@ -10,6 +10,7 @@ import optionDefault from '@freesewing/utils/optionDefault'
import { FormattedMessage } from 'react-intl'
import { injectIntl } from 'react-intl'
import RightIcon from '@material-ui/icons/KeyboardArrowRight'
import OptionSubGroup from '../OptionSubGroup'
const OptionGroup = (props) => {
const renderOption = (name, sub = false) => {
@ -74,13 +75,11 @@ const OptionGroup = (props) => {
let children = []
for (let option of name[subGroup]) children.push(renderOption(option, true))
output.push(
<li>
<span key={subGroup + '-title'} className="subheading">
<RightIcon className="icon-col-exp expanded" />
<FormattedMessage id={'optiongroups.' + subGroup} />
</span>
<ul className="config l4">{children}</ul>
</li>
<OptionSubGroup
title={<FormattedMessage id={'optiongroups.' + subGroup} />}
children={children}
key={subGroup}
/>
)
}
} else output.push(renderOption(name))

View file

@ -0,0 +1,18 @@
import React, { useState } from 'react'
import RightIcon from '@material-ui/icons/KeyboardArrowRight'
const OptionSubGroup = ({ title, children }) => {
const [open, setOpen] = useState(false)
return (
<li>
<span className="subheading" onClick={() => setOpen(!open)}>
<RightIcon className={`icon-col-exp ${open ? 'expanded' : ''}`} />
{title}
</span>
{open && <ul className="config level-3">{children}</ul>}
</li>
)
}
export default OptionSubGroup

View file

@ -35,7 +35,7 @@ const PatternOptionBool = (props) => {
/>
)
return (
<li>
<li className={expanded ? 'expanded' : 'collapsed'}>
<OptionPreamble
dflt={props.dflt}
designDflt={props.designDflt}

View file

@ -44,7 +44,7 @@ const PatternOptionList = (props) => {
/>
)
return (
<li>
<li className={expanded ? 'expanded' : 'collapsed'}>
<OptionPreamble
dflt={props.dflt}
value={value}

View file

@ -57,7 +57,7 @@ const PatternOptionMillimeter = ({
)
return (
<li>
<li className={expanded ? 'expanded' : 'collapsed'}>
<OptionPreamble
dflt={dflt}
value={val}

View file

@ -68,7 +68,7 @@ const PatternOptionPctDegCount = ({
)
return (
<li>
<li className={expanded ? 'expanded' : 'collapsed'}>
<OptionPreamble
dflt={dflt}
designDflt={designDflt}

View file

@ -20,7 +20,7 @@ const PatternOptions = (props) => {
let children = null
if (expanded.indexOf(group) !== -1)
children = (
<ul className="config l3">
<ul className="config level-2">
<OptionGroup
noDocs={props.noDocs}
key={group + '-group'}
@ -54,7 +54,7 @@ const PatternOptions = (props) => {
}
}
return <ul className="config l2">{children}</ul>
return <ul className="config level-1">{children}</ul>
}
export default PatternOptions

View file

@ -2,6 +2,8 @@ import React from 'react'
import { FormattedMessage } from 'react-intl'
import PatternOptions from './PatternOptions'
import DraftSettings from './DraftSettings'
import TuneIcon from '@material-ui/icons/Tune'
import WrenchIcon from '@material-ui/icons/Build'
const DraftConfigurator = ({
noDocs = false,
@ -21,9 +23,10 @@ const DraftConfigurator = ({
raiseEvent
}
return (
<ul className="config l1">
<ul id="draft-config">
<li>
<span>
<TuneIcon />
<FormattedMessage id="app.designOptions" />
</span>
<PatternOptions
@ -33,6 +36,7 @@ const DraftConfigurator = ({
</li>
<li>
<span>
<WrenchIcon />
<FormattedMessage id="app.patternOptions" />
</span>
<DraftSettings