Blocks Library

.stylelintrc

@@ -46,12 +46,12 @@
     "no-extra-semicolons"                              : true,
     "no-invalid-double-slash-comments"                 : true,
     "number-leading-zero"                              : "always",
-    "number-max-precision"                             : 2,
+    "number-max-precision"                             : 3,
     "number-no-trailing-zeros"                         : true,
     "property-case"                                    : "lower",
     "plugin/no-unsupported-browser-features"           : [true, {
-      "severity": "error",
-      "ignore": ["calc", "user-select-none", "multicolumn", "css-appearance","pointer"]
+      "severity": "warning",
+      "ignore": ["calc", "user-select-none", "multicolumn", "css-appearance", "border-radius", "pointer"]
     }],
     "rule-empty-line-before"                           : ["always", { "ignore": ["after-comment"], "except": ["inside-block-and-after-rule", "first-nested"] }],
     "selector-attribute-brackets-space-inside"         : "never",

package.json

@@ -19,7 +19,7 @@
     "start": "eslint ./src && rimraf dist &&  webpack-dev-server --mode=development --open 'Google Chrome' --hot --inline --port 80",
     "test": "eslint ./src && jest -w 10 --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
     "gh-pages": "gh-pages --dist '.' --src '{index.html,manifest.json,dist/**,CNAME}'",
-    "gh-pages:folder": "yarn gh-pages --src '{index.html,manifest.json,dist/**}' --dest $1",
+    "gh-pages:folder": "gh-pages --dist '.' --src '{index.html,manifest.json,dist/**}' --dest",
     "release": "d() { test -z $1 && echo 'Please specify branch.' && exit 1; (git show-branch $1) || exit 1;  git stash; git checkout $1; npm i; rm -rf branch/$1; mkdir -p branch/$1 ; gulp build-min; cp -r www/ branch/$1; gulp release-branch --branch $1;}; d",
     "release-production": "d() { git stash; git checkout master; npm i;gulp build-min;gulp release-master;}; d"
   },

src/assets/sass/_bot.scss

@@ -1,3 +1,5 @@
+@import './base/typography';
+
 .main {
     background: rgba(206, 17, 17, 0.5);
 }

src/assets/sass/base/typography.scss

@@ -0,0 +1,16 @@
+@at-root {
+    @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=latin,vietnamese,cyrillic-ext,latin-ext,cyrillic');
+}
+
+$FONT_STACK: roboto, sans-serif;
+
+*, html, .body {
+    font-family: $FONT_STACK;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    box-sizing: border-box;
+}

src/assets/sass/scratch/_flyout.scss

@@ -0,0 +1,7 @@
+.blocklyFlyoutBackground {
+    height: calc(100% - 60px) !important;
+    fill: #fff !important;
+    fill-opacity: 0.95 !important;
+    stroke: #ebebeb;
+    stroke-width: 5px;
+}

src/assets/sass/scratch/_toolbox.scss

@@ -1,122 +1,115 @@
-@mixin toolbox-button-base {
-    background-color: $brand-gray;
-    color: $black;
-    padding: 0em;
-    width: 40px;
-    height: 40px;
-    font-size: 1.5em;
-}
-
-@mixin toolbox-button-focus {
-    outline: none; /* stylelint-disable-line */
-}
-
-@mixin toolbox-runButton-disabled {
-    background-color: $brand-gray;
-    color: $brand-dark-gray;
-}
-
-@mixin toolbox-runButton-hover {
-    background-color: $toolbox-btn-active;
-}
-
-#toolbox {
-    background-color: $brand-gray;
-    border-bottom: 1px solid $brand-dark-gray;
-    padding: 2px 3px;
-    z-index: 0;
-    overflow: auto;
+$category-colours: (
+    trade-definition: #303f9f,
+    before-purchase : #00897b,
+    during-purchase : #78909c,
+    after-purchase  : #d81b60,
+    mathematical    : #689f38,
+    logic           : #8e24aa,
+    text            : #fb8c00,
+    variables       : #5d4037,
+    functions       : #1976d2,
+    loop            : #e53935,
+    list            : #00acc1,
+    indicators      : #616161,
+    time            : #afb42b,
+    tick-analysis   : #2e7d32,
+    candle          : #5e35b1,
+    miscellaneous   : #ffb300,
+);
+
+.toolbox {
+    $toolbox  : &;
+    $white    : #fff;
+    $lightgrey: #ebebeb;
+    $grey     : #f4f4f6;
+
+    background-color: $white;
+    border: 1px solid $lightgrey;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    max-height: calc(100% - 40px) !important;
+    overflow: hidden;
+    position: absolute;
+    user-select: none;
+    z-index: 99 !important;
 
-    #runButton[disabled], #runButton[disabled]:hover {
-        @include toolbox-runButton-disabled;
-    }
-    .toolbox-button {
-        @include toolbox-button-base;
-    }
-    .toolbox-button:hover {
-        @include toolbox-runButton-hover;
-    }
-    .toolbox-button:focus {
-        @include toolbox-button-focus;
+    &__header {
+        font-weight: bold;
+        background-color: $grey;
     }
-    .box.is-dragover {
-        background-color: #808080;
+    &__category-menu {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+        overflow: auto;
     }
-    .toolbox-separator {
-        background-color: $brand-dark-gray;
-        display: inline-block;
-        height: 15px;
-        margin: 0 5px;
-        user-select: none;
-        width: 2px;
+    &__row {
+        cursor: pointer;
+        border-top: 1px solid $lightgrey;
     }
-}
-
-#toolbox-login {
-    margin-top: 1px;
-    margin-right: 20px;
-}
-
-#toolbox-account {
-    display: table;
-    height: 40px;
-}
-
-#toolbox-account-list {
-    position: relative;
-    user-select: none;
-    display: table-cell;
-    vertical-align: middle;
-    padding-right: 20px;
-
-    & > a {
-        color: $black;
-
-        &:hover, &:visited {
-            text-decoration: none;
-        }
+    &__header, &__label {
+        font-size: 1em;
+        padding: 0.6em 1em;
     }
-}
-
-#toolbox-main-account {
-    display: inline;
-    padding-inline-start: 0;
-
-    & > li {
-        display: inline;
-        margin: 0 2px;
+    &__title {
+        margin-right: 0.6em;
     }
-    & > li:not(:first-child):not(:last-child):before {
-        content: '\2022';
-        margin-right: 7px;
+    &__arrow {
+        cursor: pointer;
+        position: absolute;
+        top: 0.6em;
+        right: 0.6em;
+        transform: rotate(90deg);
+        transition: transform 0.25s ease;
     }
-    & > .nav-caret {
-        display: inline-block;
+    &__item {
+        position: relative;
     }
-}
-
-#toolbox-all-accounts {
-    border: 0;
-    z-index: 100;
-    margin-top: -1px;
-    background: none;
-    right: 20px;
-
-    & li {
+    &__color {
+        position: absolute;
+        left: 0;
+        width: 4px;
         height: 100%;
-
-        & a {
-            margin-top: 0;
+    }
+    &--collapsed {
+        #{$toolbox}__header, #{$toolbox}__item {
+            padding: 0.6em;
+        }
+        #{$toolbox}__color {
+            position: relative;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+        }
+        #{$toolbox}__title, #{$toolbox}__label {
+            display: none;
+        }
+        #{$toolbox}__arrow {
+            position: relative;
+            transform: rotate(270deg);
+            margin-top: -2px;
+            top: 0;
+            right: -2px;
+        }
+        #{$toolbox}__row {
+            border-top: none;
         }
     }
-}
-
-button {
-    & > .barspinner.white {
-        position: relative;
-        margin: 3px auto;
-        height: 13px;
-        top: initial; /* stylelint-disable-line */
-        left: initial; /* stylelint-disable-line */
+    @each $category, $category-colour in $category-colours {
+        &__category--#{$category}#{&}__category--selected {
+            background-color: transparentize($category-colour, 0.9);
+        }
+        &__category--#{$category} {
+            &:hover {
+                background-color: transparentize($category-colour, 0.95);
+            }
+            & > #{$toolbox}__color {
+                background-color: $category-colour;
+            }
+        }
     }
-}
+}

src/assets/sass/scratch/_workspace.scss

@@ -0,0 +1,15 @@
+#scratch_area {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+#scratch_div {
+    position: absolute;
+    top: 0px !important;
+    left: 0px !important;
+}
+
+.blocklyText {
+    fill: #000 !important;
+}

src/components/Icons.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import logo from '../assets/icons/ic-logo.svg';
-import tradeActive from '../assets/icons/ic-trade-active.svg';
-// import arrowIcon from '../assets/icons/ic-trade-active.svg';
+import React        from 'react';
+import arrow        from '../assets/icons/ic-arrow.svg';
+import logo         from '../assets/icons/ic-logo.svg';
+import tradeActive  from '../assets/icons/ic-trade-active.svg';
+
 /* eslint-disable react/display-name */
 export const Icon = svgItem => (props) => {
     const { className } = props;
@@ -16,4 +17,4 @@ export const Icon = svgItem => (props) => {
 
 export const LogoIcon = Icon(logo);
 export const TradeActive = Icon(tradeActive);
-export const ArrowIcon = Icon(tradeActive);
+export const ArrowIcon = Icon(arrow);

src/components/workspace.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import            '../assets/sass/scratch/_blockly-toolbox.scss';
+import            '../assets/sass/scratch/_workspace.scss';
+import            '../assets/sass/scratch/_toolbox.scss';
+import            '../assets/sass/scratch/_flyout.scss';
 
 const Workspace = () => (
     <React.Fragment>

src/scratch/blocks/Binary/Trade Definition/trade_definition_tradeoptions.js

@@ -23,7 +23,7 @@ Blockly.Blocks.trade_definition_tradeoptions = {
                 {
                     type   : 'field_dropdown',
                     name   : 'CURRENCY_LIST',
-                    options: config.lists.CURRENCY,
+                    options: [['USD', 'USD']], // TODO: Don't use hardcoded currency.
                 },
                 {
                     type : 'input_value',