💄 Fixed styling in DraftConfigurator for pattern options 3 levels deep

config/changelog.yaml

@@ -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:

packages/components/src/DraftConfigurator/OptionGroup/index.js

@@ -1,104 +1,104 @@
-import React from "react";
+import React from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
-import Pct from "../PatternOptionPercentage";
+import Pct from '../PatternOptionPercentage'
-import Deg from "../PatternOptionDegree";
+import Deg from '../PatternOptionDegree'
-import Mm from "../PatternOptionMillimeter";
+import Mm from '../PatternOptionMillimeter'
-import Bool from "../PatternOptionBool";
+import Bool from '../PatternOptionBool'
-import List from "../PatternOptionList";
+import List from '../PatternOptionList'
-import Count from "../PatternOptionCount";
+import Count from '../PatternOptionCount'
-import optionType from "@freesewing/utils/optionType";
+import optionType from '@freesewing/utils/optionType'
-import optionDefault from "@freesewing/utils/optionDefault";
+import optionDefault from '@freesewing/utils/optionDefault'
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage } from 'react-intl'
-import { injectIntl } 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 option = props.config.options[name]
-    let type = optionType(option);
+    let type = optionType(option)
-    let stringKey = `options.${props.config.name}.${name}.`;
+    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"} />,
+      title: <FormattedMessage id={stringKey + 'title'} />,
-      desc: <FormattedMessage id={stringKey + "description"} />,
+      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 = [];
+        let output = []
-        if (typeof name === "object") {
+        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">
+              <li>
-                <FormattedMessage id={"optiongroups." + subGroup} />
+                <span key={subGroup + '-title'} className="subheading">
-              </span>
+                  <RightIcon className="icon-col-exp expanded" />
-            );
+                  <FormattedMessage id={'optiongroups.' + subGroup} />
-            let children = [];
+                </span>
-            for (let option of name[subGroup])
+                <ul className="config l4">{children}</ul>
-              children.push(renderOption(option, true));
+              </li>
-            output.push(<ul className="config l4">{children}</ul>);
+            )
           }
-        } 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)

packages/css-theme/src/components/_draft-configurator.scss

@@ -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;