feat(components): Updates to workbench
This commit is contained in:
Joost De Cock
parent
6010f26be2
commit
56305ce397
7 changed files with 140 additions and 87 deletions
|
|
@ -16,6 +16,7 @@ const PatternOptionMillimeter = ({
|
|||
updateValue,
|
||||
name,
|
||||
dflt,
|
||||
raiseEvent,
|
||||
noDocs
|
||||
}) => {
|
||||
const [val, setVal] = useState(dflt)
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ const DraftPattern = (props) => {
|
|||
}
|
||||
|
||||
let focusCount = 0
|
||||
if (focus !== null) {
|
||||
for (let p of Object.keys(focus)) {
|
||||
for (let i in focus[p].points) focusCount++
|
||||
for (let i in focus[p].paths) focusCount++
|
||||
for (let i in focus[p].coords) focusCount++
|
||||
if (props.focus !== null) {
|
||||
for (let p of Object.keys(props.focus)) {
|
||||
for (let i in props.focus[p].points) focusCount++
|
||||
for (let i in props.focus[p].paths) focusCount++
|
||||
for (let i in props.focus[p].coords) focusCount++
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@ const Welcome = props => {
|
|||
container: {
|
||||
textAlign: "center",
|
||||
maxWidth: "500px",
|
||||
margin: "5vh auto",
|
||||
minHeight: "65vh"
|
||||
margin: "0 auto",
|
||||
},
|
||||
bigButton: {
|
||||
margin: "0.5rem",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')}>
|
||||
<span>{props.config.name}</span>
|
||||
<span style={{ color: '#ced4da', fontSize: '80%' }}>.FreeSewing.dev</span>
|
||||
</Button>
|
||||
|
||||
<Button {...buttonProps} href="https://chat.freesewing.org/">
|
||||
<Icon style={{ ...iconStyle }} icon="discord" />
|
||||
{/*<FormattedMessage id="app.chatOnDiscord" />*/}
|
||||
</Button>
|
||||
<a role="button" href='#' className='navlink' onClick={() => props.setDisplay(null)}>
|
||||
<Logo />
|
||||
<br />
|
||||
<span className="text">{props.config.name}</span>
|
||||
</a>
|
||||
<span style={style.spacer} />
|
||||
{Object.keys(icons).map((link) => {
|
||||
return (
|
||||
<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}
|
||||
</Button>
|
||||
<br />
|
||||
<span className="text">{props.config.version}</span>
|
||||
</a>
|
||||
|
||||
<Button
|
||||
href="#"
|
||||
onClick={() => props.setDisplay('languages')}
|
||||
active={props.display === 'languages' ? true : false}
|
||||
>
|
||||
<LanguageIcon className="nav-icon" />
|
||||
</Button>
|
||||
|
||||
<IconButton
|
||||
style={style.darkModeButton}
|
||||
aria-label="menu"
|
||||
onClick={props.toggleDarkMode}
|
||||
title={props.theme}
|
||||
>
|
||||
<a role="button" href='#i18n' className='navlink' onClick={() => props.setDisplay('languages')}>
|
||||
<LanguageIcon />
|
||||
<br />
|
||||
<span className="text"><FormattedMessage id={`i18n.${props.language}`}/></span>
|
||||
</a>
|
||||
<a role="button" href='#theme' className='navlink theme' onClick={props.toggleDarkMode}>
|
||||
{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>
|
||||
|
|
|
|||
47
packages/components/src/Workbench/style.scss
Normal file
47
packages/components/src/Workbench/style.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue