diff --git a/src/blockly/blockly-worksace.js b/src/blockly/blockly-worksace.js index 3a5d27169..87e926349 100644 --- a/src/blockly/blockly-worksace.js +++ b/src/blockly/blockly-worksace.js @@ -133,37 +133,8 @@ const setElementActions = blockly => { addEventHandlers(blockly); }; -const exportContent = { - 'summary-panel': () => { - globalObserver.emit('summary.export'); - }, - logPanel: () => { - globalObserver.emit('log.export'); - }, -}; - -const addExportButtonToPanel = panelId => { - const buttonHtml = - ''; - const $button = $(buttonHtml); - const panelSelector = `[aria-describedby="${panelId}"]`; - if (!$(`${panelSelector} .icon-save`).length) { - $button.insertBefore(`${panelSelector} .icon-close`); - $(`${panelSelector} .icon-close`).blur(); - $($(`${panelSelector} .icon-save`)).click(() => { - exportContent[panelId](); - }); - } -}; - export const showSummary = () => { - $('#summary-panel').dialog('option', 'minWidth', 770).dialog('open'); - addExportButtonToPanel('summary-panel'); -}; - -export const logButton = () => { - $('#logPanel').dialog('open'); - addExportButtonToPanel('logPanel'); + globalObserver.emit('summary.show'); }; const addBindings = blockly => { @@ -271,14 +242,6 @@ const addBindings = blockly => { }, 300) ); - $('[aria-describedby="summary-panel"]').on('click', '#summaryRunButton', () => { - $('#runButton').trigger('click'); - }); - - $('[aria-describedby="summary-panel"]').on('click', '#summaryStopButton', () => { - $('#stopButton').trigger('click'); - }); - globalObserver.register('ui.switch_account', () => { stopBlockly(blockly); GTM.setVisitorId(); diff --git a/src/blockly/bot/tools.js b/src/blockly/bot/tools.js index 0cda76f67..1b978e12e 100644 --- a/src/blockly/bot/tools.js +++ b/src/blockly/bot/tools.js @@ -182,8 +182,15 @@ export const createDetails = (contract, pip_size) => { export const getUUID = () => `${new Date().getTime() * Math.random()}`; -export const showDialog = options => - new Promise((resolve, reject) => { +export const showDialog = options => { + const draggableModals = document.getElementsByClassName('draggable'); + if (draggableModals.length) { + Array.from(draggableModals).forEach(dialog => { + dialog.style.zIndex = 100; + }); + } + + return new Promise((resolve, reject) => { const $dialog = $('
', { class: `draggable-dialog ${options.className}`, title: options.title }); options.text.forEach(text => $dialog.append(`

${text}

`)); const defaultButtons = [ @@ -223,3 +230,4 @@ export const showDialog = options => $dialog.dialog(dialogOptions); $dialog.dialog('open'); }); +}; diff --git a/src/botPage/view/TradeInfoPanel/RunButton.js b/src/botPage/view/TradeInfoPanel/RunButton.js index bcc5437c8..5a73f0b52 100644 --- a/src/botPage/view/TradeInfoPanel/RunButton.js +++ b/src/botPage/view/TradeInfoPanel/RunButton.js @@ -3,12 +3,22 @@ import { translate } from '@i18n'; const RunButton = () => ( -
+ } + onClose={() => { + setShowSummary(is_shown => !is_shown); + }} + > + + + +); + +TradeInfoPanel.propTypes = { + setShowSummary: PropTypes.func.isRequired, + show_summary: PropTypes.bool.isRequired, +}; + export default TradeInfoPanel; diff --git a/src/botPage/view/TradeInfoPanel/summary-panel.scss b/src/botPage/view/TradeInfoPanel/summary-panel.scss index 4d42c7912..59322da4f 100644 --- a/src/botPage/view/TradeInfoPanel/summary-panel.scss +++ b/src/botPage/view/TradeInfoPanel/summary-panel.scss @@ -8,6 +8,21 @@ .content-row { margin-bottom: 1em; + + &-table { + display: flex; + align-items: center; + justify-content: center; + } + } + + table { + td { + text-align: center !important; + padding: 3px !important; + height: 2em; + font-size: 11px; + } } p { diff --git a/src/botPage/view/LogTable.js b/src/botPage/view/log-table.js similarity index 78% rename from src/botPage/view/LogTable.js rename to src/botPage/view/log-table.js index 6e2326fc2..c1f1d5a65 100644 --- a/src/botPage/view/LogTable.js +++ b/src/botPage/view/log-table.js @@ -6,8 +6,10 @@ import { Table, Column, CellMeasurerCache } from 'react-virtualized'; import { translate } from '@i18n'; import { saveAs, appendRow } from '@utils'; import { observer as globalObserver } from '@utilities/observer'; +import { DraggableResizeWrapper } from '../../components/Draggable'; +import './log-table.scss'; -const Logtable = () => { +const LogTableContent = () => { const [id, setId] = React.useState(0); const [rows, setRows] = React.useState([]); const [widths, setWidths] = React.useState({ @@ -108,8 +110,8 @@ const Logtable = () => { ); return ( - -
+ +
@@ -147,8 +149,44 @@ const Logtable = () => { ); }; -Logtable.propTypes = { - rows: PropTypes.array, +const LogTable = ({ setShowLogTable, show_log_table }) => ( +
+ + {translate('Log')} + +
+ } + onClose={() => { + setShowLogTable(is_shown => !is_shown); + }} + > + + +
+); + +LogTable.propTypes = { + setShowLogTable: PropTypes.func.isRequired, + show_log_table: PropTypes.bool.isRequired, }; -export default Logtable; +export default LogTable; diff --git a/src/botPage/view/log-table.scss b/src/botPage/view/log-table.scss new file mode 100644 index 000000000..94c7619bd --- /dev/null +++ b/src/botPage/view/log-table.scss @@ -0,0 +1,24 @@ +.logpanel { + .logtable { + position: relative; + top: -12px; + display: flex; + align-items: center; + justify-content: center; + } +} + +.log-table { + &__header-container { + display: flex; + width: 100%; + align-items: center; + flex-direction: row; + justify-content: space-between; + + .icon-save { + padding: 0.2em; + margin-right: 8px; + } + } +} diff --git a/src/components/Draggable/Draggable.jsx b/src/components/Draggable/Draggable.jsx index 7ab0fef5b..860ad5957 100644 --- a/src/components/Draggable/Draggable.jsx +++ b/src/components/Draggable/Draggable.jsx @@ -215,8 +215,12 @@ const Draggable = ({ style={{ position: 'absolute', top: position.y, left: position.x, zIndex }} >
-
handleMouseDown(e, MOVE)}> -
{header}
+
handleMouseDown(e, MOVE)} + > +
{header}
- {blockly && } - {blockly && }
); diff --git a/src/components/ToolBox/ToolBox.jsx b/src/components/ToolBox/ToolBox.jsx index 6ad83e366..04e744328 100644 --- a/src/components/ToolBox/ToolBox.jsx +++ b/src/components/ToolBox/ToolBox.jsx @@ -3,7 +3,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useSelector, useDispatch } from 'react-redux'; -import { showSummary, logButton } from '@blockly/blockly-worksace'; import config from '@config'; import { isMobile } from '@utils'; import { translate } from '@i18n'; @@ -63,7 +62,15 @@ ToolboxButton.propTypes = { tooltip: PropTypes.string, }; -const ToolBox = ({ blockly, is_workspace_rendered, setShowChart, setShowGoogleDrive, setShowTradingView }) => { +const ToolBox = ({ + blockly, + is_workspace_rendered, + setShowChart, + setShowGoogleDrive, + setShowTradingView, + setShowLogTable, + setShowSummary, +}) => { const [should_show_modal, setShowModal] = React.useState(false); const [selected_modal, updateSelectedModal] = React.useState(''); const [has_active_token, setHasActiveToken] = React.useState(false); @@ -213,7 +220,9 @@ const ToolBox = ({ blockly, is_workspace_rendered, setShowChart, setShowGoogleDr id='showSummary' tooltip={translate('Show/hide the summary pop-up')} position={'bottom'} - onClick={() => showSummary()} + onClick={() => { + setShowSummary(is_shown => !is_shown); + }} classes={classNames('toolbox-button icon-summary', { 'toolbox-hide': !has_active_token, })} @@ -242,7 +251,9 @@ const ToolBox = ({ blockly, is_workspace_rendered, setShowChart, setShowGoogleDr class_container={classNames({ 'toolbox-hide': !has_active_token })} tooltip={translate('Show log')} position='bottom' - onClick={() => logButton()} + onClick={() => { + setShowLogTable(is_shown => !is_shown); + }} classes={classNames('toolbox-button icon-info', { 'toolbox-hide': !has_active_token })} /> {has_active_token && } @@ -283,6 +294,8 @@ ToolBox.propTypes = { setShowChart: PropTypes.func, setShowGoogleDrive: PropTypes.func, setShowTradingView: PropTypes.func, + setShowLogTable: PropTypes.func, + setShowSummary: PropTypes.func, }; export default ToolBox;