diff --git a/dist/index.html b/dist/index.html index 0fb6193..f2df552 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,6 +5,12 @@ + +
diff --git a/dist/styles.css b/dist/styles.css index 9eade4e..2febca3 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1,10 +1,214 @@ html, body { + color: #4f5f6f; + font-family: 'Open Sans', sans-serif; + height: 100%; margin: 0; + min-height: 100%; + overflow-x: hidden; padding: 0; } -html, body, #main { +body { + font-size: 14px; + line-height: 1.5; +} + +h1, h2, h3, h4, h5 { + font-weight: normal; +} + +h2, h3 { + font-size: 14px; +} + +a { + color: #59c2e6; + text-decoration: none; + transition: color 0.13s; +} + +a:hover { + color: #0b98ca; +} + +ol, ul { + padding-left: 15px; +} + +button { + background-color: #0b98ca; + border: 0; + color: white; + cursor: pointer; + padding: 6px 12px; + transition: background-color 0.13s; +} + +button:hover { + background-color: #219FCA; +} + +label { + display: inline-block; + width: 45px; +} + +select, input { + background-color: white; + border: 0; + font-size: 14px; + height: 26px; + padding: 3px 3px; + width: 200px; +} + +hr { + border-style: groove; +} + +::-webkit-scrollbar { + height: 7px; + width: 7px; +} + +::-webkit-scrollbar-thumb { + background: #767D86; + border-radius: 0; +} + +::-webkit-scrollbar-track { + background-color: #2d363f; + border-radius: 0; +} + +#main { height: 100%; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + width: 100%; +} + +.app { + background-color: #f0f3f6; + box-sizing: border-box; + /*box-shadow: 0 0 3px #ccc;*/ + left: 0; + /*margin: 0 auto;*/ + min-height: 100vh; + padding: 10px 10px 10px 240px; + position: relative; + transition: left 0.3s ease, padding-left 0.3s ease; + width: 100%; +} + +#logo { + background-color: #3a4651; + box-sizing: border-box; + color: white; + font-size: 16px; + left: 0; + line-height: 70px; + padding-left: 15px; + position: fixed; + top: 0; + width: 230px; +} + +.brick { + float: left; + height: 40px; + padding-top: 18px; + width: 50px; +} + +.brick rect { + fill: #79D1EF; +} + +#library { + background-color: #3a4651; + bottom: 0; + color: white; + font-size: 14px; + left: 0; + overflow-y: auto; + position: fixed; + top: 70px; + transition: left 0.3s ease; + width: 230px; +} + +#library h2 { + padding-left: 20px; +} + +.nav h3, .nav h4 { + color: white; + font-size: 14px; + margin: 0; +} + +.nav h3 { + background-color: #0b98ca; + padding: 15px 10px 15px 20px; +} + +.nav h4 { + background-color: #2d363f; + padding: 15px 10px 15px 40px; +} + +.nav ul { + list-style: none; + margin: 0; + padding-left: 0; +} + +.nav li { + color: rgba(255, 255, 255, 0.5); + cursor: pointer; + margin: 0; + padding: 10px 0 10px 40px; + transition: color 0.13s; +} + +.nav li:hover { + color: white; + background-color: #2d363f; +} + +#instructions { + background-color: #2d363f; + bottom: 0; + box-sizing: border-box; + color: rgba(255, 255, 255, 0.6); + left: 0; + overflow-y: auto; + padding: 10px; + position: fixed; + top: 70px; + width: 250px; +} + +.tutorial.app { + padding-left: 490px; +} + +.tutorial #logo { + width: 480px; +} + +.tutorial #library { + left: 250px; +} + +.selectedElementDialog { + background-color: rgba(58, 70, 81, 0.9); + border-radius: 4px; + color: white; + padding: 20px 14px 10px; + position: absolute; } #customValueInput input[type=radio] { @@ -12,12 +216,13 @@ html, body, #main { } #customValueInput input[type=radio] + label { - padding: 2px; border: 3px solid rgba(0, 0, 0, 0); color: white; display: inline-block; font-weight: bold; - margin: 3px 3px 0 0; + height: 20px; + margin-right: 3px; + padding-left: 3px; } #customValueInput input[type=radio]:checked + label { @@ -25,20 +230,25 @@ html, body, #main { } .closeBtn { - color: #551A8B; + color: white; font-size: 15px; line-height: 10px; position: absolute; right: 6px; text-decoration: none; - top: 6px + top: 6px; } .closeBtn:hover, .closeBtn:focus, .closeBtn:active { - color: #551A8B; + color: white; text-decoration: none; } +.topMargin { + margin-top: 5px; +} + .code { + color: rgba(255, 255, 255, 0.9); font-weight: bold; } diff --git a/src/components/ElementDetails/MainBrickDetails.js b/src/components/ElementDetails/MainBrickDetails.js index 3879c79..4ec8371 100644 --- a/src/components/ElementDetails/MainBrickDetails.js +++ b/src/components/ElementDetails/MainBrickDetails.js @@ -20,7 +20,7 @@ export default class MainBrickDetails extends Component { />
{ totalUnitTests > 1 && -
+
deleteUnitTest(workspaceIndex) } message="deleteUnitTest" diff --git a/src/components/ElementDetails/PrimitiveDetails.js b/src/components/ElementDetails/PrimitiveDetails.js index 8e7fd23..6a07d93 100644 --- a/src/components/ElementDetails/PrimitiveDetails.js +++ b/src/components/ElementDetails/PrimitiveDetails.js @@ -29,6 +29,7 @@ export default class PrimitiveDetails extends Component { value={ value } workspaceIndex={ workspaceIndex } /> +
deleteElement(id) } message="delete" diff --git a/src/components/ElementDetails/TestNodeDetails.js b/src/components/ElementDetails/TestNodeDetails.js index ac8aeda..9670b10 100644 --- a/src/components/ElementDetails/TestNodeDetails.js +++ b/src/components/ElementDetails/TestNodeDetails.js @@ -7,10 +7,6 @@ import { import CustomValueInput from './CustomValueInput' import TypesSelect from './TypesSelect' -const styles = { - width: 300 -} - export default class TestNodeDetails extends Component { render() { const { @@ -24,7 +20,7 @@ export default class TestNodeDetails extends Component { } = this.props return ( -
+
{ type != "null" && - +
+ +
}
) diff --git a/src/components/LambdaBricksApp.js b/src/components/LambdaBricksApp.js index 750b714..f473133 100644 --- a/src/components/LambdaBricksApp.js +++ b/src/components/LambdaBricksApp.js @@ -2,18 +2,16 @@ import React, { Component, PropTypes } from 'react' import { UNIT_TEST } from './constants' import Library from '../containers/Library' +import Logo from './Logo' import Workspace from '../containers/Workspace' -const styles = { - display: 'flex' -} - export default class LambdaBricksApp extends Component { render() { const { libraryId, workspaceType } = this.props return ( -
+
+
diff --git a/src/components/Library.js b/src/components/Library.js index 6f1bacf..a478278 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -4,19 +4,6 @@ import Module from './Module' import { PrimitivePropTypes } from '../propTypes' import Translate from './Translate' -const styles = { - width: '250px' -} - -const ulStyles = { - display: 'inline-block', - margin: 0 -} - -const primitiveStyles = { - cursor: 'pointer' -} - export default class Library extends Component { componentDidMount() { const { fetchLibrary, id } = this.props @@ -32,7 +19,7 @@ export default class Library extends Component { } = this.props return ( -
+ ) } } diff --git a/src/components/Logo.js b/src/components/Logo.js new file mode 100644 index 0000000..f680b81 --- /dev/null +++ b/src/components/Logo.js @@ -0,0 +1,19 @@ +import React, { Component, PropTypes } from 'react' + +export default class Logo extends Component { + render() { + return ( + + ) + } +} diff --git a/src/components/Module.js b/src/components/Module.js index b4f9555..4cdfec6 100644 --- a/src/components/Module.js +++ b/src/components/Module.js @@ -1,14 +1,5 @@ import React, { PropTypes, Component } from 'react' -const ulStyles = { - display: 'inline-block', - margin: 0 -} - -const libraryFunctionStyles = { - cursor: 'pointer' -} - export default class Module extends Component { render() { const { @@ -20,16 +11,15 @@ export default class Module extends Component { return (
-
  • +

    { label } -

    • -
      + +
        { functions.map((libraryFunction) => { return (
      • onFunctionClick(name, libraryFunction) } - style={ libraryFunctionStyles } title={ libraryFunction.title } > { libraryFunction.label } diff --git a/src/components/SelectedElementDialog.js b/src/components/SelectedElementDialog.js index ecc707b..44d754f 100644 --- a/src/components/SelectedElementDialog.js +++ b/src/components/SelectedElementDialog.js @@ -9,13 +9,6 @@ import { PrimitivePropTypes } from '../propTypes' -const baseStyles = { - backgroundColor: 'rgba(0, 0, 255, 0.5)', - borderRadius: 4, - padding: '20px 6px 6px', - position: 'absolute' -} - export default class SelectedElementDialog extends Component { render() { const { @@ -24,21 +17,24 @@ export default class SelectedElementDialog extends Component { mousePosition } = this.props - const styles = Object.assign({}, baseStyles, { - left: mousePosition.x, - top: mousePosition.y - }) - const ReactComponent = getDetailsComponent(componentName) return ( -
        + diff --git a/src/components/Tutorial.js b/src/components/Tutorial.js index 93bfad1..4bb935d 100644 --- a/src/components/Tutorial.js +++ b/src/components/Tutorial.js @@ -5,17 +5,10 @@ import { getMessage } from '../utils/translationUtils' import { getTutorialConfig } from './tutorialSteps' import Library from '../containers/Library' +import Logo from './Logo' import Translate from './Translate' import Workspace from '../containers/Workspace' -const styles = { - display: 'flex' -} - -const instructionStyles = { - width: 300 -} - export default class Tutorial extends Component { constructor(props) { super(props) @@ -29,7 +22,7 @@ export default class Tutorial extends Component { { text: getMessage(props.locale, 'joyrideSteps.window'), selector: '#window', - position: 'top-left' + position: 'top' }, { text: getMessage(props.locale, 'joyrideSteps.library'), @@ -53,7 +46,7 @@ export default class Tutorial extends Component { }, { text: getMessage(props.locale, 'joyrideSteps.tutorial'), - selector: '#tutorial', + selector: '#instructions', position: 'right' } ] @@ -79,8 +72,9 @@ export default class Tutorial extends Component { const state = this.state return ( -
        -
        +
        + +
        { const { workspaceType } = ownProps return { - handleClick: workspaceType != CLEAN ? handleSelectElement(dispatch) : () => { }, + handleClick: workspaceType == UNIT_TEST ? handleSelectElement(dispatch) : () => { }, selectBrickInputSlot: (elementId, slotId) => { dispatch(addPipeOrSelectSlot('input', elementId, slotId)) }, diff --git a/src/utils/translationUtils.js b/src/utils/translationUtils.js index b45fa04..81b04b8 100644 --- a/src/utils/translationUtils.js +++ b/src/utils/translationUtils.js @@ -46,9 +46,9 @@ const translations = { 3 and 4. And it gives the result of 7.

        \

        In the workspace you can do this kind of operations by connecting the constants\ as inputs to the functions.

        \ -

        Try doing a couple of operations now.\ +

        Try doing a couple of operations now\ (Here is a video showing\ - how to do it if you have any doubts)

        \ + how to do it if you have any doubts).

        \

        When you finish doing some operations click the button Next to continue.

        ", 'tutorialSteps.2': "

        We can manipulate not only numbers, we can also manipulate letters.\