diff --git a/packages/deriv-bot/.stylelintrc b/packages/deriv-bot/.stylelintrc
index 3678912a0cc2..65b06ed47eea 100644
--- a/packages/deriv-bot/.stylelintrc
+++ b/packages/deriv-bot/.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",
diff --git a/packages/deriv-bot/package.json b/packages/deriv-bot/package.json
index a99ff3420a40..f9ad06fbe5f9 100644
--- a/packages/deriv-bot/package.json
+++ b/packages/deriv-bot/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"
},
diff --git a/packages/deriv-bot/src/assets/icons/ic-arrow.svg b/packages/deriv-bot/src/assets/icons/ic-arrow.svg
new file mode 100644
index 000000000000..c63bcfa2abc2
--- /dev/null
+++ b/packages/deriv-bot/src/assets/icons/ic-arrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/deriv-bot/src/assets/sass/_bot.scss b/packages/deriv-bot/src/assets/sass/_bot.scss
index ae8d07e287e2..d8cf9ef331bf 100644
--- a/packages/deriv-bot/src/assets/sass/_bot.scss
+++ b/packages/deriv-bot/src/assets/sass/_bot.scss
@@ -1,3 +1,5 @@
+@import './base/typography';
+
.main {
background: rgba(206, 17, 17, 0.5);
}
\ No newline at end of file
diff --git a/packages/deriv-bot/src/assets/sass/base/typography.scss b/packages/deriv-bot/src/assets/sass/base/typography.scss
new file mode 100644
index 000000000000..3724fdaf7985
--- /dev/null
+++ b/packages/deriv-bot/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;
+}
\ No newline at end of file
diff --git a/packages/deriv-bot/src/assets/sass/scratch/_flyout.scss b/packages/deriv-bot/src/assets/sass/scratch/_flyout.scss
new file mode 100644
index 000000000000..9219903d9cb4
--- /dev/null
+++ b/packages/deriv-bot/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;
+}
\ No newline at end of file
diff --git a/packages/deriv-bot/src/assets/sass/scratch/_toolbox.scss b/packages/deriv-bot/src/assets/sass/scratch/_toolbox.scss
index d7ad7476883d..7d0b11e29e15 100644
--- a/packages/deriv-bot/src/assets/sass/scratch/_toolbox.scss
+++ b/packages/deriv-bot/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;
+ }
+ }
}
-}
+}
\ No newline at end of file
diff --git a/packages/deriv-bot/src/assets/sass/scratch/_workspace.scss b/packages/deriv-bot/src/assets/sass/scratch/_workspace.scss
new file mode 100644
index 000000000000..31bc0dec556c
--- /dev/null
+++ b/packages/deriv-bot/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;
+}
\ No newline at end of file
diff --git a/packages/deriv-bot/src/components/Icons.jsx b/packages/deriv-bot/src/components/Icons.jsx
index 5a922c07d29e..798ec7d8d7a6 100644
--- a/packages/deriv-bot/src/components/Icons.jsx
+++ b/packages/deriv-bot/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);
diff --git a/packages/deriv-bot/src/components/workspace.jsx b/packages/deriv-bot/src/components/workspace.jsx
index f9798e112470..2551b8a65ebd 100644
--- a/packages/deriv-bot/src/components/workspace.jsx
+++ b/packages/deriv-bot/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 = () => (
diff --git a/packages/deriv-bot/src/scratch/blocks/Binary/Trade Definition/trade_definition_tradeoptions.js b/packages/deriv-bot/src/scratch/blocks/Binary/Trade Definition/trade_definition_tradeoptions.js
index 0d030019604c..a21aae4b98ed 100755
--- a/packages/deriv-bot/src/scratch/blocks/Binary/Trade Definition/trade_definition_tradeoptions.js
+++ b/packages/deriv-bot/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',
diff --git a/packages/deriv-bot/src/scratch/hooks/flyout_vertical.js b/packages/deriv-bot/src/scratch/hooks/flyout_vertical.js
index 7ed93ad0f81e..9952bf3ec240 100644
--- a/packages/deriv-bot/src/scratch/hooks/flyout_vertical.js
+++ b/packages/deriv-bot/src/scratch/hooks/flyout_vertical.js
@@ -4,28 +4,31 @@ Blockly.BlockSvg.TAB_WIDTH = 8;
/**
* Move the flyout to the edge of the workspace.
+ * deriv-bot: Custom dimensions for flyout & support dynamic widths.
*/
Blockly.VerticalFlyout.prototype.position = function() {
if (!this.isVisible()) {
return;
}
+
const targetWorkspaceMetrics = this.targetWorkspace_.getMetrics();
if (!targetWorkspaceMetrics) {
// Hidden components will return null.
return;
}
+
// Record the height for Blockly.Flyout.getMetrics_
- // deriv-bot: -20 so it's unattached to bottom.
- this.height_ = targetWorkspaceMetrics.viewHeight - 30;
+ // deriv-bot: Set to workspace height
+ this.height_ = targetWorkspaceMetrics.viewHeight - 40;
const edgeWidth = this.width_ - this.CORNER_RADIUS;
- // deriv-bot: use this.height_ instead of targetWorkspaceMetrics.veiwHeight
+ // deriv-bot: use this.height_ instead of targetWorkspaceMetrics.viewHeight
const edgeHeight = this.height_ - 2 * this.CORNER_RADIUS;
+
this.setBackgroundPath_(edgeWidth, edgeHeight);
- // Y is always 0 since this is a vertical flyout.
- // deriv-bot: We want some spacing between top and toolbox.
- const y = 10;
+ // deriv-bot: Ensure flyout is rendered at same y-point as parent toolbox.
+ const y = this.parentToolbox_.HtmlDiv.offsetTop;
let x;
// If this flyout is the toolbox flyout.
@@ -33,7 +36,8 @@ Blockly.VerticalFlyout.prototype.position = function() {
// If there is a category toolbox.
if (targetWorkspaceMetrics.toolboxWidth) {
if (this.toolboxPosition_ === Blockly.TOOLBOX_AT_LEFT) {
- x = this.parentToolbox_.HtmlDiv.clientWidth + Blockly.BlockSvg.TAB_WIDTH; // deriv-bot: Allow for dynamic toolbox width.
+ // deriv-bot: Allow for dynamic toolbox width.
+ x = this.parentToolbox_.HtmlDiv.clientWidth + Blockly.BlockSvg.TAB_WIDTH;
} else {
x = targetWorkspaceMetrics.viewWidth - this.width_;
}
@@ -51,13 +55,14 @@ Blockly.VerticalFlyout.prototype.position = function() {
// of the flyout.
x = targetWorkspaceMetrics.viewWidth + targetWorkspaceMetrics.absoluteLeft - this.width_;
}
+
this.positionAt_(this.width_, this.height_, x, y);
};
/**
* Compute width of flyout. Position mat under each block.
* For RTL: Lay out the blocks and buttons to be right-aligned.
- * deriv-bot: Imported from Blockly to allow for dynamic width flyout.
+ * deriv-bot: Allow for dynamic width flyout.
* @private
*/
Blockly.VerticalFlyout.prototype.reflowInternal_ = function() {
@@ -87,6 +92,7 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() {
// With the flyoutWidth known, right-align the blocks.
const oldX = block.getRelativeToSurfaceXY().x;
const newX = flyoutWidth / this.workspace_.scale - this.MARGIN - Blockly.BlockSvg.TAB_WIDTH;
+
block.moveBy(newX - oldX, 0);
}
});
@@ -96,9 +102,11 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() {
this.buttons_.forEach(button => {
const { y } = button.getPosition();
const x = flyoutWidth / this.workspace_.scale - button.width - this.MARGIN - Blockly.BlockSvg.TAB_WIDTH;
+
button.moveTo(x, y);
});
}
+
// Record the width for .getMetrics_ and .position.
this.width_ = flyoutWidth;
this.position();
diff --git a/packages/deriv-bot/src/scratch/hooks/toolbox.js b/packages/deriv-bot/src/scratch/hooks/toolbox.js
index b0d8ce1b2b19..8e9b7cca64b2 100644
--- a/packages/deriv-bot/src/scratch/hooks/toolbox.js
+++ b/packages/deriv-bot/src/scratch/hooks/toolbox.js
@@ -1,20 +1,86 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ArrowIcon } from '../../components/Icons.jsx';
+import { translate } from '../../utils/lang/i18n';
+
/* eslint-disable func-names, no-underscore-dangle */
+/**
+ * Initializes the toolbox.
+ */
+Blockly.Toolbox.prototype.init = function() {
+ const workspace = this.workspace_;
+ const svg = this.workspace_.getParentSvg();
+
+ /**
+ * HTML container for the Toolbox menu.
+ * @type {Element}
+ */
+ this.HtmlDiv = goog.dom.createDom(goog.dom.TagName.DIV, 'toolbox');
+ this.HtmlDiv.setAttribute('dir', workspace.RTL ? 'RTL' : 'LTR');
+
+ // deriv-bot: Create Toolbox header
+ const el_toolbox_header = goog.dom.createDom(goog.dom.TagName.DIV, 'toolbox__header');
+ const el_toolbox_title = goog.dom.createDom(goog.dom.TagName.DIV, 'toolbox__title');
+ const el_toolbox_arrow = goog.dom.createDom(goog.dom.TagName.DIV, 'toolbox__arrow');
+
+ el_toolbox_title.textContent = translate('Blocks Library');
+ el_toolbox_header.appendChild(el_toolbox_title);
+ el_toolbox_header.appendChild(el_toolbox_arrow);
+ this.HtmlDiv.appendChild(el_toolbox_header);
+
+ ReactDOM.render(, el_toolbox_arrow);
+ svg.parentNode.insertBefore(this.HtmlDiv, svg);
+
+ // deriv-bot: Clicking on toolbox arrow collapses it
+ Blockly.bindEventWithChecks_(el_toolbox_arrow, 'mousedown', this, () => {
+ const is_collapsed = this.HtmlDiv.classList.contains('toolbox--collapsed');
+
+ if (is_collapsed) {
+ this.HtmlDiv.classList.remove('toolbox--collapsed');
+ } else {
+ this.HtmlDiv.classList.add('toolbox--collapsed');
+ }
+
+ // Fire an event to re-position flyout.
+ window.dispatchEvent(new Event('resize'));
+ });
+
+ // Clicking on toolbox closes popups.
+ Blockly.bindEventWithChecks_(this.HtmlDiv, 'mousedown', this, function(e) {
+ // Cancel any gestures in progress.
+ this.workspace_.cancelCurrentGesture();
+
+ if (Blockly.utils.isRightButton(e) || e.target === this.HtmlDiv) {
+ // Close flyout.
+ Blockly.hideChaff(false);
+ } else {
+ // Just close popups.
+ Blockly.hideChaff(true);
+ }
+ Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
+ }, /* opt_noCaptureIdentifier */ false, /* opt_noPreventDefault */ true);
+
+ this.createFlyout_();
+ this.categoryMenu_ = new Blockly.Toolbox.CategoryMenu(this, this.HtmlDiv);
+ this.populate_(workspace.options.languageTree);
+ this.position();
+};
+
/**
* Fill the toolbox with categories and blocks.
* @param {!Node} newTree DOM tree of blocks.
* @private
*/
-Blockly.Toolbox.prototype.populate_ = function(newTree) {
+Blockly.Toolbox.prototype.populate_ = function (newTree) {
this.categoryMenu_.populate(newTree);
};
/**
- * Show blocks for specific category in flyout
- * This is different from Scratch as they show everything in one single flyout.
+ * deriv-bot: Show blocks for a specific category in flyout
* @private
*/
-Blockly.Toolbox.prototype.showCategory_ = function(category_id) {
+Blockly.Toolbox.prototype.showCategory_ = function (category_id) {
let allContents = [];
const category = this.categoryMenu_.categories_.find(menuCategory => menuCategory.id_ === category_id);
@@ -28,12 +94,99 @@ Blockly.Toolbox.prototype.showCategory_ = function(category_id) {
this.flyout_.show(allContents);
};
+/**
+ * Create the DOM for the category menu.
+ * deriv-bot: Custom class names
+ */
+Blockly.Toolbox.CategoryMenu.prototype.createDom = function() {
+ const className = this.parent_.horizontalLayout_ ? 'toolbox__horizontal-category-menu' : 'toolbox__category-menu';
+
+ this.table = goog.dom.createDom('div', className);
+ this.parentHtml_.appendChild(this.table);
+};
+
+/**
+ * Fill the toolbox with categories and blocks by creating a new
+ * {Blockly.Toolbox.Category} for every category tag in the toolbox xml.
+ * deriv-bot: Port from Google Blockly
+ * @param {Node} domTree DOM tree of blocks, or null.
+ */
+Blockly.Toolbox.CategoryMenu.prototype.populate = function(domTree) {
+ if (!domTree) {
+ return;
+ }
+
+ // Remove old categories
+ this.dispose();
+ this.createDom();
+
+ const categories = [];
+
+ // Find actual categories from the DOM tree.
+ domTree.childNodes.forEach((child) => {
+ if (child.tagName && child.tagName.toUpperCase() === 'CATEGORY') {
+ categories.push(child);
+ }
+ });
+
+ categories.forEach((child) => {
+ const row = goog.dom.createDom(goog.dom.TagName.DIV, 'toolbox__row');
+
+ this.table.appendChild(row);
+
+ if (child) {
+ this.categories_.push(new Blockly.Toolbox.Category(this, row, child));
+ }
+ });
+
+ this.height_ = this.table.offsetHeight;
+};
+
+/**
+ * Used to determine the css classes for the menu item for this category
+ * based on its current state.
+ * @private
+ * @param {boolean=} selected Indication whether the category is currently selected.
+ * @return {string} The css class names to be applied, space-separated.
+ * deriv-bot: Custom class names
+ */
+Blockly.Toolbox.Category.prototype.getMenuItemClassName_ = function(selected) {
+ const classNames = ['toolbox__item', `toolbox__category--${this.id_}`];
+
+ if (selected) {
+ classNames.push('toolbox__category--selected');
+ }
+
+ return classNames.join(' ');
+};
+
+/**
+ * Create the DOM for a category in the toolbox.
+ * deriv-bot: Custom class names
+ */
+Blockly.Toolbox.Category.prototype.createDom = function () {
+ const toolbox = this.parent_.parent_;
+
+ this.item_ = goog.dom.createDom('div', { class: this.getMenuItemClassName_() });
+ this.label_ = goog.dom.createDom('div', {
+ class: 'toolbox__label',
+ }, Blockly.utils.replaceMessageReferences(this.name_));
+
+ const el_toolbox_row_color = goog.dom.createDom('div', { class: 'toolbox__color' });
+ this.item_.appendChild(el_toolbox_row_color);
+
+ this.item_.appendChild(this.label_);
+ this.parentHtml_.appendChild(this.item_);
+
+ Blockly.bindEvent_(this.item_, 'mouseup', toolbox, toolbox.setSelectedItemFactory(this));
+};
+
/**
* Opens the selected category
- * deriv-bot: unlike in Scratch, we want to have category-specific flyouts + removed opt_shouldScroll
+ * deriv-bot: Category-specific flyouts + removed opt_shouldScroll
* @param {Blockly.Toolbox.Category} item The category to select.
*/
-Blockly.Toolbox.prototype.setSelectedItem = function(item) {
+Blockly.Toolbox.prototype.setSelectedItem = function (item) {
if (this.selectedItem_) {
// They selected a different category but one was already open. Close it.
this.selectedItem_.setSelected(false);
@@ -62,20 +215,25 @@ Blockly.Toolbox.prototype.refreshSelection = function() {
/**
* Move the toolbox to the edge.
+ * deriv-bot: Don't set height of toolbox inline
*/
-Blockly.Toolbox.prototype.position = function() {
+Blockly.Toolbox.prototype.position = function () {
const treeDiv = this.HtmlDiv;
+
if (!treeDiv) {
// Not initialized yet.
return;
}
+
const svg = this.workspace_.getParentSvg();
const svgSize = Blockly.svgSize(svg);
+
if (this.horizontalLayout_) {
treeDiv.style.left = '0';
treeDiv.style.height = 'auto';
treeDiv.style.width = `${svgSize.width}px`;
this.height = treeDiv.offsetHeight;
+
if (this.toolboxPosition === Blockly.TOOLBOX_AT_TOP) {
// Top
treeDiv.style.top = '0';
@@ -83,15 +241,13 @@ Blockly.Toolbox.prototype.position = function() {
// Bottom
treeDiv.style.bottom = '0';
}
+ } else if (this.toolboxPosition === Blockly.TOOLBOX_AT_RIGHT) {
+ // Right
+ treeDiv.style.right = '0';
} else {
- if (this.toolboxPosition === Blockly.TOOLBOX_AT_RIGHT) {
- // Right
- treeDiv.style.right = '0';
- } else {
- // Left
- treeDiv.style.left = '0';
- }
- treeDiv.style.height = '100%';
+ // Left
+ treeDiv.style.left = '0';
}
+
this.flyout_.position();
};
diff --git a/packages/deriv-bot/src/scratch/index.js b/packages/deriv-bot/src/scratch/index.js
index db75154ddd95..44d772e81093 100644
--- a/packages/deriv-bot/src/scratch/index.js
+++ b/packages/deriv-bot/src/scratch/index.js
@@ -44,9 +44,8 @@ export const scratchWorkspaceInit = async (scratch_area_name, scratch_div_name)
const onWorkspaceResize = () => {
let el_scratch_area = document.getElementById(scratch_area_name);
-
const scratch_area = el_scratch_area;
- const scratch_div = document.getElementById(scratch_div_name);
+ const el_scratch_div = document.getElementById(scratch_div_name);
let x = 0;
let y = 0;
@@ -58,14 +57,16 @@ export const scratchWorkspaceInit = async (scratch_area_name, scratch_div_name)
} while (el_scratch_area);
// Position scratch_div over scratch_area.
- scratch_div.style.left = `${x}px`;
- scratch_div.style.top = `${y}px`;
- scratch_div.style.width = `${scratch_area.offsetWidth}px`;
- scratch_div.style.height = `${scratch_area.offsetHeight}px`;
+ el_scratch_div.style.left = `${x}px`;
+ el_scratch_div.style.top = `${y}px`;
+ el_scratch_div.style.width = `${scratch_area.offsetWidth}px`;
+ el_scratch_div.style.height = `${scratch_area.offsetHeight}px`;
Blockly.svgResize(workspace);
};
+ // Resize workspace on workspace event, workaround for jumping workspace.
+ workspace.addChangeListener(() => Blockly.svgResize(workspace));
window.addEventListener('resize', onWorkspaceResize);
onWorkspaceResize();
} catch (error) {
diff --git a/packages/deriv-bot/src/scratch/xml/main.xml b/packages/deriv-bot/src/scratch/xml/main.xml
index be943ddec939..51c70e52e77b 100644
--- a/packages/deriv-bot/src/scratch/xml/main.xml
+++ b/packages/deriv-bot/src/scratch/xml/main.xml
@@ -22,14 +22,14 @@
-
+
FALSE
-
+
FALSE
@@ -48,26 +48,26 @@
-
+
-
+
-
+
-
+
-
+
-
\ No newline at end of file
+
diff --git a/packages/deriv-bot/src/scratch/xml/toolbox.xml b/packages/deriv-bot/src/scratch/xml/toolbox.xml
index 594b99186c9e..8dc82f278b30 100644
--- a/packages/deriv-bot/src/scratch/xml/toolbox.xml
+++ b/packages/deriv-bot/src/scratch/xml/toolbox.xml
@@ -1,17 +1,84 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 60
+
+
+
+
+ FALSE
+
+
+
+
+
+
+ FALSE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+ USD
+
+
+ 1
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
ADD
@@ -112,7 +179,19 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
abc
@@ -229,7 +308,17 @@
-
+
+
+
+
+
+
+
+
+
+
+
list
@@ -265,134 +354,17 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 60
-
-
-
-
- FALSE
-
-
-
-
-
-
- FALSE
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- USD
-
-
- 1
-
-
-
-
- 1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- open
- default
-
-
- 1
-
-
-
-
-
-
-
- default
-
-
- 1
-
-
-
-
-
-
-
-
-
+
0
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -426,12 +398,12 @@
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -447,12 +419,12 @@
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -468,12 +440,12 @@
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -486,18 +458,16 @@
-
-
0
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -531,12 +501,12 @@
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -553,12 +523,12 @@
1
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -592,12 +562,12 @@
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -613,12 +583,12 @@
-
-
- open
- default
-
-
+
+
+ open
+ default
+
+
@@ -632,7 +602,7 @@
-
+
@@ -642,12 +612,39 @@
-
+
+
+
+
+
+ open
+ default
+
+
+ 1
+
+
+
+
+
+ default
+
+
+ 1
+
+
+
+
+
+
+
+
+
-
+