Skip to content
This repository was archived by the owner on Jul 24, 2019. It is now read-only.

Commit dc9ea4e

Browse files
Mahboobeh-binaryMahboobeh-binary
authored
Merge pull request #12 from aaron-binary/scratch-blocks-toolbox
Blocks Library
2 parents 3519508 + be8cedd commit dc9ea4e

File tree

16 files changed

+548
-349
lines changed

16 files changed

+548
-349
lines changed

‎.stylelintrc‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@
4646
"no-extra-semicolons" : true,
4747
"no-invalid-double-slash-comments" : true,
4848
"number-leading-zero" : "always",
49-
"number-max-precision" : 2,
49+
"number-max-precision" : 3,
5050
"number-no-trailing-zeros" : true,
5151
"property-case" : "lower",
5252
"plugin/no-unsupported-browser-features" : [true, {
53-
"severity": "error",
54-
"ignore": ["calc", "user-select-none", "multicolumn", "css-appearance","pointer"]
53+
"severity": "warning",
54+
"ignore": ["calc", "user-select-none", "multicolumn", "css-appearance", "border-radius", "pointer"]
5555
}],
5656
"rule-empty-line-before" : ["always", { "ignore": ["after-comment"], "except": ["inside-block-and-after-rule", "first-nested"] }],
5757
"selector-attribute-brackets-space-inside" : "never",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"start": "eslint ./src && rimraf dist && webpack-dev-server --mode=development --open 'Google Chrome' --hot --inline --port 80",
2020
"test": "eslint ./src && jest -w 10 --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
2121
"gh-pages": "gh-pages --dist '.' --src '{index.html,manifest.json,dist/**,CNAME}'",
22-
"gh-pages:folder": "yarn gh-pages --src '{index.html,manifest.json,dist/**}' --dest $1",
22+
"gh-pages:folder": "gh-pages --dist '.' --src '{index.html,manifest.json,dist/**}' --dest",
2323
"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",
2424
"release-production": "d() { git stash; git checkout master; npm i;gulp build-min;gulp release-master;}; d"
2525
},

‎src/assets/icons/ic-arrow.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/sass/_bot.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import './base/typography';
2+
13
.main {
24
background: rgba(206, 17, 17, 0.5);
35
}

‎src/assets/sass/base/typography.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@at-root {
2+
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=latin,vietnamese,cyrillic-ext,latin-ext,cyrillic');
3+
}
4+
5+
$FONT_STACK: roboto, sans-serif;
6+
7+
*, html, .body {
8+
font-family: $FONT_STACK;
9+
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
10+
text-rendering: optimizeLegibility;
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
-webkit-text-size-adjust: 100%;
14+
-ms-text-size-adjust: 100%;
15+
box-sizing: border-box;
16+
}

‎src/assets/sass/scratch/_flyout.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.blocklyFlyoutBackground {
2+
height: calc(100% - 60px) !important;
3+
fill: #fff !important;
4+
fill-opacity: 0.95 !important;
5+
stroke: #ebebeb;
6+
stroke-width: 5px;
7+
}

‎src/assets/sass/scratch/_toolbox.scss‎

Lines changed: 103 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,115 @@
1-
@mixin toolbox-button-base {
2-
background-color: $brand-gray;
3-
color: $black;
4-
padding: 0em;
5-
width: 40px;
6-
height: 40px;
7-
font-size: 1.5em;
8-
}
9-
10-
@mixin toolbox-button-focus {
11-
outline: none; /* stylelint-disable-line */
12-
}
13-
14-
@mixin toolbox-runButton-disabled {
15-
background-color: $brand-gray;
16-
color: $brand-dark-gray;
17-
}
18-
19-
@mixin toolbox-runButton-hover {
20-
background-color: $toolbox-btn-active;
21-
}
22-
23-
#toolbox {
24-
background-color: $brand-gray;
25-
border-bottom: 1px solid $brand-dark-gray;
26-
padding: 2px 3px;
27-
z-index: 0;
28-
overflow: auto;
1+
$category-colours: (
2+
trade-definition: #303f9f,
3+
before-purchase : #00897b,
4+
during-purchase : #78909c,
5+
after-purchase : #d81b60,
6+
mathematical : #689f38,
7+
logic : #8e24aa,
8+
text : #fb8c00,
9+
variables : #5d4037,
10+
functions : #1976d2,
11+
loop : #e53935,
12+
list : #00acc1,
13+
indicators : #616161,
14+
time : #afb42b,
15+
tick-analysis : #2e7d32,
16+
candle : #5e35b1,
17+
miscellaneous : #ffb300,
18+
);
19+
20+
.toolbox {
21+
$toolbox : &;
22+
$white : #fff;
23+
$lightgrey: #ebebeb;
24+
$grey : #f4f4f6;
25+
26+
background-color: $white;
27+
border: 1px solid $lightgrey;
28+
border-top-right-radius: 10px;
29+
border-bottom-right-radius: 10px;
30+
display: flex;
31+
flex-direction: column;
32+
margin-top: 20px;
33+
max-height: calc(100% - 40px) !important;
34+
overflow: hidden;
35+
position: absolute;
36+
user-select: none;
37+
z-index: 99 !important;
2938

30-
#runButton[disabled], #runButton[disabled]:hover {
31-
@include toolbox-runButton-disabled;
32-
}
33-
.toolbox-button {
34-
@include toolbox-button-base;
35-
}
36-
.toolbox-button:hover {
37-
@include toolbox-runButton-hover;
38-
}
39-
.toolbox-button:focus {
40-
@include toolbox-button-focus;
39+
&__header {
40+
font-weight: bold;
41+
background-color: $grey;
4142
}
42-
.box.is-dragover {
43-
background-color: #808080;
43+
&__category-menu {
44+
display: flex;
45+
flex-direction: column;
46+
flex-grow: 1;
47+
min-height: 0;
48+
overflow: auto;
4449
}
45-
.toolbox-separator {
46-
background-color: $brand-dark-gray;
47-
display: inline-block;
48-
height: 15px;
49-
margin: 0 5px;
50-
user-select: none;
51-
width: 2px;
50+
&__row {
51+
cursor: pointer;
52+
border-top: 1px solid $lightgrey;
5253
}
53-
}
54-
55-
#toolbox-login {
56-
margin-top: 1px;
57-
margin-right: 20px;
58-
}
59-
60-
#toolbox-account {
61-
display: table;
62-
height: 40px;
63-
}
64-
65-
#toolbox-account-list {
66-
position: relative;
67-
user-select: none;
68-
display: table-cell;
69-
vertical-align: middle;
70-
padding-right: 20px;
71-
72-
& > a {
73-
color: $black;
74-
75-
&:hover, &:visited {
76-
text-decoration: none;
77-
}
54+
&__header, &__label {
55+
font-size: 1em;
56+
padding: 0.6em 1em;
7857
}
79-
}
80-
81-
#toolbox-main-account {
82-
display: inline;
83-
padding-inline-start: 0;
84-
85-
& > li {
86-
display: inline;
87-
margin: 0 2px;
58+
&__title {
59+
margin-right: 0.6em;
8860
}
89-
& > li:not(:first-child):not(:last-child):before {
90-
content: '\2022';
91-
margin-right: 7px;
61+
&__arrow {
62+
cursor: pointer;
63+
position: absolute;
64+
top: 0.6em;
65+
right: 0.6em;
66+
transform: rotate(90deg);
67+
transition: transform 0.25s ease;
9268
}
93-
& > .nav-caret {
94-
display: inline-block;
69+
&__item {
70+
position: relative;
9571
}
96-
}
97-
98-
#toolbox-all-accounts {
99-
border: 0;
100-
z-index: 100;
101-
margin-top: -1px;
102-
background: none;
103-
right: 20px;
104-
105-
& li {
72+
&__color {
73+
position: absolute;
74+
left: 0;
75+
width: 4px;
10676
height: 100%;
107-
108-
& a {
109-
margin-top: 0;
77+
}
78+
&--collapsed {
79+
#{$toolbox}__header, #{$toolbox}__item {
80+
padding: 0.6em;
81+
}
82+
#{$toolbox}__color {
83+
position: relative;
84+
width: 20px;
85+
height: 20px;
86+
border-radius: 50%;
87+
}
88+
#{$toolbox}__title, #{$toolbox}__label {
89+
display: none;
90+
}
91+
#{$toolbox}__arrow {
92+
position: relative;
93+
transform: rotate(270deg);
94+
margin-top: -2px;
95+
top: 0;
96+
right: -2px;
97+
}
98+
#{$toolbox}__row {
99+
border-top: none;
110100
}
111101
}
112-
}
113-
114-
button {
115-
& > .barspinner.white {
116-
position: relative;
117-
margin: 3px auto;
118-
height: 13px;
119-
top: initial; /* stylelint-disable-line */
120-
left: initial; /* stylelint-disable-line */
102+
@each $category, $category-colour in $category-colours {
103+
&__category--#{$category}#{&}__category--selected {
104+
background-color: transparentize($category-colour, 0.9);
105+
}
106+
&__category--#{$category} {
107+
&:hover {
108+
background-color: transparentize($category-colour, 0.95);
109+
}
110+
& > #{$toolbox}__color {
111+
background-color: $category-colour;
112+
}
113+
}
121114
}
122-
}
115+
}

‎src/assets/sass/scratch/_workspace.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#scratch_area {
2+
position: absolute;
3+
height: 100%;
4+
width: 100%;
5+
}
6+
7+
#scratch_div {
8+
position: absolute;
9+
top: 0px !important;
10+
left: 0px !important;
11+
}
12+
13+
.blocklyText {
14+
fill: #000 !important;
15+
}

‎src/components/Icons.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react';
2-
import logo from '../assets/icons/ic-logo.svg';
3-
import tradeActive from '../assets/icons/ic-trade-active.svg';
4-
// import arrowIcon from '../assets/icons/ic-trade-active.svg';
1+
import React from 'react';
2+
import arrow from '../assets/icons/ic-arrow.svg';
3+
import logo from '../assets/icons/ic-logo.svg';
4+
import tradeActive from '../assets/icons/ic-trade-active.svg';
5+
56
/* eslint-disable react/display-name */
67
export const Icon = svgItem => (props) => {
78
const { className } = props;
@@ -16,4 +17,4 @@ export const Icon = svgItem => (props) => {
1617

1718
export const LogoIcon = Icon(logo);
1819
export const TradeActive = Icon(tradeActive);
19-
export const ArrowIcon = Icon(tradeActive);
20+
export const ArrowIcon = Icon(arrow);

‎src/components/workspace.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
2-
import '../assets/sass/scratch/_blockly-toolbox.scss';
2+
import '../assets/sass/scratch/_workspace.scss';
3+
import '../assets/sass/scratch/_toolbox.scss';
4+
import '../assets/sass/scratch/_flyout.scss';
35

46
const Workspace = () => (
57
<React.Fragment>

0 commit comments

Comments
 (0)