From aed595a0c9b97d71a760c641038da7f90448030b Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Fri, 13 May 2016 17:24:56 -0500 Subject: [PATCH 1/9] Styles for Library Component --- dist/index.html | 6 +++ dist/styles.css | 89 ++++++++++++++++++++++++++++++- src/components/LambdaBricksApp.js | 6 +-- src/components/Library.js | 38 ++++--------- src/components/Module.js | 16 ++---- 5 files changed, 109 insertions(+), 46 deletions(-) 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..37e5880 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1,10 +1,97 @@ 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: 16px; + line-height: 1.5; +} + +h1, h2, h3, h4, h5 { + font-weight: normal; +} + +/*::-webkit-scrollbar { + width: 7px; +} */ + +#main { height: 100%; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + width: 100%; +} + +.app { + background-color: #f0f3f6; + /*box-shadow: 0 0 3px #ccc;*/ + left: 0; + /*margin: 0 auto;*/ + min-height: 100vh; + padding-left: 230px; + position: relative; + transition: left 0.3s ease, padding-left 0.3s ease; + width: 100%; +} + +#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 { + background-color: #333e48; + 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; } #customValueInput input[type=radio] { diff --git a/src/components/LambdaBricksApp.js b/src/components/LambdaBricksApp.js index 750b714..a20a31e 100644 --- a/src/components/LambdaBricksApp.js +++ b/src/components/LambdaBricksApp.js @@ -4,16 +4,12 @@ import { UNIT_TEST } from './constants' import Library from '../containers/Library' 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/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 } From 1dba9062a96098b3c6ced552d97e6871fedfd354 Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Mon, 16 May 2016 18:31:23 -0500 Subject: [PATCH 2/9] Only allow to create unit test if workspace type is UNIT_TEST --- src/containers/MainBrick.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/MainBrick.js b/src/containers/MainBrick.js index cdc112c..a650457 100644 --- a/src/containers/MainBrick.js +++ b/src/containers/MainBrick.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import { addPipeOrSelectSlot } from '../actions' -import { CLEAN } from '../components/constants' +import { UNIT_TEST } from '../components/constants' import { handleSelectElement } from '../utils' import MainBrick from '../components/MainBrick' @@ -9,7 +9,7 @@ const mapDispatchToProps = (dispatch, ownProps) => { const { workspaceType } = ownProps return { - handleClick: workspaceType != CLEAN ? handleSelectElement(dispatch) : () => { }, + handleClick: workspaceType == UNIT_TEST ? handleSelectElement(dispatch) : () => { }, selectBrickInputSlot: (elementId, slotId) => { dispatch(addPipeOrSelectSlot('input', elementId, slotId)) }, From da8344ccb977f3bc004640a72612423df088d348 Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Mon, 16 May 2016 19:34:12 -0500 Subject: [PATCH 3/9] Add logo as a Component --- dist/styles.css | 15 ++++++++++++++- src/components/LambdaBricksApp.js | 2 ++ src/components/Logo.js | 11 +++++++++++ src/components/Tutorial.js | 2 ++ 4 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 src/components/Logo.js diff --git a/dist/styles.css b/dist/styles.css index 37e5880..533f156 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -41,6 +41,19 @@ h1, h2, h3, h4, h5 { width: 100%; } +#logo { + background-color: #3a4651; + box-sizing: border-box; + color: white; + font-size: 16px; + left: 0; + line-height: 70px; + padding-left: 25px; + position: fixed; + top: 0; + width: 230px; +} + #library { background-color: #3a4651; bottom: 0; @@ -55,6 +68,7 @@ h1, h2, h3, h4, h5 { } #library h2 { + font-size: 14px; padding-left: 20px; } @@ -81,7 +95,6 @@ h1, h2, h3, h4, h5 { } .nav li { - background-color: #333e48; color: rgba(255, 255, 255, 0.5); cursor: pointer; margin: 0; diff --git a/src/components/LambdaBricksApp.js b/src/components/LambdaBricksApp.js index a20a31e..f473133 100644 --- a/src/components/LambdaBricksApp.js +++ b/src/components/LambdaBricksApp.js @@ -2,6 +2,7 @@ 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' export default class LambdaBricksApp extends Component { @@ -10,6 +11,7 @@ export default class LambdaBricksApp extends Component { return (
        +
        diff --git a/src/components/Logo.js b/src/components/Logo.js new file mode 100644 index 0000000..4c2ad46 --- /dev/null +++ b/src/components/Logo.js @@ -0,0 +1,11 @@ +import React, { Component, PropTypes } from 'react' + +export default class Logo extends Component { + render() { + return ( + + ) + } +} diff --git a/src/components/Tutorial.js b/src/components/Tutorial.js index 93bfad1..0ba2550 100644 --- a/src/components/Tutorial.js +++ b/src/components/Tutorial.js @@ -5,6 +5,7 @@ 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' @@ -80,6 +81,7 @@ export default class Tutorial extends Component { return (
        +
        Date: Mon, 16 May 2016 20:51:22 -0500 Subject: [PATCH 4/9] Styles for Tutorial Component --- dist/styles.css | 47 +++++++++++++++++++++++++++++++++-- src/components/Tutorial.js | 16 +++--------- src/utils/translationUtils.js | 4 +-- 3 files changed, 51 insertions(+), 16 deletions(-) diff --git a/dist/styles.css b/dist/styles.css index 533f156..a2a5b46 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -9,7 +9,7 @@ html, body { } body { - font-size: 16px; + font-size: 14px; line-height: 1.5; } @@ -17,6 +17,24 @@ 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; +} + /*::-webkit-scrollbar { width: 7px; } */ @@ -68,7 +86,6 @@ h1, h2, h3, h4, h5 { } #library h2 { - font-size: 14px; padding-left: 20px; } @@ -107,6 +124,31 @@ h1, h2, h3, h4, h5 { 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: 480px; +} + +.tutorial #logo { + width: 480px; +} + +.tutorial #library { + left: 250px; +} + #customValueInput input[type=radio] { display: none; } @@ -140,5 +182,6 @@ h1, h2, h3, h4, h5 { } .code { + color: rgba(255, 255, 255, 0.9); font-weight: bold; } diff --git a/src/components/Tutorial.js b/src/components/Tutorial.js index 0ba2550..4bb935d 100644 --- a/src/components/Tutorial.js +++ b/src/components/Tutorial.js @@ -9,14 +9,6 @@ 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) @@ -30,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'), @@ -54,7 +46,7 @@ export default class Tutorial extends Component { }, { text: getMessage(props.locale, 'joyrideSteps.tutorial'), - selector: '#tutorial', + selector: '#instructions', position: 'right' } ] @@ -80,9 +72,9 @@ export default class Tutorial extends Component { const state = this.state return ( -
        +
        -
        +
        \

        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.\ From 01020fea5390094344d47c8157445c76d835c5a0 Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Tue, 17 May 2016 20:53:04 -0500 Subject: [PATCH 5/9] Style custom scrollbar --- dist/styles.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/dist/styles.css b/dist/styles.css index a2a5b46..1cb3c50 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -35,9 +35,19 @@ ol, ul { padding-left: 15px; } -/*::-webkit-scrollbar { +::-webkit-scrollbar { width: 7px; -} */ +} + +::-webkit-scrollbar-thumb { + background: #767D86; + border-radius: 0; +} + +::-webkit-scrollbar-track { + background-color: #2d363f; + border-radius: 0; +} #main { height: 100%; From 03a0d86c7eda80241bd47a60845504161a57207f Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Wed, 18 May 2016 18:00:11 -0500 Subject: [PATCH 6/9] Add svg brick inside Logo Component --- dist/styles.css | 18 +++++++++++++++--- src/components/Logo.js | 8 ++++++++ 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/dist/styles.css b/dist/styles.css index 1cb3c50..55ee27b 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -59,11 +59,12 @@ ol, ul { .app { background-color: #f0f3f6; + box-sizing: border-box; /*box-shadow: 0 0 3px #ccc;*/ left: 0; /*margin: 0 auto;*/ min-height: 100vh; - padding-left: 230px; + padding: 10px 10px 10px 240px; position: relative; transition: left 0.3s ease, padding-left 0.3s ease; width: 100%; @@ -76,12 +77,23 @@ ol, ul { font-size: 16px; left: 0; line-height: 70px; - padding-left: 25px; + 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; @@ -148,7 +160,7 @@ ol, ul { } .tutorial.app { - padding-left: 480px; + padding-left: 490px; } .tutorial #logo { diff --git a/src/components/Logo.js b/src/components/Logo.js index 4c2ad46..f680b81 100644 --- a/src/components/Logo.js +++ b/src/components/Logo.js @@ -4,6 +4,14 @@ export default class Logo extends Component { render() { return (

        ) From 2d7d3b7185a7c6e252f310f8a958e0587af1b5bf Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Wed, 18 May 2016 18:31:21 -0500 Subject: [PATCH 7/9] Style SelectedElementDialog Component --- dist/styles.css | 13 +++++++++++-- src/components/SelectedElementDialog.js | 24 ++++++++++-------------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/dist/styles.css b/dist/styles.css index 55ee27b..38318c2 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -171,6 +171,15 @@ ol, ul { left: 250px; } +.selectedElementDialog { + background-color: rgba(58, 70, 81, 0.9); + border: 2px solid black; + border-radius: 4px; + color: white; + padding: 20px 6px 6px; + position: absolute; +} + #customValueInput input[type=radio] { display: none; } @@ -189,7 +198,7 @@ ol, ul { } .closeBtn { - color: #551A8B; + color: white; font-size: 15px; line-height: 10px; position: absolute; @@ -199,7 +208,7 @@ ol, ul { } .closeBtn:hover, .closeBtn:focus, .closeBtn:active { - color: #551A8B; + color: white; text-decoration: none; } 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 ( -
        + From 8ae4a68f018a56aab00862fff640fc69de116768 Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Wed, 18 May 2016 18:39:26 -0500 Subject: [PATCH 8/9] Change WorkspaceSurface colors --- src/components/WorkspaceSurface.js | 2 +- src/components/constants.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/WorkspaceSurface.js b/src/components/WorkspaceSurface.js index 16097d1..6c7cf50 100644 --- a/src/components/WorkspaceSurface.js +++ b/src/components/WorkspaceSurface.js @@ -9,7 +9,7 @@ const workspaceSurfaceStyles = { } const surfaceStyles = { - backgroundColor: '#D8D8D8' + backgroundColor: 'white' } class WorkspaceSurface extends Component { diff --git a/src/components/constants.js b/src/components/constants.js index 9ce0e76..d136c5a 100644 --- a/src/components/constants.js +++ b/src/components/constants.js @@ -22,13 +22,13 @@ export const colors = { number: "#E9E759", string: "#E9A559", true: "#358DE2", - undefined: "#BFBFBF" + undefined: "#d8d8d8" } export const testColors = { failing: '#d87777', passing: '#77d877', - pending: '#d8d8d8' + pending: 'white' } export const LEFT = 0 From 68be688b7439f0c302561891575ec9dc9d4912a2 Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Mon, 23 May 2016 23:44:47 -0500 Subject: [PATCH 9/9] Style form elements --- dist/styles.css | 46 +++++++++++++++++-- .../ElementDetails/MainBrickDetails.js | 2 +- .../ElementDetails/PrimitiveDetails.js | 1 + .../ElementDetails/TestNodeDetails.js | 24 +++++----- 4 files changed, 54 insertions(+), 19 deletions(-) diff --git a/dist/styles.css b/dist/styles.css index 38318c2..2febca3 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -35,7 +35,39 @@ 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; } @@ -173,10 +205,9 @@ ol, ul { .selectedElementDialog { background-color: rgba(58, 70, 81, 0.9); - border: 2px solid black; border-radius: 4px; color: white; - padding: 20px 6px 6px; + padding: 20px 14px 10px; position: absolute; } @@ -185,12 +216,13 @@ ol, ul { } #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 { @@ -204,7 +236,7 @@ ol, ul { position: absolute; right: 6px; text-decoration: none; - top: 6px + top: 6px; } .closeBtn:hover, .closeBtn:focus, .closeBtn:active { @@ -212,6 +244,10 @@ ol, ul { 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" && - +
        + +
        }
        )