diff --git a/packages/components/src/.form/FormFieldBool/index.js b/packages/components/src/.form/FormFieldBool/index.js index ebff181992a..ff88f8dedd4 100644 --- a/packages/components/src/.form/FormFieldBool/index.js +++ b/packages/components/src/.form/FormFieldBool/index.js @@ -35,7 +35,7 @@ const Bool = props => { Bool.propTypes = { dflt: PropTypes.bool, - labels: PropTypes.arrayOf(PropTypes.string), + labels: PropTypes.array, updateValue: PropTypes.func.isRequired, name: PropTypes.string.isRequired }; diff --git a/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js index 02d1fd93002..e823f542213 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js @@ -70,8 +70,8 @@ const DraftSettingMargin = props => { DraftSettingMargin.propTypes = { raiseEvent: PropTypes.func.isRequired, updateValue: PropTypes.func.isRequired, - title: PropTypes.string.isRequired, - desc: PropTypes.string.isRequired, + title: PropTypes.node.isRequired, + desc: PropTypes.node.isRequired, units: PropTypes.oneOf(["metric", "imperial"]).isRequired, labels: PropTypes.array }; diff --git a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js index a651df48e0f..7a48f301505 100644 --- a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js @@ -114,10 +114,10 @@ const DraftSettingSa = props => { DraftSettingSa.propTypes = { raiseEvent: PropTypes.func.isRequired, updateValue: PropTypes.func.isRequired, - title: PropTypes.string.isRequired, - desc: PropTypes.string.isRequired, + title: PropTypes.node.isRequired, + desc: PropTypes.node.isRequired, units: PropTypes.oneOf(["metric", "imperial"]).isRequired, - labels: PropTypes.array + labels: PropTypes.object }; DraftSettingSa.defaultProps = { diff --git a/packages/components/src/DraftConfigurator/DraftSettings/index.js b/packages/components/src/DraftConfigurator/DraftSettings/index.js index cc921eefef4..6ffbb6ed316 100644 --- a/packages/components/src/DraftConfigurator/DraftSettings/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettings/index.js @@ -94,7 +94,7 @@ const DraftSettings = props => { let children = null; if (open) children = groups[group].map(component => component); return ( - +
  • { }; DraftSettings.propTypes = { - info: PropTypes.object.isRequired, + config: PropTypes.object.isRequired, gist: PropTypes.object.isRequired }; diff --git a/packages/components/src/DraftConfigurator/OptionPreamble/index.js b/packages/components/src/DraftConfigurator/OptionPreamble/index.js index 36eb6b56491..a00360d5fdf 100644 --- a/packages/components/src/DraftConfigurator/OptionPreamble/index.js +++ b/packages/components/src/DraftConfigurator/OptionPreamble/index.js @@ -41,7 +41,6 @@ const OptionPreamble = props => { dangerouslySetInnerHTML={{ __html: props.displayValue }} /> ); - return (

    @@ -93,11 +92,13 @@ const OptionPreamble = props => { OptionPreamble.propTypes = { dflt: PropTypes.oneOfType([ PropTypes.number.isRequired, - PropTypes.string.isRequired + PropTypes.string.isRequired, + PropTypes.bool.isRequired ]), value: PropTypes.oneOfType([ PropTypes.number.isRequired, - PropTypes.string.isRequired + PropTypes.string.isRequired, + PropTypes.bool.isRequired ]), title: PropTypes.node.isRequired, desc: PropTypes.node.isRequired, diff --git a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js index e9f7ea35e2c..a7cfb26c72b 100644 --- a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js +++ b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js @@ -60,7 +60,8 @@ PatternOptionBool.propTypes = { name: PropTypes.string.isRequired, dflt: PropTypes.oneOfType([ PropTypes.number.isRequired, - PropTypes.string.isRequired + PropTypes.string.isRequired, + PropTypes.bool.isRequired ]), title: PropTypes.node.isRequired, desc: PropTypes.node.isRequired, diff --git a/packages/components/src/Navbar/index.js b/packages/components/src/Navbar/index.js index 246758f0ab5..3640d0c6c6e 100644 --- a/packages/components/src/Navbar/index.js +++ b/packages/components/src/Navbar/index.js @@ -5,7 +5,7 @@ import Emblem from "../Emblem"; import { FormattedMessage } from "react-intl"; const Navbar = props => { - const renderNav = nav => { + const renderNav = (key, nav) => { let title = nav.title || nav.text; let text = typeof nav.text === "string" ? ( @@ -16,12 +16,12 @@ const Navbar = props => { if (nav.type === "component") return nav.component; else if (nav.type === "button") return ( - ); return ( - + {text} ); @@ -36,9 +36,13 @@ const Navbar = props => { - {props.navs.left.map(nav => renderNav(nav))} + {Object.keys(props.navs.left).map(key => + renderNav(key, props.navs.left[key]) + )}
    - {props.navs.right.map(nav => renderNav(nav))} + {Object.keys(props.navs.right).map(key => + renderNav(key, props.navs.right[key]) + )}
    ); diff --git a/packages/components/src/Workbench/index.js b/packages/components/src/Workbench/index.js index 826247e1364..cf8ec0ebd47 100644 --- a/packages/components/src/Workbench/index.js +++ b/packages/components/src/Workbench/index.js @@ -20,12 +20,9 @@ const Workbench = props => { const [pattern, setPattern] = useState(false); const [settings, setSettings] = useState(false); const [theme, setTheme] = useState("light"); - useEffect( - () => { - if (props.from) props.importGist(props.from); - }, - [props.from] - ); + useEffect(() => { + if (props.from) props.importGist(props.from); + }, [props.from]); const showLanguageChooser = () => setDisplay("language"); const toggleSettings = () => setSettings(!settings); @@ -42,37 +39,37 @@ const Workbench = props => { }; const navs = { - left: [ - { + left: { + docs: { type: "link", href: "https://freesewing.dev/", text: "app.docs" }, - { + help: { type: "link", href: "https://gitter.im/freesewing/freesewing/", text: "app.askForHelp" } - ], - right: [ - { + }, + right: { + version: { type: "link", href: "https://github.com/freesewing/freesewing", text: "v" + props.freesewing.version }, - { + language: { type: "button", onClick: () => setDisplay("languages"), text: , title: "Languages" }, - { + dark: { type: "button", onClick: toggleDarkMode, text: , title: "Toggle dark mode" } - ] + } }; let main = null; @@ -89,7 +86,7 @@ const Workbench = props => { main = ( { Workbench.propTypes = { freesewing: PropTypes.object.isRequired, - pattern: PropTypes.func.isRequired, + Pattern: PropTypes.func.isRequired, config: PropTypes.object.isRequired, from: PropTypes.object }; diff --git a/packages/components/src/Workbench/stories.js b/packages/components/src/Workbench/stories.js index 1f15ab9ccb6..b0ed932ae07 100644 --- a/packages/components/src/Workbench/stories.js +++ b/packages/components/src/Workbench/stories.js @@ -40,7 +40,7 @@ const gist = { const props = { freesewing, - pattern: () => "aaron", + Pattern: () => "aaron", config, from: gist }; diff --git a/packages/css-theme/src/components/_draft-configurator.scss b/packages/css-theme/src/components/_draft-configurator.scss index 09a34346acd..5d74abbe06f 100644 --- a/packages/css-theme/src/components/_draft-configurator.scss +++ b/packages/css-theme/src/components/_draft-configurator.scss @@ -36,7 +36,7 @@ ul.nav h3 { z-index: 3; } ul.nav span.custom { - color: $fc-notice-light; + color: $fc-bg-dark; font-weight: bold; } .col-exp { @@ -85,4 +85,7 @@ button.mini-icon-btn { cursor: pointer; background: $oc-gray-7; } + ul.nav span.custom { + color: $fc-bg-light; + } } diff --git a/packages/css-theme/src/components/_navbar.scss b/packages/css-theme/src/components/_navbar.scss index 80dfddae6c9..ea5e72e7345 100644 --- a/packages/css-theme/src/components/_navbar.scss +++ b/packages/css-theme/src/components/_navbar.scss @@ -7,7 +7,7 @@ header.navbar { margin: 0; padding: 0 26px; background: $fc-bg-dark; - z-index: 5; + z-index: 15; div.logo { height: 64px; diff --git a/packages/mui-theme/package.json b/packages/mui-theme/package.json index c7faf83c225..104b6fc04d3 100644 --- a/packages/mui-theme/package.json +++ b/packages/mui-theme/package.json @@ -24,7 +24,8 @@ "build": "npm run clean && npm run nodebuild && npm run modulebuild", "test": "echo \"mui-theme: No tests configured. Perhaps you'd like to do this?\" && exit 0", "pubtest": "npm publish --registry http://localhost:6662", - "publish": "npm build && npm publish --access=public --tag=alpha" + "publish": "npm build && npm publish --access=public --tag=alpha", + "watch": "rollup -c -w -o dist/index.mjs -f es" }, "peerDependencies": { "@material-ui/core": "^3.9.3", diff --git a/packages/mui-theme/src/index.js b/packages/mui-theme/src/index.js index 5cc1ee6044b..af45f472a7f 100644 --- a/packages/mui-theme/src/index.js +++ b/packages/mui-theme/src/index.js @@ -1,44 +1,56 @@ +const darkBg = "#212529"; +const lightBg = "#f8f9fa"; +const colors = { + light: { + primary: darkBg, + secondary: lightBg, + link: "#74c0fc", + paper: "#FFF" + }, + dark: { + primary: lightBg, + secondary: darkBg, + link: "#74c0fc", + paper: "#000" + } +}; const asTitle = { fontFamily: "Roboto Condensed", fontWeight: "bold" }; +const important = "!important"; -const theme = { - props: { - MuiButtonBase: { - //disableRipple: true // Disabling ripple everywhere +const getTheme = mode => { + let c = colors[mode]; + let forceColor = { + root: { + color: c.primary + important } - }, - overrides: { - MuiButton: { root: asTitle }, - MuiMenuItem: { root: asTitle }, - MuiListItemText: { primary: asTitle } - } + }; + return { + overrides: { + MuiButton: { root: asTitle }, + MuiMenuItem: { root: asTitle }, + MuiListItemText: { primary: asTitle }, + MuiRadio: forceColor, + MuiCheckbox: forceColor + }, + palette: { + primary: { + main: c.primary + }, + secondary: { + main: c.secondary + }, + type: mode, + background: { + paper: c.paper, + default: c.secondary + } + }, + themeName: mode + }; }; -const darkBg = "#212529"; -const lightBg = "#f8f9fa"; - -const palettes = { - dark: { - primary: { main: lightBg }, - secondary: { main: darkBg }, - type: "dark", - background: { - paper: "#212529", - default: "#343a40" - } - }, - light: { - primary: { main: darkBg }, - secondary: { main: lightBg }, - type: "light", - background: { - paper: "#FFF", - default: "#f8f9fa" - } - } -}; - -export const dark = { ...theme, palette: palettes.dark, themeName: "Dark" }; -export const light = { ...theme, palette: palettes.light, themeName: "Light" }; +export const light = getTheme("light"); +export const dark = getTheme("dark");