Skip to content

Commit

Permalink
Merge pull request binary-com#12 from aaron-binary/scratch-blocks-too…
Browse files Browse the repository at this point in the history
…lbox

Blocks Library
  • Loading branch information
Mahboobeh-binary committed Jun 27, 2019
1 parent bff12ad commit 9d29ad0
Show file tree
Hide file tree
Showing 16 changed files with 548 additions and 349 deletions.
6 changes: 3 additions & 3 deletions packages/deriv-bot/.stylelintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/deriv-bot/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
1 change: 1 addition & 0 deletions packages/deriv-bot/src/assets/icons/ic-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/deriv-bot/src/assets/sass/_bot.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import './base/typography';

.main {
background: rgba(206, 17, 17, 0.5);
}
16 changes: 16 additions & 0 deletions packages/deriv-bot/src/assets/sass/base/typography.scss
Original file line number Diff line number Diff line change
@@ -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;
}
7 changes: 7 additions & 0 deletions packages/deriv-bot/src/assets/sass/scratch/_flyout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.blocklyFlyoutBackground {
height: calc(100% - 60px) !important;
fill: #fff !important;
fill-opacity: 0.95 !important;
stroke: #ebebeb;
stroke-width: 5px;
}
213 changes: 103 additions & 110 deletions packages/deriv-bot/src/assets/sass/scratch/_toolbox.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
15 changes: 15 additions & 0 deletions packages/deriv-bot/src/assets/sass/scratch/_workspace.scss
Original file line number Diff line number Diff line change
@@ -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;
}
11 changes: 6 additions & 5 deletions packages/deriv-bot/src/components/Icons.jsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
4 changes: 3 additions & 1 deletion packages/deriv-bot/src/components/workspace.jsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading

0 comments on commit 9d29ad0

Please sign in to comment.