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 + + + + + + + + + - +