feat(components): Updated workbench to latest style changes

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

@@ -5,6 +5,7 @@ import Design from '../Design'
 import DraftConfigurator from '../../DraftConfigurator'
 import fileSaver from 'file-saver'
 import theme from '@freesewing/plugin-theme'
+import Icon from '../../Icon'
 import IconButton from '@material-ui/core/IconButton'
 import DesignIcon from '@material-ui/icons/Fingerprint'
 import DumpIcon from '@material-ui/icons/LocalSee'
@@ -12,8 +13,10 @@ import ClearIcon from '@material-ui/icons/HighlightOff'
 import AdvancedIcon from '@material-ui/icons/Policy'
 import PaperlessIcon from '@material-ui/icons/Nature'
 import CompleteIcon from '@material-ui/icons/Style'
-import HideIcon from '@material-ui/icons/ChevronLeft'
+import { FormattedMessage } from 'react-intl'
 import Events from './Events'
+import ActionsIcon from '@material-ui/icons/PlayCircleOutline'
+import Switch from '@material-ui/core/Switch';
 
 const DraftPattern = (props) => {
   const styles = {
@@ -48,65 +51,89 @@ const DraftPattern = (props) => {
   const color = (check) => (check ? '#40c057' : '#fa5252')
 
   return (
-    <div>
-      <div style={{ margin: '1rem auto 0', textAlign: 'center' }}>
-        <IconButton onClick={() => props.setHideAside(true)} title="Hide sidebar" {...iconProps}>
-          <HideIcon />
-        </IconButton>
-        <IconButton
-          onClick={() => props.setDesign(!props.design)}
-          title="Toggle design mode"
-          {...iconProps}
-        >
-          <span style={{ color: color(props.design) }}>
+    <ul id='draft-config'>
+      <li>
+        <span title='Actions'>
+          <ActionsIcon />
+          <FormattedMessage id="app.actions" />
+        </span>
+        <ul className="config level-1">
+          <li className={`action toggle ${props.design ? 'on' : 'off'}`}>
+            <span onClick={() => props.setDesign(!props.design)} title='Toggle design mode'>
               <DesignIcon />
+              <FormattedMessage
+                id={ props.design ? 'cfp.thingIsEnabled' : 'cfp.thingIsDisabled' }
+                values={{ thing: <FormattedMessage id='cfp.designMode' /> }}
+              />
+              <Switch
+                color="primary"
+                name="design"
+                checked={props.design}
+                onChange={() => props.setDesign(!props.design)}
+              />
             </span>
-        </IconButton>
-        {props.design && (
-          <IconButton
-            onClick={() => props.raiseEvent('clearFocusAll', null)}
-            title="Clear design mode"
-            {...iconProps}
-          >
-            <ClearIcon color="primary" />
-          </IconButton>
-        )}
-        <IconButton
-          onClick={() => console.log(props.pattern)}
-          title="console.log(pattern)"
-          {...iconProps}
-        >
-          <DumpIcon color="primary" />
-        </IconButton>
-        |
-        <IconButton
-          onClick={() => props.updateGist(!props.gist.settings.advanced, 'settings', 'advanced')}
-          title="Toggle advanced settings"
-          {...iconProps}
-        >
-          <span style={{ color: color(props.gist.settings.advanced) }}>
+          </li>
+          <li className={`action toggle ${props.gist.settings.advanced ? 'on' : 'off'}`}>
+            <span onClick={() => props.updateGist(!props.gist.settings.advanced, 'settings', 'advanced')} title='Toggle advanced settings'>
               <AdvancedIcon />
+              <FormattedMessage
+                id={ props.gist.settings.advanced ? 'cfp.thingIsEnabled' : 'cfp.thingIsDisabled' }
+                values={{ thing: <FormattedMessage id='settings.advanced.title' /> }}
+              />
+              <Switch
+                color="primary"
+                name="advanced"
+                checked={props.gist.settings.advanced || false}
+                onClick={() => props.updateGist(!props.gist.settings.advanced, 'settings', 'advanced')}
+              />
             </span>
-        </IconButton>
-        <IconButton
-          onClick={() => props.updateGist(!props.gist.settings.paperless, 'settings', 'paperless')}
-          title="Toggle paperless"
-          {...iconProps}
-        >
-          <span style={{ color: color(props.gist.settings.paperless) }}>
+          </li>
+          <li className={`action toggle ${props.gist.settings.paperless ? 'on' : 'off'}`}>
+            <span onClick={() => props.updateGist(!props.gist.settings.paperless, 'settings', 'paperless')} title='Toggle paperless'>
               <PaperlessIcon />
+              <FormattedMessage
+                id={ props.gist.settings.paperless ? 'cfp.thingIsEnabled' : 'cfp.thingIsDisabled' }
+                values={{ thing: <FormattedMessage id='settings.paperless.title' /> }}
+              />
+              <Switch
+                color="primary"
+                name="paperless"
+                checked={props.gist.settings.paperless}
+                onChange={() => props.updateGist(!props.gist.settings.paperless, 'settings', 'paperless')}
+              />
             </span>
-        </IconButton>
-        <IconButton
-          onClick={() => props.updateGist(!props.gist.settings.complete, 'settings', 'complete')}
-          title="Toggle complete"
-          {...iconProps}
-        >
-          <span style={{ color: color(props.gist.settings.complete) }}>
+          </li>
+          <li className={`action toggle ${props.gist.settings.complete ? 'on' : 'off'}`}>
+            <span onClick={() => props.updateGist(!props.gist.settings.complete, 'settings', 'complete')} title='Toggle complete'>
               <CompleteIcon />
+              <FormattedMessage
+                id={ props.gist.settings.complete ? 'cfp.thingIsEnabled' : 'cfp.thingIsDisabled' }
+                values={{ thing: <FormattedMessage id='settings.complete.title' /> }}
+              />
+              <Switch
+                color="primary"
+                name="complete"
+                checked={props.gist.settings.complete}
+                onChange={() => props.updateGist(!props.gist.settings.complete, 'settings', 'complete')}
+              />
             </span>
-        </IconButton>
-      </div>
+          </li>
+          <li className="action">
+            <span onClick={() => console.log(props.pattern)} title='Log pattern object to console'>
+              <DumpIcon color="primary" />
+              console.log(pattern)
+            </span>
+          </li>
+          {props.design && (
+            <li className="action">
+              <span onClick={() => props.raiseEvent('clearFocusAll', null)} title='Clear design mode'>
+                <ClearIcon color="primary" />
+                <FormattedMessage id="cfp.clearDesignMode" />
+              </span>
+            </li>
+          )}
+        </ul>
+      </li>
       {props.design && (
         <Design
           focus={props.focus}
@@ -124,10 +151,10 @@ const DraftPattern = (props) => {
         freesewing={props.freesewing}
         units={props.units || 'metric'}
       />
-      <div style={{ padding: '5px', marginTop: '1rem' }}>
+      <li className='zoombox'>
         <Zoombox patternProps={props.patternProps} setViewBox={props.setViewBox} />
-      </div>
-    </div>
+      </li>
+    </ul>
   )
 }
 

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

@@ -37,7 +37,7 @@ const DraftPattern = (props) => {
   }
 
   return (
-    <section>
+    <>
       <Draft
         {...props.patternProps}
         design={props.design}
@@ -47,7 +47,7 @@ const DraftPattern = (props) => {
         className="freesewing draft shadow"
       />
       <Events events={props.patternProps.events} />
-    </section>
+    </>
   )
 }
 

packages/components/src/Workbench/Footer.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import Logo from '../Logo'
+
+const Footer = (props) => {
+
+  return (
+    <footer>
+      <div className="cols">
+        <div>
+          <ul>
+            <li className="heading">
+              Wie ben jij?
+            </li>
+            <li>Ik ben <a href="https://github.com/joostdecock">Joost</a></li>
+          </ul>
+        </div>
+        <div>
+          <ul>
+            <li className="heading">
+              Wat is dit?
+            </li>
+            <li>Lessen informatica, maar dan zonder dat geouwehoer dat je in een school te horen krijgt</li>
+          </ul>
+        </div>
+        <div>
+          <ul>
+            <li className="heading">
+              Voor wie is het?
+            </li>
+            <li>Origineel voor Katleen en Sorcha, maar voor iedereen mag meedoen</li>
+          </ul>
+        </div>
+        <div>
+          <ul>
+            <li className="heading">
+              Klopt er iets niet?
+            </li>
+            <li>
+              Dan kan je dat gewoon <a href="https://github.com/joostdecock/cursus">
+                zelf aanpassen op Github
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <div className="logo">
+            <a href="https://freesewing.org/" title='freesewing.org'>
+              <Logo size={100} />
+            </a>
+            <div className="name">
+              <span className="free">Free</span>Sewing
+            </div>
+          </div>
+          <div className="slogan">
+            Come for the sewing patterns
+            <br />
+            Stay for the community
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default React.memo(Footer)

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

@@ -8,37 +8,19 @@ const Welcome = props => {
     container: {
       textAlign: "center",
       maxWidth: "500px",
-      margin: "2vh auto"
-    },
-    title: {
-      fontFamily: "Roboto Condensed"
-    },
-    button: {
-      margin: "0.5rem"
+      margin: "5vh auto",
+      minHeight: "65vh"
     },
     bigButton: {
       margin: "0.5rem",
-      width: "calc(100% - 1rem)"
+      width: "calc(100% - 3rem)"
     },
-    footer: {
-      fontFamily: "Roboto Condensed",
-      position: "fixed",
-      bottom: "10px",
-      left: 0,
-      width: "100%",
-      fontSize: "90%"
   }
-  };
 
   return (
-    <React.Fragment>
-      <div />
-      <div className="fs-sa">
     <section style={styles.container}>
-          <div>
-            <Logo size={250} />
-          </div>
-          <h1 style={styles.title}>
+      <Logo size={200} />
+      <h1>
         <FormattedMessage id="app.welcome" />
       </h1>
       <p>
@@ -65,10 +47,7 @@ const Welcome = props => {
         <FormattedMessage id="cfp.testYourPattern" />
       </Button>
     </section>
-      </div>
-      <div />
-    </React.Fragment>
-  );
-};
+  )
+}
 
 export default Welcome;

packages/components/src/Workbench/index.js

@@ -24,6 +24,7 @@ import svgattrPlugin from '@freesewing/plugin-svgattr'
 import Xport from './Export'
 import axios from 'axios'
 import yaml from 'yaml'
+import Footer from './Footer'
 
 const icons = {
   draft: <DraftIcon />,
@@ -32,6 +33,8 @@ const icons = {
   xport: <ExportIcon />
 }
 
+const extraTranslations = {}
+
 const Workbench = ({
   updateGist,
   setLanguage,
@@ -44,8 +47,13 @@ const Workbench = ({
   units = 'metric',
   translations = false,
   addTranslations,
-  recreate = false
+  recreate = false,
 }) => {
+
+  if (translations) {
+    for (let key in translations) extraTranslations[key] = translations[key]
+  }
+
   const [display, setDisplay] = useState(null)
   const [theme, setTheme] = useState('light')
   const [measurements, setMeasurements] = useState(null)
@@ -164,7 +172,7 @@ const Workbench = ({
   //const raiseEvent = (type = null, data = null) => {}
 
   const MainMenu = () => (
-    <ul className="aside-main-menu">
+    <ul id="main-menu" className="aside-main-menu">
       {Object.keys(icons).map((link) => {
         return (
           <li key={link}>
@@ -211,7 +219,7 @@ const Workbench = ({
   }
 
   let main = null
-  let context = null
+  let preMenu = null
   let pattern
   switch (display) {
     case 'languages':
@@ -223,19 +231,6 @@ const Workbench = ({
           {languageButtons()}
         </>
       )
-      context = (
-        <ul>
-          {Object.keys(languages).map((lang) => {
-            return (
-              <li key={lang}>
-                <a href="#" onClick={() => setLanguage(lang)}>
-                  {languages[lang]}
-                </a>
-              </li>
-            )
-          })}
-        </ul>
-      )
       break
     case 'draft':
       if (measurementsMissing()) {
@@ -263,7 +258,7 @@ const Workbench = ({
           design={design}
         />
       )
-      context = (
+      preMenu = (
         <DraftConfig
           freesewing={freesewing}
           Pattern={Pattern}
@@ -292,7 +287,7 @@ const Workbench = ({
         setDisplay('measurements')
         break
       }
-      context = (
+      preMenu = (
         <SampleConfigurator
           config={config}
           gist={gist}
@@ -365,8 +360,10 @@ const Workbench = ({
           setDisplay={setDisplay}
           toggleDarkMode={toggleDarkMode}
           config={config}
+          theme={theme}
         />
-        <div className="fs-sa" style={{ position: 'relative' }}>
+        <div className="layout-wrapper">
+          <div className="layout">
             {hideAside ? (
               <a href="#" style={styles.unhide} onClick={() => setHideAside(false)}>
                 <UnhideIcon />
@@ -374,14 +371,16 @@ const Workbench = ({
             ) : (
               <aside>
                 <div className="sticky">
+                  {preMenu}
                   <MainMenu />
-                <div className="aside-context">{context}</div>
                 </div>
               </aside>
             )}
             <section>{main}</section>
           </div>
         </div>
+        <Footer />
+      </div>
     </MuiThemeProvider>
   )
 }
@@ -391,5 +390,5 @@ export default withLanguage(
     gist: defaultGist,
     store: true
   }),
-  'en'
+  'en', false, extraTranslations
 )

packages/components/src/Workbench/navbar.js

@@ -2,10 +2,12 @@ import React, { useState } from 'react'
 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 Logo from '../Logo'
 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'
 
 export default function ButtonAppBar(props) {
@@ -20,7 +22,7 @@ export default function ButtonAppBar(props) {
       width: '100%',
       margin: 0,
       padding: 0,
-      background: props.theme === 'dark' ? colors.light : colors.dark,
+      background: '#1a1d21',
       zIndex: 15
     },
     logo: {
@@ -35,7 +37,6 @@ export default function ButtonAppBar(props) {
       padding: '0 18px'
     },
     iconButton: {
-      color: colors[props.theme]
     },
     icon: {
       maxWidth: '24px',
@@ -48,7 +49,8 @@ export default function ButtonAppBar(props) {
     darkModeIcon: {
       transform: 'rotate(26deg)',
       maxWidth: '24px',
-      maxHeight: '24px'
+      maxHeight: '24px',
+      color: '#ffe066'
     }
   }
 
@@ -61,16 +63,15 @@ export default function ButtonAppBar(props) {
 
   const iconStyle = {
     marginRight: '0.5rem',
-    color: props.theme === 'dark' ? '#b197fc' : '#845ef7'
   }
 
   return (
     <div style={style.wrapper}>
-      <AppBar position="static" color="secondary" elevation={0}>
+      <AppBar position="static" color="transparent" elevation={2}>
         <Toolbar disableGutters={true}>
           <Button {...buttonProps} href="#" onClick={() => props.setDisplay('null')}>
             <span>{props.config.name}</span>
-            <span style={{ color: '#845ef7', fontSize: '80%' }}>.FreeSewing.dev</span>
+            <span style={{ color: '#ced4da', fontSize: '80%' }}>.FreeSewing.dev</span>
           </Button>
 
           <Button {...buttonProps} href="https://chat.freesewing.org/">
@@ -93,9 +94,18 @@ export default function ButtonAppBar(props) {
             <LanguageIcon className="nav-icon" />
           </Button>
 
-          <Button onClick={props.toggleDarkMode} href="#">
-            <DarkModeIcon className="nav-icon moon" />
-          </Button>
+          <IconButton
+            style={style.darkModeButton}
+            aria-label="menu"
+            onClick={props.toggleDarkMode}
+            title={props.theme}
+          >
+            {props.theme === 'dark' ? (
+              <LightModeIcon style={style.icon} />
+            ) : (
+              <DarkModeIcon style={style.darkModeIcon} />
+            )}
+          </IconButton>
         </Toolbar>
       </AppBar>
     </div>