feat(components): Updates to workbench

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

@@ -16,6 +16,7 @@ const PatternOptionMillimeter = ({
   updateValue,
   name,
   dflt,
+  raiseEvent,
   noDocs
 }) => {
   const [val, setVal] = useState(dflt)

packages/components/src/Workbench/DraftPattern/index.js

@@ -26,11 +26,11 @@ const DraftPattern = (props) => {
   }
 
   let focusCount = 0
-  if (focus !== null) {
+  if (props.focus !== null) {
-    for (let p of Object.keys(focus)) {
+    for (let p of Object.keys(props.focus)) {
-      for (let i in focus[p].points) focusCount++
+      for (let i in props.focus[p].points) focusCount++
-      for (let i in focus[p].paths) focusCount++
+      for (let i in props.focus[p].paths) focusCount++
-      for (let i in focus[p].coords) focusCount++
+      for (let i in props.focus[p].coords) focusCount++
     }
   }
 

packages/components/src/Workbench/Measurements/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Button from '@material-ui/core/Button'
-import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 import FormFieldMeasurement from '../../.form/FormFieldMeasurement'
 import { withBreasts, withoutBreasts } from '@freesewing/models'
 import Icon from '../../Icon'
@@ -43,7 +43,7 @@ const Measurements = (props) => {
             <FormattedMessage id="cfp.noRequiredMeasurements" />
           </h3>
           <p>
-            <FormattedHTMLMessage id="cfp.howtoAddMeasurements" />
+            <FormattedMessage id="cfp.howtoAddMeasurements" />
           </p>
           <p>
             <FormattedMessage id="cfp.seeDocsAt" />

packages/components/src/Workbench/Welcome/index.js

@@ -8,8 +8,7 @@ const Welcome = props => {
     container: {
       textAlign: "center",
       maxWidth: "500px",
-      margin: "5vh auto",
+      margin: "0 auto",
-      minHeight: "65vh"
     },
     bigButton: {
       margin: "0.5rem",

packages/components/src/Workbench/index.js

@@ -25,6 +25,7 @@ import Xport from './Export'
 import axios from 'axios'
 import yaml from 'yaml'
 import Footer from './Footer'
+import './style.scss'
 
 const icons = {
   draft: <DraftIcon />,
@@ -171,25 +172,6 @@ const Workbench = ({
   }
   //const raiseEvent = (type = null, data = null) => {}
 
-  const MainMenu = () => (
-    <ul id="main-menu" className="aside-main-menu">
-      {Object.keys(icons).map((link) => {
-        return (
-          <li key={link}>
-            <a
-              href={`#test`}
-              onClick={() => setDisplay(link)}
-              className={link === display ? 'active' : ''}
-            >
-              {icons[link]}
-              <span className="text">{links[link]}</span>
-            </a>
-          </li>
-        )
-      })}
-    </ul>
-  )
-
   const languageButtons = () => (
     <p>
       {Object.keys(languages).map((lang) => {
@@ -224,12 +206,12 @@ const Workbench = ({
   switch (display) {
     case 'languages':
       main = (
-        <>
+        <div style={{textAlign: 'center'}}>
           <h1>
             <FormattedMessage id="account.languageTitle" />
           </h1>
           {languageButtons()}
-        </>
+        </div>
       )
       break
     case 'draft':
@@ -299,7 +281,10 @@ const Workbench = ({
       )
       if (!gist.settings.sample) main = null
       else {
-        pattern = new Pattern(gist.settings).use(svgattrPlugin, {
+        pattern = new Pattern({
+          ...gist.settings,
+          embed: true
+        }).use(svgattrPlugin, {
           class: 'freesewing draft'
         })
         try {
@@ -341,7 +326,7 @@ const Workbench = ({
       main = (
         <>
           <Welcome language={language} setDisplay={setDisplay} />
-          <div style={{ margin: 'auto', textAlign: 'center' }}>{languageButtons()}</div>
+          <div style={{textAlign: 'center'}}>{languageButtons()}</div>
         </>
       )
   }
@@ -361,7 +346,10 @@ const Workbench = ({
           toggleDarkMode={toggleDarkMode}
           config={config}
           theme={theme}
+          language={language}
         />
+        {(['draft', 'sample'].indexOf(display) !== -1)
+          ? (
             <div className="layout-wrapper">
               <div className="layout">
                 {hideAside ? (
@@ -372,13 +360,13 @@ const Workbench = ({
                   <aside>
                     <div className="sticky">
                       {preMenu}
-                  <MainMenu />
                     </div>
                   </aside>
                 )}
                 <section>{main}</section>
               </div>
             </div>
+          ) : <div className='fill'><div className='inner'>{main}</div></div> }
         <Footer />
       </div>
     </MuiThemeProvider>

packages/components/src/Workbench/navbar.js

@@ -3,11 +3,16 @@ import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Button from '@material-ui/core/Button'
 import IconButton from '@material-ui/core/IconButton'
-//import { FormattedMessage } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 import Icon from '../Icon'
 import LanguageIcon from '@material-ui/icons/Translate'
 import LightModeIcon from '@material-ui/icons/WbSunny'
 import DarkModeIcon from '@material-ui/icons/Brightness3'
+import DraftIcon from '@material-ui/icons/Gesture'
+import TestIcon from '@material-ui/icons/DoneAll'
+import MeasurementsIcon from '@material-ui/icons/Height'
+import ExportIcon from '@material-ui/icons/ScreenShare'
+import Logo from '../Logo'
 
 export default function ButtonAppBar(props) {
 
@@ -20,13 +25,6 @@ export default function ButtonAppBar(props) {
       background: '#1a1d21',
       zIndex: 15
     },
-    logo: {
-      textDecoration: 'none',
-      height: '42px',
-      width: '42px',
-      padding: '11px',
-      display: 'inline-block'
-    },
     button: {
       height: '64px',
       padding: '0 18px'
@@ -46,7 +44,7 @@ export default function ButtonAppBar(props) {
       maxWidth: '24px',
       maxHeight: '24px',
       color: '#ffe066'
-    }
+    },
   }
 
   const buttonProps = {
@@ -60,47 +58,67 @@ export default function ButtonAppBar(props) {
     marginRight: '0.5rem',
   }
 
+  const icons = {
+    draft: <DraftIcon />,
+    sample: <TestIcon />,
+    measurements: <MeasurementsIcon />,
+    xport: <ExportIcon />
+  }
+  const links = {
+    draft: <FormattedMessage id="cfp.draftThing" values={{ thing: props.config.name }} />,
+    sample: <FormattedMessage id="cfp.testThing" values={{ thing: props.config.name }} />,
+    measurements: <FormattedMessage id="app.measurements" />,
+    xport: <FormattedMessage id="app.export" />
+  }
+
   return (
     <div style={style.wrapper}>
       <AppBar position="static" color="transparent" elevation={2}>
         <Toolbar disableGutters={true}>
-          <Button {...buttonProps} href="#" onClick={() => props.setDisplay('null')}>
+          <a role="button" href='#' className='navlink' onClick={() => props.setDisplay(null)}>
-            <span>{props.config.name}</span>
+            <Logo />
-            <span style={{ color: '#ced4da', fontSize: '80%' }}>.FreeSewing.dev</span>
+            <br />
-          </Button>
+            <span className="text">{props.config.name}</span>
-
+          </a>
-          <Button {...buttonProps} href="https://chat.freesewing.org/">
+          <span style={style.spacer} />
-            <Icon style={{ ...iconStyle }} icon="discord" />
+          {Object.keys(icons).map((link) => {
-            {/*<FormattedMessage id="app.chatOnDiscord" />*/}
+            return (
-          </Button>
+              <a role="button" href={`#${link}`} className={`navlink ${props.display===link ? 'active' : ''}`} onClick={() => props.setDisplay(link)}>
+                {icons[link]}
+                <br />
+                <span className="text">{links[link]}</span>
+              </a>
+            )
+          })}
 
           <span style={style.spacer} />
 
-          <Button {...buttonProps} href="https://github.com/freesewing/freesewing/tags">
+          <a href='https://discord.freesewing.org/' className='navlink'>
+            <Icon style={{ ...iconStyle }} icon="discord" />
+            <br />
+            <span className="text"><FormattedMessage id="app.askForHelp" /></span>
+          </a>
+
+          <a href="https://github.com/freesewing/freesewing/tags" className='navlink'>
             <Icon style={{ ...iconStyle }} icon="github" />
-            {props.config.version}
+            <br />
-          </Button>
+            <span className="text">{props.config.version}</span>
+          </a>
 
-          <Button
+          <a role="button" href='#i18n' className='navlink' onClick={() => props.setDisplay('languages')}>
-            href="#"
+            <LanguageIcon />
-            onClick={() => props.setDisplay('languages')}
+            <br />
-            active={props.display === 'languages' ? true : false}
+            <span className="text"><FormattedMessage id={`i18n.${props.language}`}/></span>
-          >
+          </a>
-            <LanguageIcon className="nav-icon" />
+          <a role="button" href='#theme' className='navlink theme' onClick={props.toggleDarkMode}>
-          </Button>
-
-          <IconButton
-            style={style.darkModeButton}
-            aria-label="menu"
-            onClick={props.toggleDarkMode}
-            title={props.theme}
-          >
             {props.theme === 'dark' ? (
-              <LightModeIcon style={style.icon} />
+              <LightModeIcon tyle={style.icon} />
             ) : (
-              <DarkModeIcon style={style.darkModeIcon} />
+              <DarkModeIcon tyle={style.darkModeIcon} />
             )}
-          </IconButton>
+            <br />
+            <span className="text"><FormattedMessage id={`app.${props.theme === 'dark' ? 'dark' : 'light'}Mode`}/></span>
+          </a>
         </Toolbar>
       </AppBar>
     </div>

packages/components/src/Workbench/style.scss

@@ -0,0 +1,47 @@
+
+div.workbench.theme-wrapper {
+  > div > header {
+    a.navlink {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #f8f9fa;
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 1rem;
+      font-weight: 500;
+      padding: 1.5rem 1rem 1rem !important;
+      svg {
+        color: inherit;
+        width: 42px;
+        height: 42px;
+        margin-bottom: 12px;
+      }
+    }
+    a.navlink.theme svg {
+      transform: rotate(26deg);
+      color: #ffe066;
+    }
+    a.navlink.active svg {
+      color: #51cf66;
+    }
+    a.logo:hover,
+    a.navlink:hover {
+      color: #d0bfff;
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+  }
+  div.fill {
+    width: 100%;
+    margin: 0;
+    div.inner {
+      max-width: 1200px;
+      padding: 3rem;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      min-height: 50vh;
+    }
+  }
+}