💄 Fixed styling in DraftConfigurator for pattern options 3 levels deep
This commit is contained in:
Joost De Cock
parent
ca99a3aa2d
commit
44de907aad
3 changed files with 89 additions and 75 deletions
|
|
@ -7,11 +7,14 @@ Unreleased:
|
|||
Deprecated:
|
||||
Removed:
|
||||
Fixed:
|
||||
css-theme:
|
||||
- Updated styles for DraftConfigurator component for pattern options 3 levels deep
|
||||
components:
|
||||
- "[#104](https://github.com/freesewing/freesewing.org/issues/104):
|
||||
Changed `onDragEnd` to `onChangeCommitted` in slider element
|
||||
(change in material-ui API when slider came out of beta)"
|
||||
- Workbench now also lets you preload a `withBreasts` set of measurements
|
||||
- DraftConfigurator now properly styles pattern options 3 levels deep
|
||||
create-freesewing-pattern:
|
||||
- Added missing `file-saver` dependency
|
||||
Security:
|
||||
|
|
|
|||
|
|
@ -1,104 +1,104 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import Pct from "../PatternOptionPercentage";
|
||||
import Deg from "../PatternOptionDegree";
|
||||
import Mm from "../PatternOptionMillimeter";
|
||||
import Bool from "../PatternOptionBool";
|
||||
import List from "../PatternOptionList";
|
||||
import Count from "../PatternOptionCount";
|
||||
import optionType from "@freesewing/utils/optionType";
|
||||
import optionDefault from "@freesewing/utils/optionDefault";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { injectIntl } from "react-intl";
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Pct from '../PatternOptionPercentage'
|
||||
import Deg from '../PatternOptionDegree'
|
||||
import Mm from '../PatternOptionMillimeter'
|
||||
import Bool from '../PatternOptionBool'
|
||||
import List from '../PatternOptionList'
|
||||
import Count from '../PatternOptionCount'
|
||||
import optionType from '@freesewing/utils/optionType'
|
||||
import optionDefault from '@freesewing/utils/optionDefault'
|
||||
import { FormattedMessage } from 'react-intl'
|
||||
import { injectIntl } from 'react-intl'
|
||||
import RightIcon from '@material-ui/icons/KeyboardArrowRight'
|
||||
|
||||
const OptionGroup = props => {
|
||||
const renderOption = (name, sub = false) => {
|
||||
let option = props.config.options[name];
|
||||
let type = optionType(option);
|
||||
let stringKey = `options.${props.config.name}.${name}.`;
|
||||
let option = props.config.options[name]
|
||||
let type = optionType(option)
|
||||
let stringKey = `options.${props.config.name}.${name}.`
|
||||
let extraProps = {
|
||||
name,
|
||||
dflt: optionDefault(name, props.config.options[name], props.recipe),
|
||||
units: props.units,
|
||||
updateValue: props.updateValue,
|
||||
raiseEvent: props.raiseEvent,
|
||||
title: <FormattedMessage id={stringKey + "title"} />,
|
||||
desc: <FormattedMessage id={stringKey + "description"} />,
|
||||
title: <FormattedMessage id={stringKey + 'title'} />,
|
||||
desc: <FormattedMessage id={stringKey + 'description'} />,
|
||||
intl: props.intl,
|
||||
pattern: props.config.name,
|
||||
key: name,
|
||||
noDocs: props.noDocs
|
||||
};
|
||||
if (
|
||||
typeof props.gist !== "undefined" &&
|
||||
typeof props.gist.settings !== "undefined" &&
|
||||
typeof props.gist.settings.options !== "undefined" &&
|
||||
typeof props.gist.settings.options[name] !== "undefined"
|
||||
)
|
||||
extraProps.value = props.gist.settings.options[name];
|
||||
else extraProps.value = null;
|
||||
|
||||
let noyes = [
|
||||
<FormattedMessage id="app.no" />,
|
||||
<FormattedMessage id="app.yes" />
|
||||
];
|
||||
switch (type) {
|
||||
case "pct":
|
||||
return <Pct {...option} {...extraProps} />;
|
||||
break;
|
||||
case "deg":
|
||||
return <Deg {...option} {...extraProps} />;
|
||||
break;
|
||||
case "mm":
|
||||
return <Mm {...option} {...extraProps} units={props.units} />;
|
||||
break;
|
||||
case "bool":
|
||||
return <Bool {...option} {...extraProps} labels={noyes} />;
|
||||
break;
|
||||
case "list":
|
||||
return <List {...option} {...extraProps} />;
|
||||
break;
|
||||
case "count":
|
||||
return <Count {...option} {...extraProps} />;
|
||||
break;
|
||||
default:
|
||||
throw new Error("Unsupported option type: " + type);
|
||||
}
|
||||
};
|
||||
if (
|
||||
typeof props.gist !== 'undefined' &&
|
||||
typeof props.gist.settings !== 'undefined' &&
|
||||
typeof props.gist.settings.options !== 'undefined' &&
|
||||
typeof props.gist.settings.options[name] !== 'undefined'
|
||||
)
|
||||
extraProps.value = props.gist.settings.options[name]
|
||||
else extraProps.value = null
|
||||
|
||||
let noyes = [<FormattedMessage id="app.no" />, <FormattedMessage id="app.yes" />]
|
||||
switch (type) {
|
||||
case 'pct':
|
||||
return <Pct {...option} {...extraProps} />
|
||||
break
|
||||
case 'deg':
|
||||
return <Deg {...option} {...extraProps} />
|
||||
break
|
||||
case 'mm':
|
||||
return <Mm {...option} {...extraProps} units={props.units} />
|
||||
break
|
||||
case 'bool':
|
||||
return <Bool {...option} {...extraProps} labels={noyes} />
|
||||
break
|
||||
case 'list':
|
||||
return <List {...option} {...extraProps} />
|
||||
break
|
||||
case 'count':
|
||||
return <Count {...option} {...extraProps} />
|
||||
break
|
||||
default:
|
||||
throw new Error('Unsupported option type: ' + type)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{props.options.map(name => {
|
||||
//let key = name;
|
||||
let output = [];
|
||||
if (typeof name === "object") {
|
||||
let output = []
|
||||
if (typeof name === 'object') {
|
||||
//key = Object.keys(name).pop();
|
||||
// Subgroup
|
||||
for (let subGroup of Object.keys(name)) {
|
||||
let children = []
|
||||
for (let option of name[subGroup]) children.push(renderOption(option, true))
|
||||
output.push(
|
||||
<span key={subGroup + "-title"} className="subheading">
|
||||
<FormattedMessage id={"optiongroups." + subGroup} />
|
||||
</span>
|
||||
);
|
||||
let children = [];
|
||||
for (let option of name[subGroup])
|
||||
children.push(renderOption(option, true));
|
||||
output.push(<ul className="config l4">{children}</ul>);
|
||||
<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>
|
||||
)
|
||||
}
|
||||
} else output.push(renderOption(name));
|
||||
} else output.push(renderOption(name))
|
||||
|
||||
return output;
|
||||
return output
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
OptionGroup.propTypes = {
|
||||
config: PropTypes.object.isRequired,
|
||||
options: PropTypes.array.isRequired,
|
||||
units: PropTypes.oneOf(["metric", "imperial"]).isRequired
|
||||
};
|
||||
units: PropTypes.oneOf(['metric', 'imperial']).isRequired
|
||||
}
|
||||
|
||||
OptionGroup.defaultProps = {};
|
||||
OptionGroup.defaultProps = {}
|
||||
|
||||
export default injectIntl(OptionGroup);
|
||||
export default injectIntl(OptionGroup)
|
||||
|
|
|
|||
|
|
@ -40,15 +40,18 @@ div.collapsed {
|
|||
display: none;
|
||||
}
|
||||
ul.config.l2 > li > div,
|
||||
ul.config.l3 > li > div {
|
||||
ul.config.l3 > li > div,
|
||||
ul.config.l4 > li > div {
|
||||
padding: 0.25rem 1.5rem 0.25rem 1.5rem;
|
||||
}
|
||||
ul.config.l3 > li > div.expanded {
|
||||
ul.config.l3 > li > div.expanded,
|
||||
ul.config.l4 > li > div.expanded {
|
||||
margin: 0 0 2rem 0;
|
||||
padding: 0.75 0.5rem 1.5rem;
|
||||
}
|
||||
ul.config.l2 > li > div:hover,
|
||||
ul.config.l3 > li > div:hover {
|
||||
ul.config.l3 > li > div:hover,
|
||||
ul.config.l4 > li > div:hover {
|
||||
cursor: pointer;
|
||||
background: $oc-gray-4;
|
||||
}
|
||||
|
|
@ -63,7 +66,15 @@ div.expanded div.MuiSlider-container {
|
|||
overflow: initial;
|
||||
}
|
||||
ul.config p { @include body-font;}
|
||||
ul.config.l4 li { padding-left: 0.75rem; }
|
||||
|
||||
/* level 4 */
|
||||
ul.config.l3 li span.subheading {
|
||||
padding-left: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
ul.config.l4 > li > div { padding-left: 2.5rem; }
|
||||
|
||||
|
||||
span.dflt,
|
||||
span.custom {
|
||||
padding: 2px 4px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue