🚧 More work on React components

2019-04-26 08:25:15 +02:00 · 2019-04-26 08:25:15 +02:00 · 3d9192a5ae
commit 3d9192a5ae
parent e2b5ba2ee7
12 changed files with 178 additions and 132 deletions
--- a/packages/components/src/DraftSettings/index.js
+++ b/packages/components/src/DraftSettings/index.js
@ -5,7 +5,7 @@ import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
 import List from "@material-ui/core/List";
 import ListSubheader from "@material-ui/core/ListSubheader";
-import CollapsedIcon from "@material-ui/icons/ArrowDropDown";
+import CollapsedIcon from "@material-ui/icons/KeyboardArrowDown";
 import ExpandedIcon from "@material-ui/icons/ArrowRight";
 import DraftSettingSa from "../DraftSettingSa";
 import DraftSettingMargin from "../DraftSettingMargin";
@ -100,7 +100,7 @@ const DraftSettings = props => {
  };

  return (
-    <List subheader={<h3 />} className="draft-settings gist-side">
+    <ul className="nav l2">
      {Object.keys(groups).map(group => {
        let open = true;
        if (expanded.indexOf(group) === -1) open = false;
@ -128,7 +128,7 @@ const DraftSettings = props => {
          </React.Fragment>
        );
      })}
-    </List>
+    </ul>
  );
 };

--- a/packages/components/src/FormFieldSlider/index.js
+++ b/packages/components/src/FormFieldSlider/index.js
@ -6,7 +6,7 @@ import { withStyles } from "@material-ui/core/styles";
 const PaddedSlider = withStyles({
  container: {
    padding: "25px 0",
-    overflowX: "hidden" // See: https://github.com/mui-org/material-ui/issues/14234
+    //overflowX: "hidden" // See: https://github.com/mui-org/material-ui/issues/14234
  },
  track: { height: "4px" },
  thumb: { width: "16px", height: "16px" }
--- a/packages/components/src/OptionGroup/index.js
+++ b/packages/components/src/OptionGroup/index.js
@ -13,7 +13,7 @@ import { injectIntl } from "react-intl";
 const OptionGroup = props => {
  const update = (name, value) => props.updateValue("option", name, value);

-  const renderOption = name => {
+  const renderOption = (name, sub=false) => {
    let option = props.pattern.config.options[name];
    let type = optionType(option);
    let stringKey = `options.${props.pattern.config.name}.${name}.`;
@ -67,12 +67,14 @@ const OptionGroup = props => {
          // Subgroup
          for (let subGroup of Object.keys(name)) {
            output.push(
-              <h4 key={subGroup + "-title"}>
+              <h5 key={subGroup + "-title"} className="subheading">
                <FormattedMessage id={"optiongroups." + subGroup} />
-              </h4>
+              </h5>
            );
+            let children = [];
            for (let option of name[subGroup])
-              output.push(renderOption(option));
+              children.push(renderOption(option, true));
+            output.push(<ul className="nav l4">{children}</ul>);
          }
        } else output.push(renderOption(name));

--- a/packages/components/src/OptionPreamble/index.js
+++ b/packages/components/src/OptionPreamble/index.js
@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import IconButton from "@material-ui/core/IconButton";
+import DownIcon from "@material-ui/icons/KeyboardArrowDown";
 import ResetIcon from "@material-ui/icons/SettingsBackupRestore";
 import HelpIcon from "@material-ui/icons/Help";
 import { injectIntl } from "react-intl";
@ -17,7 +18,10 @@ const OptionPreamble = props => {
      flexGrow: 1,
      margin: "0 0.5rem"
    },
-    right: { margin: "0 0.5rem" }
+    right: {
+      margin: 0,
+      textAlign: "right"
+    }
  };

  const resetLabel = props.intl.formatMessage({
@ -31,20 +35,19 @@ const OptionPreamble = props => {

  return (
    <React.Fragment>
-      <div style={styles.container}>
-        <div style={styles.left} onClick={props.toggleExpanded}>
-          <h4 id={props.id}>{props.title}</h4>
+      <h4 onClick={props.toggleExpanded} style={styles.container}>
+        <div style={styles.left}>
+          <DownIcon className={"icon-col-exp "+ (props.expanded ? "expanded" : "collapsed")}/>
+          {props.title}
          </div>
        <div style={styles.right}>
-          <h4 className={props.value === props.dflt ? "po-dflt" : "po-custom"}>
+          <span className={props.value === props.dflt ? "dflt" : "custom"}>
            {props.displayValue}
+          </span>
+        </div>
      </h4>
-        </div>
-      </div>
-      <div
-        style={styles.container}
-        className={expanded ? "expanded" : "collapsed"}
-      >
+      <div className={props.expanded ? "col-exp expanded" : "col-exp collapsed"}>
+        <div style={styles.container}>
          <div style={styles.left}>
            <p>{props.desc}</p>
          </div>
@ -55,6 +58,7 @@ const OptionPreamble = props => {
              color="primary"
              disabled={props.value === props.dflt ? true : false}
              onClick={props.reset}
+              className="mini-icon-btn"
            >
              <ResetIcon />
            </IconButton>
@ -63,11 +67,14 @@ const OptionPreamble = props => {
              aria-label={docsLabel}
              color="primary"
              onClick={props.showHelp}
+              className="mini-icon-btn"
            >
              <HelpIcon />
            </IconButton>
          </div>
        </div>
+        {props.option}
+      </div>
    </React.Fragment>
  );
 };
--- a/packages/components/src/PatternOptionBool/index.js
+++ b/packages/components/src/PatternOptionBool/index.js
@ -5,6 +5,7 @@ import OptionPreamble from "../OptionPreamble";

 const PatternOptionBool = props => {
  const [value, setValue] = useState(props.dflt);
+  const [expanded, setExpanded] = useState(false);

  const update = (name, newValue, evt) => {
    props.updateValue(props.name, newValue);
@ -16,23 +17,9 @@ const PatternOptionBool = props => {
    props.updateValue(props.name, props.dflt);
  };

-  return (
-    <div className={"pattern-option bool"}>
-      <OptionPreamble
-        dflt={props.dflt}
-        value={value}
-        desc={props.desc}
-        title={props.title}
-        id={"po-list-" + props.name}
-        displayValue={value ? props.labels[1] : props.labels[0]}
-        reset={reset}
-        showHelp={() =>
-          props.triggerAction("showHelp", {
-            type: "draftSetting",
-            value: props.name
-          })
-        }
-      />
+  const toggleExpanded = () => setExpanded(!expanded);
+
+  let option = (
    <FormFieldBool
      name={props.name}
      value={value}
@ -42,7 +29,28 @@ const PatternOptionBool = props => {
      updateValue={update}
      labels={props.labels}
    />
-    </div>
+  )
+  return (
+    <li>
+      <OptionPreamble
+        dflt={props.dflt}
+        value={value}
+        desc={props.desc}
+        title={props.title}
+        id={"po-list-" + props.name}
+        displayValue={value ? props.labels[1] : props.labels[0]}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
+        reset={reset}
+        showHelp={() =>
+          props.triggerAction("showHelp", {
+            type: "draftSetting",
+            value: props.name
+          })
+        }
+        option={option}
+      />
+    </li>
  );
 };

--- a/packages/components/src/PatternOptionList/index.js
+++ b/packages/components/src/PatternOptionList/index.js
@ -5,6 +5,7 @@ import OptionPreamble from "../OptionPreamble";

 const PatternOptionList = props => {
  const [value, setValue] = useState(props.dflt);
+  const [expanded, setExpanded] = useState(false);

  const update = (name, newValue, evt) => {
    props.updateValue(props.name, newValue);
@ -16,6 +17,8 @@ const PatternOptionList = props => {
    props.updateValue(props.name, props.dflt);
  };

+  const toggleExpanded = () => setExpanded(!expanded);
+
  const styles = {
    container: {
      display: "flex",
@ -37,24 +40,7 @@ const PatternOptionList = props => {
      id: stringKey + item,
      defaultMessage: item
    });
-
-  return (
-    <div className={"pattern-option list"}>
-      <OptionPreamble
-        dflt={props.dflt}
-        value={value}
-        desc={props.desc}
-        title={props.title}
-        id={"po-list-" + props.name}
-        displayValue={list[value]}
-        reset={reset}
-        showHelp={() =>
-          props.triggerAction("showHelp", {
-            type: "patternOption",
-            value: props.name
-          })
-        }
-      />
+  let option = (
    <FormFieldList
      name={props.name}
      value={value}
@ -64,7 +50,28 @@ const PatternOptionList = props => {
      updateValue={update}
      list={list}
    />
-    </div>
+  )
+  return (
+    <li>
+      <OptionPreamble
+        dflt={props.dflt}
+        value={value}
+        desc={props.desc}
+        title={props.title}
+        id={"po-list-" + props.name}
+        displayValue={list[value]}
+        reset={reset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
+        showHelp={() =>
+          props.triggerAction("showHelp", {
+            type: "patternOption",
+            value: props.name
+          })
+        }
+        option={option}
+      />
+    </li>
  );
 };

--- a/packages/components/src/PatternOptionMillimeter/index.js
+++ b/packages/components/src/PatternOptionMillimeter/index.js
@ -13,6 +13,7 @@ import OptionPreamble from "../OptionPreamble";
 const PatternOptionMillimeter = props => {
  const [value, setValue] = useState(props.dflt);
  const [previousValue, setPreviousValue] = useState(props.dflt);
+  const [expanded, setExpanded] = useState(false);

  const update = (name, newValue, evt) => {
    newValue = roundMm(newValue, props.units);
@ -33,6 +34,8 @@ const PatternOptionMillimeter = props => {
    props.updateValue(props.name, props.dflt);
  };

+  const toggleExpanded = () => setExpanded(!expanded);
+
  const styles = {
    container: {
      display: "flex",
@ -46,23 +49,7 @@ const PatternOptionMillimeter = props => {
    right: { margin: "0 0.5rem" }
  };

-  return (
-    <div className="pattern-option millimeter">
-      <OptionPreamble
-        dflt={props.dflt}
-        value={value}
-        desc={props.desc}
-        title={props.title}
-        id={"po-mm-" + props.name}
-        displayValue={formatMm(value, props.units)}
-        reset={reset}
-        showHelp={() =>
-          props.triggerAction("showHelp", {
-            type: "patternOption",
-            value: props.name
-          })
-        }
-      />
+  let option = (
    <FormFieldSlider
      name={props.name}
      value={value}
@ -73,7 +60,29 @@ const PatternOptionMillimeter = props => {
      label={"po-mm-" + props.name}
      updateValue={update}
    />
-    </div>
+  )
+
+  return (
+    <li>
+      <OptionPreamble
+        dflt={props.dflt}
+        value={value}
+        desc={props.desc}
+        title={props.title}
+        id={"po-mm-" + props.name}
+        displayValue={formatMm(value, props.units)}
+        reset={reset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
+        showHelp={() =>
+          props.triggerAction("showHelp", {
+            type: "patternOption",
+            value: props.name
+          })
+        }
+        option={option}
+      />
+    </li>
  );
 };

--- a/packages/components/src/PatternOptionPctDegCount/index.js
+++ b/packages/components/src/PatternOptionPctDegCount/index.js
@ -31,22 +31,22 @@ const PatternOptionPctDegCount = props => {

  const toggleExpanded = () => setExpanded(!expanded);

-  const styles = {
-    container: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center"
-    },
-    left: {
-      flexGrow: 1,
-      margin: "0 0.5rem"
-    },
-    right: { margin: "0 0.5rem" }
-  };
  let unit = "";
  if (props.type === "pct") unit = "%";
  if (props.type === "deg") unit = "°";

+  let option = (
+    <FormFieldSlider
+      name={props.name}
+      value={value}
+      min={props.min}
+      max={props.max}
+      step={props.type === "count" ? 1 : props.step}
+      onChange={update}
+      label={"po-" + props.type + "-" + props.name}
+      updateValue={update}
+    />)
+
  return (
    <li>
      <OptionPreamble
@ -65,19 +65,8 @@ const PatternOptionPctDegCount = props => {
            value: props.name
          })
        }
+        option={option}
      />
-      {!expanded ? null : (
-        <FormFieldSlider
-          name={props.name}
-          value={value}
-          min={props.min}
-          max={props.max}
-          step={props.type === "count" ? 1 : props.step}
-          onChange={update}
-          label={"po-" + props.type + "-" + props.name}
-          updateValue={update}
-        />
-      )}
    </li>
  );
 };
--- a/packages/components/src/PatternOptions/index.js
+++ b/packages/components/src/PatternOptions/index.js
@ -10,8 +10,7 @@ import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
 import List from "@material-ui/core/List";
 import ListSubheader from "@material-ui/core/ListSubheader";
-import CollapsedIcon from "@material-ui/icons/ArrowDropDown";
-import ExpandedIcon from "@material-ui/icons/ArrowRight";
+import DownIcon from "@material-ui/icons/KeyboardArrowDown";

 const PatternOptions = props => {
  const [expanded, setExpanded] = useState([]);
@ -49,11 +48,7 @@ const PatternOptions = props => {
    output.push(
      <li className={open ? "expanded" : "collapsed"} key={group + "-ghead"}>
        <h3 onClick={() => toggleGroup(group)}>
-          {open ? (
-            <CollapsedIcon className="collapse-icon" />
-          ) : (
-            <ExpandedIcon className="collapse-icon" />
-          )}
+          <DownIcon className={"icon-col-exp "+ (open ? "expanded" : "collapsed")}/>
          <FormattedMessage id={"optiongroups." + group} />
        </h3>
        {children}
--- a/packages/css-theme/package.json
+++ b/packages/css-theme/package.json
@ -22,6 +22,7 @@
    "clean": "rimraf ../../dist/css-theme",
    "nodebuild": "BABEL_ENV=production rollup -c -o ../../dist/css-theme/index.js -f cjs",
    "modulebuild": "BABEL_ENV=production rollup -c -o ../../dist/css-theme/index.mjs -f es",
+    "watch": "npx node-sass --watch --output-style compressed src/theme.scss ../../dist/css-theme/theme.css",
    "build": "npx node-sass --output-style compressed src/theme.scss ../../dist/css-theme/theme.css",
    "test": "echo \"css-theme: No tests configured. Perhaps you'd like to do this?\" && exit 0",
    "pubtest": "npm publish --registry http://localhost:6662"
--- a/packages/css-theme/src/_variables.scss
+++ b/packages/css-theme/src/_variables.scss
@ -1,6 +1,6 @@
 $fc-bg-light: $oc-gray-0;
 $fc-bg-dark: $oc-gray-9;
-$fc-notice-light: $oc-lime-9;
+$fc-notice-light: $oc-yellow-7;
 $fc-notice-dark: $oc-lime-3;
 $fc-hoverbg-light: $oc-gray-1;
 $fc-hoverbg-dark: $oc-gray-8;
--- a/packages/css-theme/src/components/_pattern-options.scss
+++ b/packages/css-theme/src/components/_pattern-options.scss
@ -1,49 +1,77 @@
+ul.nav.l1 { overflow-x: hidden;}
 ul.nav.l1,
 ul.nav.l2,
-ul.nav.l3 {
-  margin-left: 0.5rem;
+ul.nav.l3,
+ul.nav.l4 {
+  margin: 0;
  padding: 0;
  @include title-font;
 }

 ul.nav li {list-style-type: none;}
-
+ul.nav p { @include body-font;}
+ul.nav.l4 li { padding-left: 0.75rem; }
 ul.nav h2,
 ul.nav h3,
-ul.nav h4 {
+ul.nav h4,
+ul.nav h5 {
  font-weight: normal;
  display: block;
  margin: 0;
-  padding: 0.5rem;
+  padding: 0.5rem 0.25rem;
 }
-ul.nav h2:hover,
 ul.nav h3:hover,
 ul.nav h4:hover {
  cursor: pointer;
  background: $fc-hoverbg-light;
 }
 ul.nav h2 { font-size: 1.2rem; }
-ul.nav h3 { font-size: 1.1rem; }
 ul.nav h4 { font-size: 1rem; }
-
-li.zdsfsdfptiongroup-heading,
-li.option-headdsg {
+ul.nav h5 { font-size: 1rem; padding-left: 1.5rem; font-weight: bold;}
+ul.nav h3 {
+  font-size: 1.1rem;
+  position: sticky;
+  top: 0;
  background: $fc-bg-light;
  z-index: 3;
-  h3, h4 {
+}
+ul.nav span.custom {
+  color: $fc-notice-light;
+  font-weight: bold;
+}
+.col-exp {
+  transition: max-height 0.3s ease-in-out, opacity 0.2s ease 0.2s;
+}
+
+.col-exp.expanded {
+  margin-top: 0;
+  opacity: 1;
+}
+.col-exp.collapsed {
+  opacity: 0;
+  max-height: 0;
+  overflow-y: hidden;
+}
+
+svg.icon-col-exp {
+  margin-bottom: -5px;
+  margin-right: 5px;
+  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
+  opacity: 0.4;
+}
+svg.icon-col-exp.expanded {
+  transform: scale(-1);
+  opacity: 1;
+}
+
+ul.nav.l3 div.col-exp {
+  margin: 0 27px;
+}
+
+button.mini-icon-btn {
  margin: 0;
-    svg.collapse-icon { margin-bottom: -5px;}
-  }
-}
-li.optiongroup-heafsding:hover {
-  cursor: pointer;
-  background: $fc-hoverbg-light;
+  padding: 2px;
 }
+
 body.dark {
-  li.optisdfsdongroup-heading {
-    background: $fc-bg-dark;
-  }
-  li.optiongrsdfsdoup-heading:hover {
-    background: $fc-hoverbg-dark;
-  }
 }