VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(lab): Use locale and hover resize consistently

Browse source
This commit is contained in:
Joost De Cock 2022-01-27 18:07:37 +01:00
parent 2380b4f2db
commit e8d747a949
18 changed files with 162 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/freesewing.shared/components/workbench/draft/index.js
View file

@ -11,15 +11,15 @@ const LabDraft = ({ app, pattern, gist, updateGist }) => {
return (
<Svg {...patternProps}>
<Defs {...patternProps} />
<style>{`:root { --pattern-scale: ${gist.settings.scale || 1}}`}</style>
<style>{`:root { --pattern-scale: ${gist.scale || 1}}`}</style>
<g>
{Object.keys(patternProps.parts).map((name) => (
<Part
key={name}
part={patternProps.parts[name]}
language={gist.settings.locale}
paperless={gist.settings.paperless}
units={gist.settings.units}
locale={gist.locale}
paperless={gist.paperless}
units={gist.units}
name={name}
app={app}
/>

4
packages/freesewing.shared/components/workbench/draft/part/index.js
View file

@ -103,7 +103,7 @@ const Part = (props) => {
key={name}
name={name}
part={props.name}
language={props.language}
locale={props.locale}
path={props.part.paths[name]}
focus={props.focus}
topLeft={props.part.topLeft}
@ -118,7 +118,7 @@ const Part = (props) => {
key={name}
name={name}
part={props.name}
language={props.language}
locale={props.locale}
point={props.part.points[name]}
focus={props.focus}
topLeft={props.part.topLeft}

4
packages/freesewing.shared/components/workbench/draft/svg/index.js
View file

@ -3,7 +3,7 @@ import React from 'react'
const Svg = ({
embed = true,
develop = false,
language = 'en',
locale = 'en',
className = 'freesewing pattern',
style = {},
viewBox = false,
@ -15,7 +15,7 @@ const Svg = ({
xmlns: 'http://www.w3.org/2000/svg',
'xmlns:svg': 'http://www.w3.org/2000/svg',
xmlnsXlink: 'http://www.w3.org/1999/xlink',
xmlLang: language,
xmlLang: locale,
viewBox: viewBox || `0 0 ${width} ${height}`,
className,
style

2
packages/freesewing.shared/components/workbench/draft/text-on-path/index.js
View file

@ -3,7 +3,7 @@ const TextOnPath = (props) => {
// Handle translation
let translated = ''
for (let string of props.path.attributes.getAsArray('data-text')) {
translated += props.app.t(string, false, props.language).replace(/&quot;/g, '"') + ' '
translated += props.app.t(string, false, props.locale).replace(/&quot;/g, '"') + ' '
}
const textPathProps = {
xlinkHref: '#' + props.pathId,

2
packages/freesewing.shared/components/workbench/draft/text/index.js
View file

@ -3,7 +3,7 @@ const Text = (props) => {
// Handle translation
let translated = ''
for (let string of props.point.attributes.getAsArray('data-text')) {
translated += props.app.t(string.toString(), false, props.language).replace(/&quot;/g, '"') + ' '
translated += props.app.t(string.toString(), false, props.locale).replace(/&quot;/g, '"') + ' '
}
// Handle muti-line text
if (translated.indexOf('\n') !== -1) {

2
packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js
View file

@ -50,7 +50,7 @@ const DesignOptionPctDeg = props => {
return (
<div className="py-4 mx-6 border-l-2 pl-2">
<p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
{props.app.t(`options.${props.pattern.config.name}.${props.option}.description`, props.app.language)}
{props.app.t(`options.${props.pattern.config.name}.${props.option}.description`, props.app.locale)}
</p>
<div className="flex flex-row justify-between">
{editOption

9
packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
View file

@ -2,7 +2,7 @@ import { useState } from 'react'
const CoreSettingList = props => {
const { dflt, list } = props
const val = props.gist?.settings?.[props.setting]
const val = props.gist?.[props.setting]
const [value, setValue] = useState(val)
@ -10,10 +10,15 @@ const CoreSettingList = props => {
if (newVal === dflt) reset()
else {
setValue(newVal)
props.updateGist(['settings', props.setting], newVal)
props.updateGist([props.setting], newVal)
}
}
const reset = () => {
setValue(props.dflt)
props.updateGist([props.setting], props.dflt)
}
return (
<div className="py-4 mx-6 border-l-2 pl-2">
<p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">

73
packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js Normal file
View file

@ -0,0 +1,73 @@
import { useState } from 'react'
import { formatMm } from 'shared/utils.js'
import ClearIcon from 'shared/components/icons/clear.js'
import EditIcon from 'shared/components/icons/edit.js'
const CoreSettingMm = props => {
const { dflt, min, max } = props
const val = props.gist?.[props.setting]
const [value, setValue] = useState(val)
const handleChange = evt => {
const newVal = parseFloat(evt.target.value)
if (newVal === dflt) reset()
else {
setValue(newVal)
props.updateGist([props.setting], newVal)
}
}
const reset = () => {
setValue(props.dflt)
props.updateGist([props.setting], props.dflt)
}
return (
<div className="py-4 mx-6 border-l-2 pl-2">
<p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
{props.app.t(`settings.${props.setting}.description`)}
</p>
<div className="flex flex-row justify-between">
<span
className="opacity-50"
dangerouslySetInnerHTML={{__html: formatMm(min, props.gist.units)}}
/>
<span
className={`font-bold ${val===dflt ? 'text-secondary' : 'text-accent'}`}
dangerouslySetInnerHTML={{__html: formatMm(val, props.gist.units)}}
/>
<span
className="opacity-50"
dangerouslySetInnerHTML={{__html: formatMm(max, props.gist.units)}}
/>
</div>
<input
type="range"
max={max}
min={min}
step={0.1}
value={value}
onChange={handleChange}
className={`
range range-sm mt-1
${val === dflt ? 'range-secondary' : 'range-accent'}
`}
/>
<div className="flex flex-row justify-between">
<span />
<button
title={props.app.t('app.reset')}
className="btn btn-ghost btn-xs text-accent"
disabled={val === dflt}
onClick={reset}
>
<ClearIcon />
</button>
</div>
</div>
)
}
export default CoreSettingMm

11
packages/freesewing.shared/components/workbench/menu/core-settings/index.js
View file

@ -4,9 +4,16 @@ import Setting from './setting.js'
const settings = {
locale: {
dflt: 'en',
list: ['de', 'en', 'es', 'fr', 'nl'],
},
units: {
list: ['metric', 'imperial'],
},
margin: {
min: 0,
max: 25,
dflt: 2,
},
}
const CoreSettings = props => {
@ -22,7 +29,7 @@ const CoreSettings = props => {
items-center
`}>
<span className="text-secondary-focus mr-4"><SettingsIcon /></span>
<span className={`grow ${linkClasses}`}>
<span className={`grow ${linkClasses} hover:cursor-resize`}>
{props.app.t('app.settings')}
</span>
<Chevron />

70
packages/freesewing.shared/components/workbench/menu/core-settings/setting.js
View file

@ -2,70 +2,31 @@ import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
import CountOption from 'shared/components/workbench/inputs/design-option-count'
import ListSetting from './core-setting-list'
import MmSetting from './core-setting-mm'
import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
const settings = {
locale: props => {
return (
<span className="text-secondary">
{props.app.t(`i18n.${props.gist.settings.locale}`)}
{props.app.t(`i18n.${props.gist.locale}`)}
</span>
)
},
pct: props => {
const val = (typeof props.gist?.options?.[props.option] === 'undefined')
? props.pattern.config.options[props.option].pct/100
: props.gist.options[props.option]
units: props => {
return (
<span className={
val=== props.pattern.config.options[props.option].pct/100
? 'text-secondary'
: 'text-accent'
}>
{formatPercentage(val)}
{props.pattern.config.options[props.option]?.toAbs
? ' | ' +formatMm(props.pattern.config.options[props.option]?.toAbs(val, props.gist))
: null
}
<span className="text-secondary">
{props.app.t(`app.${props.gist.units}Units`)}
</span>
)
},
bool: props => {
const dflt = props.pattern.config.options[props.option].bool
const current = props.gist?.options?.[props.option]
margin: props => {
return (
<span className={
(dflt==current || typeof current === 'undefined')
? 'text-secondary'
: 'text-accent'
}>
{props.gist?.options?.[props.option]
? props.app.t('app.yes')
: props.app.t('app.no')
}
</span>
<span className="text-secondary" dangerouslySetInnerHTML={{
__html: formatMm(props.gist.margin, props.gist.units)
}} />
)
},
count: props => {
const dflt = props.pattern.config.options[props.option].count
const current = props.gist?.options?.[props.option]
return (dflt==current || typeof current === 'undefined')
? <span className="text-secondary">{dflt}</span>
: <span className="text-accent">{current}</span>
},
deg: props => {
const dflt = props.pattern.config.options[props.option].deg
const current = props.gist?.options?.[props.option]
return (dflt==current || typeof current === 'undefined')
? <span className="text-secondary">{dflt}&deg;</span>
: <span className="text-accent">{current}&deg;</span>
},
mm: props => {
return <p>No mm val yet</p>
},
constant: props => {
return <p>No constant val yet</p>
},
}
const Tmp = props => <p>not yet</p>
@ -73,14 +34,21 @@ const Tmp = props => <p>not yet</p>
const inputs = {
locale: props => <ListSetting
{...props}
list={props.app.languages.map(key => ({
list={props.config.list.map(key => ({
key,
title: props.app.t(`i18n.${key}`)
}))}
/>,
units: props => <ListSetting
{...props}
list={props.config.list.map(key => ({
key,
title: props.app.t(`app.${key}Units`)
}))}
/>,
margin: props => <MmSetting {...props} {...props.config} />,
}
const Setting = props => {
const Input = inputs[props.setting]
const Value = settings[props.setting]
@ -109,6 +77,7 @@ const Setting = props => {
<div className={`
grow pl-2 border-l-2
${linkClasses}
hover:cursor-pointer
hover:border-secondary
sm:hover:border-secondary-focus
text-base-content sm:text-neutral-content
@ -143,6 +112,7 @@ const Setting = props => {
<div className={`
grow pl-2 border-l-2
${linkClasses}
hover:cursor-resize
hover:border-secondary
sm:hover:border-secondary-focus
text-base-content sm:text-neutral-content

1
packages/freesewing.shared/components/workbench/menu/design-options/option-group.js
View file

@ -18,6 +18,7 @@ const OptionGroup = props => {
<div className={`
grow pl-2 border-l-2
${linkClasses}
hover:cursor-resize
hover:border-secondary
sm:hover:border-secondary-focus
text-base-content sm:text-neutral-content

1
packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js
View file

@ -16,6 +16,7 @@ const OptionSubGroup = props => {
<div className={`
grow pl-2 border-l-2
${linkClasses}
hover:cursor-resize
hover:border-secondary
sm:hover:border-secondary-focus
text-base-content sm:text-neutral-content

3
packages/freesewing.shared/components/workbench/menu/modes.js
View file

@ -37,7 +37,7 @@ const Modes = props => {
items-center
`}>
<span className="text-secondary-focus mr-4"><MenuIcon /></span>
<span className={`grow ${linkClasses}`}>
<span className={`grow ${linkClasses} hover:cursor-resize`}>
{props.app.t('app.modes')}
</span>
<Chevron />
@ -48,6 +48,7 @@ const Modes = props => {
<button title={entry.title} className={`
grow pl-2 border-l-2
${linkClasses}
hover:cursor-pointer
hover:border-secondary
sm:hover:border-secondary-focus
text-left