From 73c2eaad5090106cc3cd7a6dbc8bdb98baa5a109 Mon Sep 17 00:00:00 2001 From: Rupato Date: Fri, 28 Jun 2024 17:20:29 +0800 Subject: [PATCH 1/9] fix: fixed dashboard ui --- package.json | 2 +- public/ic-bot-builder.svg | 4 + public/ic-cross.svg | 1 + public/ic-delete.svg | 1 + public/ic-google-drive.svg | 1 + public/ic-my-computer.svg | 4 + public/ic-open.svg | 1 + public/ic-quick-strategy.svg | 6 + public/ic-save.svg | 1 + public/ic-user-guide.svg | 1 + src/components/load-modal/load-modal.tsx | 2 +- src/components/shared_ui/dialog/dialog.scss | 137 +++++ src/components/shared_ui/dialog/dialog.tsx | 204 +++++++ src/components/shared_ui/dialog/index.js | 4 + src/constants/dashboard.ts | 6 +- .../bot-skeleton/utils/date-time-helper.js | 13 +- .../bot-skeleton/utils/local-storage.js | 5 + src/hooks/useStore.tsx | 3 +- src/pages/bot-builder/bot-builder.tsx | 2 +- src/pages/bot-builder/workspace-wrapper.tsx | 2 +- src/pages/dashboard/cards.tsx | 4 +- .../delete-dialog.scss | 0 .../delete-dialog.tsx | 17 +- .../google-drive.scss | 0 .../google-drive.tsx | 0 .../icon-radio.tsx | 0 .../{load-bot-preview => common}/index.scss | 1 - .../{load-bot-preview => common}/index.ts | 0 .../local-footer.tsx | 0 .../{load-bot-preview => common}/local.tsx | 9 - .../recent-footer.tsx | 0 .../recent-workspace.tsx | 0 .../{load-bot-preview => common}/recent.tsx | 0 .../save-modal.scss | 0 .../save-modal.tsx | 0 .../stop-bot-modal.tsx | 0 src/pages/dashboard/dashboard.scss | 520 ++++-------------- src/pages/dashboard/dashboard.tsx | 284 +++++++--- src/pages/dashboard/info-panel.tsx | 2 +- .../load-bot-preview/bot-preview.tsx | 17 - src/pages/main/main.scss | 5 +- src/pages/main/main.tsx | 42 +- src/styles/mixins.scss | 4 + 43 files changed, 731 insertions(+), 574 deletions(-) create mode 100644 public/ic-bot-builder.svg create mode 100644 public/ic-cross.svg create mode 100644 public/ic-delete.svg create mode 100644 public/ic-google-drive.svg create mode 100644 public/ic-my-computer.svg create mode 100644 public/ic-open.svg create mode 100644 public/ic-quick-strategy.svg create mode 100644 public/ic-save.svg create mode 100644 public/ic-user-guide.svg create mode 100644 src/components/shared_ui/dialog/dialog.scss create mode 100644 src/components/shared_ui/dialog/dialog.tsx create mode 100644 src/components/shared_ui/dialog/index.js rename src/pages/dashboard/{load-bot-preview => common}/delete-dialog.scss (100%) rename src/pages/dashboard/{load-bot-preview => common}/delete-dialog.tsx (87%) rename src/pages/dashboard/{load-bot-preview => common}/google-drive.scss (100%) rename src/pages/dashboard/{load-bot-preview => common}/google-drive.tsx (100%) rename src/pages/dashboard/{load-bot-preview => common}/icon-radio.tsx (100%) rename src/pages/dashboard/{load-bot-preview => common}/index.scss (99%) rename src/pages/dashboard/{load-bot-preview => common}/index.ts (100%) rename src/pages/dashboard/{load-bot-preview => common}/local-footer.tsx (100%) rename src/pages/dashboard/{load-bot-preview => common}/local.tsx (88%) rename src/pages/dashboard/{load-bot-preview => common}/recent-footer.tsx (100%) rename src/pages/dashboard/{load-bot-preview => common}/recent-workspace.tsx (100%) rename src/pages/dashboard/{load-bot-preview => common}/recent.tsx (100%) rename src/pages/dashboard/{load-bot-preview => common}/save-modal.scss (100%) rename src/pages/dashboard/{load-bot-preview => common}/save-modal.tsx (100%) rename src/pages/dashboard/{load-bot-preview => common}/stop-bot-modal.tsx (100%) delete mode 100644 src/pages/dashboard/load-bot-preview/bot-preview.tsx diff --git a/package.json b/package.json index 007a6957..57fdb871 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ }, "scripts": { "start": "vite", - "start:dev": "vite-live-preview --reload --port=8443", + "start:dev": "vite-live-preview --reload --port=8444", "build": "vite build", "preview": "vite preview", "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"", diff --git a/public/ic-bot-builder.svg b/public/ic-bot-builder.svg new file mode 100644 index 00000000..de50464b --- /dev/null +++ b/public/ic-bot-builder.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/ic-cross.svg b/public/ic-cross.svg new file mode 100644 index 00000000..56e7b5f4 --- /dev/null +++ b/public/ic-cross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ic-delete.svg b/public/ic-delete.svg new file mode 100644 index 00000000..4f98deaa --- /dev/null +++ b/public/ic-delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ic-google-drive.svg b/public/ic-google-drive.svg new file mode 100644 index 00000000..6d7c31e9 --- /dev/null +++ b/public/ic-google-drive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ic-my-computer.svg b/public/ic-my-computer.svg new file mode 100644 index 00000000..c0f82eba --- /dev/null +++ b/public/ic-my-computer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/ic-open.svg b/public/ic-open.svg new file mode 100644 index 00000000..83ec2d6c --- /dev/null +++ b/public/ic-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ic-quick-strategy.svg b/public/ic-quick-strategy.svg new file mode 100644 index 00000000..c5ca2710 --- /dev/null +++ b/public/ic-quick-strategy.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/ic-save.svg b/public/ic-save.svg new file mode 100644 index 00000000..a410ab6c --- /dev/null +++ b/public/ic-save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ic-user-guide.svg b/public/ic-user-guide.svg new file mode 100644 index 00000000..68e3a88c --- /dev/null +++ b/public/ic-user-guide.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/load-modal/load-modal.tsx b/src/components/load-modal/load-modal.tsx index be0c7cf1..b627b83d 100644 --- a/src/components/load-modal/load-modal.tsx +++ b/src/components/load-modal/load-modal.tsx @@ -6,7 +6,7 @@ import { tabs_title } from '@/constants/load-modal'; import { useStore } from '@/hooks/useStore'; import { localize } from '@/utils/tmp/dummy'; -import GoogleDrive from '../../pages/dashboard/load-bot-preview/google-drive'; +import GoogleDrive from '../../pages/dashboard/common/google-drive'; import MobileFullPageModal from '../shared_ui/mobile-full-page-modal'; import Local from './local'; diff --git a/src/components/shared_ui/dialog/dialog.scss b/src/components/shared_ui/dialog/dialog.scss new file mode 100644 index 00000000..07c4a6a9 --- /dev/null +++ b/src/components/shared_ui/dialog/dialog.scss @@ -0,0 +1,137 @@ +/** @define dc-dialog */ + +.dc-dialog { + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + z-index: 999; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + &__wrapper { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + z-index: 999; + transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); + background-color: var(--overlay-outside-dialog); + + &--enter, + &--exit { + opacity: 0; + + .dc-dialog__dialog { + transform: translate3d(0, 50px, 0); + opacity: 0; + } + } + &--enter-done { + opacity: 1; + + .dc-dialog__dialog { + transform: translate3d(0, 0, 0); + opacity: 1; + } + } + &--has-portal { + background-color: transparent; + } + } + &__dialog { + max-width: 560px; + max-height: 338px; + min-width: 440px; + min-height: 176px; + margin-top: -#{$HEADER_HEIGHT}; + padding: 2.4rem; + border-radius: 8px; + box-sizing: border-box; + display: flex; + justify-content: space-around; + flex-direction: column; + align-items: center; + box-shadow: 0 2px 8px 0 var(--shadow-menu); + background-color: var(--general-main-2); + transition: + transform 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25), + opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); + } + &__header { + &-wrapper { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + &--end { + justify-content: flex-end; + } + } + &--title { + align-self: flex-start; + } + &--close { + cursor: pointer; + } + } + &__content { + align-self: flex-start; + margin-bottom: 2.4rem; + max-width: calc(440px - 4.8rem); + width: 100%; + + /* postcss-bem-linter: ignore */ + .dc-input__label { + background-color: var(--general-main-2); + } + &--centered { + align-self: center; + } + } + &__footer { + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; + @include mobile { + flex-wrap: wrap; + align-items: flex-start; + } + } + &__button { + margin-left: 0.8rem; + height: 4rem; + min-width: 6.4rem; + border-width: 2px; + @include mobile { + &:not(:last-child) { + margin-bottom: 1rem; + } + } + } +} + +@media screen and (max-width: 560px) { + .dc-dialog { + &__dialog { + min-width: auto; + + &--has-margin { + min-width: unset; + width: calc(100vw - 4.8rem); + } + } + } +} diff --git a/src/components/shared_ui/dialog/dialog.tsx b/src/components/shared_ui/dialog/dialog.tsx new file mode 100644 index 00000000..1fafca13 --- /dev/null +++ b/src/components/shared_ui/dialog/dialog.tsx @@ -0,0 +1,204 @@ +import React from 'react'; +import classNames from 'classnames'; +import ReactDOM from 'react-dom'; +import { CSSTransition } from 'react-transition-group'; +// import Icon from '../icon/icon'; +// import Button from '../button/button'; +import Text from '../text'; +// import { useOnClickOutside } from '../../hooks'; + +type TDialog = { + cancel_button_text?: string; + className?: string; + confirm_button_text?: string; + dismissable?: boolean; + disableApp?: () => void; + enableApp?: () => void; + has_close_icon?: boolean; + is_closed_on_cancel?: boolean; + is_closed_on_confirm?: boolean; + is_content_centered?: boolean; + is_loading?: boolean; + is_mobile_full_width?: boolean; + is_visible: boolean; + onCancel?: () => void; + onClose?: () => void; + onConfirm: () => void; + onEscapeButtonCancel?: () => void; + portal_element_id?: string; + title?: React.ReactNode; +}; + +const Dialog = ({ + disableApp, + // dismissable, + enableApp, + is_closed_on_cancel = true, + is_closed_on_confirm = true, + is_visible, + onCancel, + onClose, + onConfirm, + onEscapeButtonCancel, + ...other_props +}: React.PropsWithChildren) => { + const { + cancel_button_text, + className, + children, + confirm_button_text, + is_loading, + is_mobile_full_width = true, + is_content_centered, + portal_element_id, + title, + has_close_icon, + } = other_props; + + const wrapper_ref = React.useRef() as React.MutableRefObject; + + React.useEffect(() => { + if (is_visible && !!disableApp) { + disableApp(); + } + }, [is_visible, disableApp]); + + React.useEffect(() => { + const close = (e: { key: string }) => { + if (e.key === 'Escape') { + onEscapeButtonCancel?.(); + } + }; + window.addEventListener('keydown', close); + return () => window.removeEventListener('keydown', close); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const handleCancel = () => { + if (is_closed_on_cancel && enableApp) { + enableApp(); + } + onCancel?.(); + }; + + const handleConfirm = () => { + if (is_closed_on_confirm && enableApp) { + enableApp(); + } + onConfirm(); + }; + + const handleClose = () => { + if (onClose) { + onClose(); + } else if (onCancel) { + handleCancel(); + } else { + handleConfirm(); + } + }; + + // const validateClickOutside = () => !!dismissable || !!(has_close_icon && is_visible && is_closed_on_cancel); + + // useOnClickOutside(wrapper_ref, handleClose, validateClickOutside); + + const content_classes = classNames('dc-dialog__content', { + 'dc-dialog__content--centered': is_content_centered, + }); + // + const is_text = + typeof children === 'string' || + (React.isValidElement(children) && typeof children?.props?.i18n_default_text === 'string'); + const dialog = ( + +
+
+ {(title || has_close_icon) && ( +
+ {!!title && ( + + {title} + + )} + {has_close_icon && ( +
+ + {/* */} +
+ )} +
+ )} + {is_text ? ( + + {children} + + ) : ( +
{children}
+ )} +
+ {!!onCancel && ( + // + )} + {!!confirm_button_text && ( + // + )} +
+
+
+ + ); + + if (portal_element_id) { + const target_element = document.getElementById(portal_element_id); + if (target_element) return ReactDOM.createPortal(dialog, target_element); + } + + return dialog; +}; + +export default Dialog; diff --git a/src/components/shared_ui/dialog/index.js b/src/components/shared_ui/dialog/index.js new file mode 100644 index 00000000..2a8bce6b --- /dev/null +++ b/src/components/shared_ui/dialog/index.js @@ -0,0 +1,4 @@ +import Dialog from './dialog'; +import './dialog.scss'; + +export default Dialog; diff --git a/src/constants/dashboard.ts b/src/constants/dashboard.ts index b1480c06..b25294b5 100644 --- a/src/constants/dashboard.ts +++ b/src/constants/dashboard.ts @@ -12,15 +12,15 @@ export const STRATEGY = { export const MENU_DESKTOP = [ { type: STRATEGY.EDIT, - icon: 'IcEdit', + icon: '/ic-open.svg', }, { type: STRATEGY.SAVE, - icon: 'IcSave', + icon: '/ic-save.svg', }, { type: STRATEGY.DELETE, - icon: 'IcDelete', + icon: '/ic-delete.svg', }, ]; diff --git a/src/external/bot-skeleton/utils/date-time-helper.js b/src/external/bot-skeleton/utils/date-time-helper.js index 705a2711..d6dadfcc 100644 --- a/src/external/bot-skeleton/utils/date-time-helper.js +++ b/src/external/bot-skeleton/utils/date-time-helper.js @@ -1,17 +1,22 @@ -import { localize } from '@/utils/tmp/dummy'; +// import { localize } from '@/utils/tmp/dummy'; export const timeSince = timestamp => { const now = new Date(); const secondPast = (now.getTime() - timestamp) / 1000; + //console.log(secondPast) if (secondPast < 60) { - return localize('{{secondPast}}s ago', { secondPast: parseInt(secondPast) }); + + return `${parseInt(secondPast)}s ago`; + //return localize('{{secondPast}}s ago', { secondPast: parseInt(secondPast) }); } if (secondPast < 3600) { - return localize('{{minutePast}}m ago', { minutePast: parseInt(secondPast / 60) }); + return `${parseInt(secondPast / 60)}m ago`; + //return localize('{{minutePast}}m ago', { minutePast: parseInt(secondPast / 60) }); } if (secondPast <= 86400) { - return localize('{{hourPast}}h ago', { hourPast: parseInt(secondPast / 3600) }); + return `${parseInt(secondPast / 3600)}h ago`; + //return localize('{{hourPast}}h ago', { hourPast: parseInt(secondPast / 3600) }); } const timestampDate = new Date(timestamp); diff --git a/src/external/bot-skeleton/utils/local-storage.js b/src/external/bot-skeleton/utils/local-storage.js index 2f812f05..775cb29a 100644 --- a/src/external/bot-skeleton/utils/local-storage.js +++ b/src/external/bot-skeleton/utils/local-storage.js @@ -3,6 +3,10 @@ import LZString from 'lz-string'; import { save_types } from '../constants/save-type'; import DBotStore from '../scratch/dbot-store'; +// import { checkTargetForNewValues } from 'framer-motion'; + +window.localForage = localForage; +window.LZString = LZString; /** * Save workspace to localStorage * @param {String} save_type // constants/save_types.js (unsaved, local, googledrive) @@ -48,6 +52,7 @@ export const saveWorkspaceToRecent = async (xml, save_type = save_types.UNSAVED) workspaces.pop(); } updateListStrategies(workspaces); + //console.log(workspaces); localForage.setItem('saved_workspaces', LZString.compress(JSON.stringify(workspaces))); }; diff --git a/src/hooks/useStore.tsx b/src/hooks/useStore.tsx index c6d296c0..51e90bbf 100644 --- a/src/hooks/useStore.tsx +++ b/src/hooks/useStore.tsx @@ -29,8 +29,9 @@ const StoreProvider: React.FC = ({ children }) => { initializingStore.current = true; initializeStore(); } - }, [store]); + }, [store]); + if (!store) { return ; } diff --git a/src/pages/bot-builder/bot-builder.tsx b/src/pages/bot-builder/bot-builder.tsx index 4138bd7d..aada409e 100644 --- a/src/pages/bot-builder/bot-builder.tsx +++ b/src/pages/bot-builder/bot-builder.tsx @@ -11,7 +11,7 @@ import { useStore } from '@/hooks/useStore'; import { localize } from '@/utils/tmp/dummy'; import LoadModal from '../../components/load-modal'; -import SaveModal from '../dashboard/load-bot-preview/save-modal'; +import SaveModal from '../dashboard/common/save-modal'; import BotBuilderTourHandler from '../tutorials/dbot-tours/bot-builder-tour'; import QuickStrategy1 from './quick-strategy'; diff --git a/src/pages/bot-builder/workspace-wrapper.tsx b/src/pages/bot-builder/workspace-wrapper.tsx index 87324564..672945de 100644 --- a/src/pages/bot-builder/workspace-wrapper.tsx +++ b/src/pages/bot-builder/workspace-wrapper.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'; import Flyout from '@/components/flyout'; import { useStore } from '@/hooks/useStore'; -import StopBotModal from '../dashboard/load-bot-preview/stop-bot-modal'; +import StopBotModal from '../dashboard/common/stop-bot-modal'; import Toolbar from './toolbar'; import Toolbox from './toolbox'; diff --git a/src/pages/dashboard/cards.tsx b/src/pages/dashboard/cards.tsx index 56fc8179..916e2324 100644 --- a/src/pages/dashboard/cards.tsx +++ b/src/pages/dashboard/cards.tsx @@ -15,8 +15,8 @@ import { Icon, localize } from '@/utils/tmp/dummy'; import { rudderStackSendQsOpenEventFromDashboard } from '../bot-builder/quick-strategy/analytics/rudderstack-quick-strategy'; -import GoogleDrive from './load-bot-preview/google-drive'; -import Recent from './load-bot-preview/recent'; +import GoogleDrive from './common/google-drive'; +import Recent from './common/recent'; type TCardProps = { has_dashboard_strategies: boolean; diff --git a/src/pages/dashboard/load-bot-preview/delete-dialog.scss b/src/pages/dashboard/common/delete-dialog.scss similarity index 100% rename from src/pages/dashboard/load-bot-preview/delete-dialog.scss rename to src/pages/dashboard/common/delete-dialog.scss diff --git a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx b/src/pages/dashboard/common/delete-dialog.tsx similarity index 87% rename from src/pages/dashboard/load-bot-preview/delete-dialog.tsx rename to src/pages/dashboard/common/delete-dialog.tsx index 63facb06..e6943b54 100644 --- a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx +++ b/src/pages/dashboard/common/delete-dialog.tsx @@ -2,14 +2,15 @@ import localForage from 'localforage'; import LZString from 'lz-string'; import { observer } from 'mobx-react-lite'; -import { Dialog, Text } from '@deriv-com/ui'; +import { Text } from '@deriv-com/ui'; import { TStrategy } from 'Types'; import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils'; import { getSavedWorkspaces } from '@/external/bot-skeleton'; import { useStore } from '@/hooks/useStore'; -import { localize } from '@/utils/tmp/dummy'; +import './delete-dialog.scss'; +import Dialog from '@/components/shared_ui/dialog'; const DeleteDialog = observer(() => { const { load_modal, dashboard } = useStore(); @@ -65,15 +66,15 @@ const DeleteDialog = observer(() => { return (
{ removeBotStrategy(selected_strategy_id); onToggleDeleteDialog(false); setOpenSettings(NOTIFICATION_TYPE.BOT_DELETE); }} - cancel_button_text={localize('No')} + cancel_button_text="No" onCancel={() => { onToggleDeleteDialog(false); }} @@ -83,13 +84,13 @@ const DeleteDialog = observer(() => { >
- {localize('Your bot will be permanently deleted when you hit ')} - {localize('Yes, delete.')} + Your bot will be permanently deleted when you hit + Yes, delete.
- {localize('Are you sure you want to delete it?')} + Are you sure you want to delete it?
diff --git a/src/pages/dashboard/load-bot-preview/google-drive.scss b/src/pages/dashboard/common/google-drive.scss similarity index 100% rename from src/pages/dashboard/load-bot-preview/google-drive.scss rename to src/pages/dashboard/common/google-drive.scss diff --git a/src/pages/dashboard/load-bot-preview/google-drive.tsx b/src/pages/dashboard/common/google-drive.tsx similarity index 100% rename from src/pages/dashboard/load-bot-preview/google-drive.tsx rename to src/pages/dashboard/common/google-drive.tsx diff --git a/src/pages/dashboard/load-bot-preview/icon-radio.tsx b/src/pages/dashboard/common/icon-radio.tsx similarity index 100% rename from src/pages/dashboard/load-bot-preview/icon-radio.tsx rename to src/pages/dashboard/common/icon-radio.tsx diff --git a/src/pages/dashboard/load-bot-preview/index.scss b/src/pages/dashboard/common/index.scss similarity index 99% rename from src/pages/dashboard/load-bot-preview/index.scss rename to src/pages/dashboard/common/index.scss index 0a0329c5..904aaecb 100644 --- a/src/pages/dashboard/load-bot-preview/index.scss +++ b/src/pages/dashboard/common/index.scss @@ -1,5 +1,4 @@ @import './google-drive.scss'; -@import './delete-dialog.scss'; @import './save-modal.scss'; .load-strategy { diff --git a/src/pages/dashboard/load-bot-preview/index.ts b/src/pages/dashboard/common/index.ts similarity index 100% rename from src/pages/dashboard/load-bot-preview/index.ts rename to src/pages/dashboard/common/index.ts diff --git a/src/pages/dashboard/load-bot-preview/local-footer.tsx b/src/pages/dashboard/common/local-footer.tsx similarity index 100% rename from src/pages/dashboard/load-bot-preview/local-footer.tsx rename to src/pages/dashboard/common/local-footer.tsx diff --git a/src/pages/dashboard/load-bot-preview/local.tsx b/src/pages/dashboard/common/local.tsx similarity index 88% rename from src/pages/dashboard/load-bot-preview/local.tsx rename to src/pages/dashboard/common/local.tsx index 6cc563e6..fdff5f35 100644 --- a/src/pages/dashboard/load-bot-preview/local.tsx +++ b/src/pages/dashboard/common/local.tsx @@ -56,15 +56,6 @@ const LocalComponent = observer(() => { > {!is_mobile && }
- - {!is_mobile && ( - <> -
- -
-
{renderOpenButton()}
- - )} { + const { dashboard } = useStore(); + const { showVideoDialog, setActiveTab } = dashboard; + const load_file_ref = React.useRef(null); + const openFileLoader = () => { + load_file_ref?.current?.click(); + }; + const openGoogleDriveDialog = () => { + showVideoDialog({ + type: 'google', + }); + }; + const quick_actions = [ + { + type: 'my-computer', + icon: My computer, + content: 'My Computer', + onClickHandler: () => openFileLoader(), + }, + { + type: 'google-drive', + icon: Google Drive, + content: 'Google Drive', + onClickHandler: () => openGoogleDriveDialog(), + }, + { + type: 'bot-builder', + icon: Bot Builder, + content: 'Bot Builder', + onClickHandler: () => { + setActiveTab(DBOT_TABS.BOT_BUILDER); + }, + }, + { + type: 'quick-strategy', + icon: Quick strategy, + content: 'Quick strategy', + onClickHandler: () => { + setActiveTab(DBOT_TABS.BOT_BUILDER); + }, + }, + ]; + return ( +
+ {quick_actions.map(icons => { + const { icon, content, onClickHandler } = icons; + return ( +
+
{icon}
+
{content}
+
+ ); + })} + {}} /> +
+ ); +}); -import { useStore } from '@/hooks/useStore'; -import { localize } from '@/utils/tmp/dummy'; +const DashboardBotList = observer(() => { + const { load_modal, dashboard, save_modal } = useStore(); + const { + dashboard_strategies, + setDashboardStrategies, + onToggleDeleteDialog, + loadFileFromRecent, + setPreviewedStrategyId, + previewRecentStrategy, + } = load_modal; + const { setActiveTab, active_tab, setPreviewOnDialog } = dashboard; + const { updateBotName, toggleSaveModal } = save_modal; + const is_mobile = isMobileOs(); + + React.useEffect(() => { + let strategies; + const getStrategies = async () => { + strategies = await getSavedWorkspaces(); + setDashboardStrategies(strategies); + }; + getStrategies(); + }, []); + + + const handleInit = (workspace: any) => { + setPreviewedStrategyId(workspace?.id); + // Fires for desktop + if (active_tab === 0) { + previewRecentStrategy(workspace.id); + } + }; + + const handlePreviewList = (workspace: any) => { + setPreviewedStrategyId(workspace.id); + // Fires for mobile on clicking preview button + if (is_mobile) { + setPreviewOnDialog(true); + const dashboard_tab_dom_element = document.getElementsByClassName('tab__dashboard')?.[0]; + waitForDomElement('#load-strategy__blockly-container', dashboard_tab_dom_element).then(() => { + previewRecentStrategy(workspace.id); + }); + } + }; + + const handleEdit = async () => { + await loadFileFromRecent(); + setActiveTab(DBOT_TABS.BOT_BUILDER); + }; -import OnboardTourHandler from '../tutorials/dbot-tours/onboarding-tour'; + const handleSave = (workspace: any) => { + updateBotName(workspace?.name); + toggleSaveModal(); + }; -import Local from './load-bot-preview/local'; -import Cards from './cards'; -import InfoPanel from './info-panel'; -import UserGuide from './user-guide'; + const viewRecentStrategy = async (type: string, workspace: any) => { + //setSelectedStrategyId(workspace.id); + switch (type) { + case STRATEGY.INIT: + // Fires for desktop preview + handleInit(workspace); + break; -type TMobileIconGuide = { - handleTabChange: (active_number: number) => void; -}; + case STRATEGY.PREVIEW_LIST: + // Fires for mobile preview + handlePreviewList(workspace); + break; -const DashboardComponent = observer(({ handleTabChange }: TMobileIconGuide) => { - const { ui } = useStore(); - const { load_modal, dashboard } = useStore(); - const { dashboard_strategies } = load_modal; - const { setActiveTabTutorial, active_tab, active_tour } = dashboard; - const has_dashboard_strategies = !!dashboard_strategies?.length; - const { is_mobile } = ui; + case STRATEGY.EDIT: + await handleEdit(); + break; + case STRATEGY.SAVE: + handleSave(workspace); + break; + + case STRATEGY.DELETE: + onToggleDeleteDialog(true); + break; + + default: + break; + } + }; + + if(!dashboard_strategies) return null; return ( - -
+
Your Bots
+ + + + + + {dashboard_strategies.map((workspace, index) => { + const { name, timestamp, save_type } = workspace; + return ( + + + + + + + ); })} - > -
- -
-
- {!has_dashboard_strategies && ( - - {localize('Load or build your bot')} - - )} - - {localize( - 'Import a bot from your computer or Google Drive, build it from scratch, or start with a quick strategy.' - )} - -
-
- -
- {is_mobile && } -
-
- {has_dashboard_strategies && !is_mobile && ( -
- -
- )} -
+
Bot NameLast ModifiedStatusAction
{name}{timeSince(timestamp)}{save_type} + {MENU_DESKTOP.map(item => { + return ( +
{ + e.stopPropagation(); + viewRecentStrategy(item.type, workspace); + }} + > + +
+ ); + })} +
+
+ ); +}); + +const Dashboard = observer(() => { + const onClickUserGuide = () => { + }; + const { load_modal } = useStore(); + const { setDashboardStrategies} = load_modal; + return ( + +
+
+ +
+
+ Import a bot from your computer or Google Drive, build it from scratch, or start with a quick + strategy.
+ + + +
- - {active_tab === 0 && } ); }); -export default DashboardComponent; +export default Dashboard; diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/info-panel.tsx index 10756b82..a7f57298 100644 --- a/src/pages/dashboard/info-panel.tsx +++ b/src/pages/dashboard/info-panel.tsx @@ -36,7 +36,7 @@ const InfoPanel = observer(() => { const handleClose = () => { setInfoPanelVisibility(false); - localStorage.setItem('dbot_should_show_info', JSON.stringify(Date.now())); + localStorage.removeItem('dbot_should_show_info'); }; const renderInfo = () => ( diff --git a/src/pages/dashboard/load-bot-preview/bot-preview.tsx b/src/pages/dashboard/load-bot-preview/bot-preview.tsx deleted file mode 100644 index 41115189..00000000 --- a/src/pages/dashboard/load-bot-preview/bot-preview.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { RefObject } from 'react'; - -import WorkspaceControl from '../../../components/load-modal/workspace-control'; - -type TBotPreview = { - id_ref: RefObject; -}; - -const BotPreview = ({ id_ref }: TBotPreview) => { - return ( -
- -
- ); -}; - -export default BotPreview; diff --git a/src/pages/main/main.scss b/src/pages/main/main.scss index 20948df9..7e038ed2 100644 --- a/src/pages/main/main.scss +++ b/src/pages/main/main.scss @@ -23,7 +23,6 @@ width: 100%; &--active { - //css for onboard tour overlay &:before { content: ''; position: fixed; @@ -304,9 +303,7 @@ } } &__run-strategy-wrapper { - @include desktop { - position: absolute; - } + inset-inline-end: 1.6rem; top: 1.6rem; diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx index aa250101..0950dfa8 100644 --- a/src/pages/main/main.tsx +++ b/src/pages/main/main.tsx @@ -22,7 +22,6 @@ import ChartModal from '../chart/chart-modal'; import Dashboard from '../dashboard'; import RunStrategy from '../dashboard/run-strategy'; import Tutorial from '../tutorials'; -import { tour_list } from '../tutorials/dbot-tours/utils'; const AppWrapper = observer(() => { const { dashboard, load_modal, run_panel, quick_strategy, summary_card } = useStore(); @@ -33,7 +32,6 @@ const AppWrapper = observer(() => { is_trading_view_modal_visible, setActiveTab, setWebSocketState, - setActiveTour, setTourDialogVisibility, } = dashboard; const { onEntered, dashboard_strategies } = load_modal; @@ -43,18 +41,16 @@ const AppWrapper = observer(() => { const { cancel_button_text, ok_button_text, title, message } = dialog_options as { [key: string]: string }; const { clear } = summary_card; const { DASHBOARD, BOT_BUILDER } = DBOT_TABS; - const init_render = React.useRef(true); - const { ui } = useStore(); - const { url_hashed_values, is_mobile } = ui; - const hash = ['dashboard', 'bot_builder', 'chart', 'tutorial']; + // const { ui } = useStore(); + // const { url_hashed_values, is_mobile } = ui; + //const hash = ['dashboard', 'bot_builder', 'chart', 'tutorial']; - let tab_value: number | string = active_tab; - const GetHashedValue = (tab: number) => { - tab_value = url_hashed_values?.split('#')[1]; - if (!tab_value) return tab; - return Number(hash.indexOf(String(tab_value))); - }; - const active_hash_tab = GetHashedValue(active_tab); + //let tab_value: number | string = active_tab; + // const GetHashedValue = (tab: number) => { + // tab_value = url_hashed_values?.split('#')[1]; + // if (!tab_value) return tab; + // return Number(hash.indexOf(String(tab_value))); + // }; const checkAndHandleConnection = () => { const api_status = api_base.getConnectionStatus(); @@ -77,16 +73,16 @@ const AppWrapper = observer(() => { setTourDialogVisibility(false); } - if (init_render.current) { - setActiveTab(Number(active_hash_tab)); - if (is_mobile) handleTabChange(Number(active_hash_tab)); - init_render.current = false; - } else { - window.location.hash = hash[active_tab] || hash[0]; - } - if (tour_list[active_tab] !== active_tour) { - setActiveTour(''); - } + // if (init_render.current) { + // //setActiveTab(Number(active_hash_tab)); + // if (is_mobile) handleTabChange(Number(active_hash_tab)); + // init_render.current = false; + // } else { + // window.location.hash = hash[active_tab] || hash[0]; + // } + // if (tour_list[active_tab] !== active_tour) { + // setActiveTour(''); + // } // eslint-disable-next-line react-hooks/exhaustive-deps }, [active_tab]); diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 126e9b17..3c00f812 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -5,6 +5,10 @@ @content; } +* { + font-family: "IBM Plex Sans", sans-serif !important; +} + /* * Check if the page is in RTL mode * Usage example: From 6345036956101540c4a34c88697382dc2145c076 Mon Sep 17 00:00:00 2001 From: Rupato Date: Mon, 1 Jul 2024 17:01:22 +0800 Subject: [PATCH 2/9] fix: dashboard component --- src/components/load-modal/load-modal.tsx | 2 +- src/pages/bot-builder/bot-builder.tsx | 2 +- src/pages/bot-builder/workspace-wrapper.tsx | 2 +- src/pages/dashboard/cards.tsx | 189 ------- src/pages/dashboard/{ => common}/constants.ts | 0 .../{ => delete-dialog}/delete-dialog.scss | 0 .../{ => delete-dialog}/delete-dialog.tsx | 0 .../{ => google-dialog}/google-drive.scss | 0 .../{ => google-dialog}/google-drive.tsx | 0 src/pages/dashboard/common/index.scss | 515 ------------------ src/pages/dashboard/common/index.ts | 5 - .../dashboard/{ => common}/info-panel.tsx | 0 src/pages/dashboard/common/local-footer.tsx | 40 -- src/pages/dashboard/common/local.tsx | 79 --- src/pages/dashboard/common/recent-footer.tsx | 25 - .../dashboard/common/recent-workspace.tsx | 238 -------- src/pages/dashboard/common/recent.tsx | 103 ---- .../{ => save-modal-dialog}/icon-radio.tsx | 0 .../{ => save-modal-dialog}/save-modal.scss | 0 .../{ => save-modal-dialog}/save-modal.tsx | 0 .../stop-bot-modal-content.tsx | 0 .../{ => stop-bot-dialog}/stop-bot-modal.tsx | 2 +- src/pages/dashboard/dashboard-bot-list.tsx | 137 +++++ .../dashboard/dashboard-quick-actions.tsx | 79 +++ src/pages/dashboard/dashboard.scss | 37 +- src/pages/dashboard/dashboard.tsx | 200 +------ src/pages/dashboard/intro-card.tsx | 17 - src/pages/dashboard/user-guide.tsx | 36 -- .../common}/run-strategy.tsx | 0 src/pages/main/main.tsx | 2 +- 30 files changed, 260 insertions(+), 1450 deletions(-) delete mode 100644 src/pages/dashboard/cards.tsx rename src/pages/dashboard/{ => common}/constants.ts (100%) rename src/pages/dashboard/common/{ => delete-dialog}/delete-dialog.scss (100%) rename src/pages/dashboard/common/{ => delete-dialog}/delete-dialog.tsx (100%) rename src/pages/dashboard/common/{ => google-dialog}/google-drive.scss (100%) rename src/pages/dashboard/common/{ => google-dialog}/google-drive.tsx (100%) delete mode 100644 src/pages/dashboard/common/index.scss delete mode 100644 src/pages/dashboard/common/index.ts rename src/pages/dashboard/{ => common}/info-panel.tsx (100%) delete mode 100644 src/pages/dashboard/common/local-footer.tsx delete mode 100644 src/pages/dashboard/common/local.tsx delete mode 100644 src/pages/dashboard/common/recent-footer.tsx delete mode 100644 src/pages/dashboard/common/recent-workspace.tsx delete mode 100644 src/pages/dashboard/common/recent.tsx rename src/pages/dashboard/common/{ => save-modal-dialog}/icon-radio.tsx (100%) rename src/pages/dashboard/common/{ => save-modal-dialog}/save-modal.scss (100%) rename src/pages/dashboard/common/{ => save-modal-dialog}/save-modal.tsx (100%) rename src/pages/dashboard/{ => common/stop-bot-dialog}/stop-bot-modal-content.tsx (100%) rename src/pages/dashboard/common/{ => stop-bot-dialog}/stop-bot-modal.tsx (93%) create mode 100644 src/pages/dashboard/dashboard-bot-list.tsx create mode 100644 src/pages/dashboard/dashboard-quick-actions.tsx delete mode 100644 src/pages/dashboard/intro-card.tsx delete mode 100644 src/pages/dashboard/user-guide.tsx rename src/pages/{dashboard => main/common}/run-strategy.tsx (100%) diff --git a/src/components/load-modal/load-modal.tsx b/src/components/load-modal/load-modal.tsx index b627b83d..fe9f17f6 100644 --- a/src/components/load-modal/load-modal.tsx +++ b/src/components/load-modal/load-modal.tsx @@ -6,7 +6,7 @@ import { tabs_title } from '@/constants/load-modal'; import { useStore } from '@/hooks/useStore'; import { localize } from '@/utils/tmp/dummy'; -import GoogleDrive from '../../pages/dashboard/common/google-drive'; +import GoogleDrive from '../../pages/dashboard/common/google-dialog/google-drive'; import MobileFullPageModal from '../shared_ui/mobile-full-page-modal'; import Local from './local'; diff --git a/src/pages/bot-builder/bot-builder.tsx b/src/pages/bot-builder/bot-builder.tsx index aada409e..65c1072d 100644 --- a/src/pages/bot-builder/bot-builder.tsx +++ b/src/pages/bot-builder/bot-builder.tsx @@ -11,7 +11,7 @@ import { useStore } from '@/hooks/useStore'; import { localize } from '@/utils/tmp/dummy'; import LoadModal from '../../components/load-modal'; -import SaveModal from '../dashboard/common/save-modal'; +import SaveModal from '../dashboard/common/save-modal-dialog/save-modal'; import BotBuilderTourHandler from '../tutorials/dbot-tours/bot-builder-tour'; import QuickStrategy1 from './quick-strategy'; diff --git a/src/pages/bot-builder/workspace-wrapper.tsx b/src/pages/bot-builder/workspace-wrapper.tsx index 672945de..e2b20aa5 100644 --- a/src/pages/bot-builder/workspace-wrapper.tsx +++ b/src/pages/bot-builder/workspace-wrapper.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'; import Flyout from '@/components/flyout'; import { useStore } from '@/hooks/useStore'; -import StopBotModal from '../dashboard/common/stop-bot-modal'; +import StopBotModal from '../dashboard/common/stop-bot-dialog/stop-bot-modal'; import Toolbar from './toolbar'; import Toolbox from './toolbox'; diff --git a/src/pages/dashboard/cards.tsx b/src/pages/dashboard/cards.tsx deleted file mode 100644 index 916e2324..00000000 --- a/src/pages/dashboard/cards.tsx +++ /dev/null @@ -1,189 +0,0 @@ -//kept sometihings commented beacuse of mobx to integrate popup functionality here -import React from 'react'; -import classNames from 'classnames'; -import { observer } from 'mobx-react-lite'; - -import { Dialog, Text } from '@deriv-com/ui'; - -import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils'; -import DesktopWrapper from '@/components/shared_ui/desktop-wrapper'; -import MobileFullPageModal from '@/components/shared_ui/mobile-full-page-modal'; -import MobileWrapper from '@/components/shared_ui/mobile-wrapper'; -import { DBOT_TABS } from '@/constants/bot-contents'; -import { useStore } from '@/hooks/useStore'; -import { Icon, localize } from '@/utils/tmp/dummy'; - -import { rudderStackSendQsOpenEventFromDashboard } from '../bot-builder/quick-strategy/analytics/rudderstack-quick-strategy'; - -import GoogleDrive from './common/google-drive'; -import Recent from './common/recent'; - -type TCardProps = { - has_dashboard_strategies: boolean; - is_mobile: boolean; -}; - -type TCardArray = { - type: string; - icon: string; - content: string; - method: () => void; -}; - -const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) => { - const { dashboard, load_modal, quick_strategy } = useStore(); - const { - onCloseDialog, - dialog_options, - is_dialog_open, - setActiveTab, - setFileLoaded, - setPreviewOnPopup, - setOpenSettings, - showVideoDialog, - } = dashboard; - const { handleFileChange, loadFileFromLocal } = load_modal; - const { setFormVisibility } = quick_strategy; - - const sendToRudderStackOnQuickStrategyIconClick = () => { - // send to rs if quick strategy is opened from dashbaord - rudderStackSendQsOpenEventFromDashboard(); - }; - - const [is_file_supported, setIsFileSupported] = React.useState(true); - const file_input_ref = React.useRef(null); - - const openGoogleDriveDialog = () => { - showVideoDialog({ - type: 'google', - }); - }; - - const openFileLoader = () => { - file_input_ref?.current?.click(); - }; - - const actions: TCardArray[] = [ - { - type: 'my-computer', - icon: is_mobile ? 'IcLocal' : 'IcMyComputer', - content: is_mobile ? localize('Local') : localize('My computer'), - method: openFileLoader, - }, - { - type: 'google-drive', - icon: 'IcGoogleDriveDbot', - content: localize('Google Drive'), - method: openGoogleDriveDialog, - }, - { - type: 'bot-builder', - icon: 'IcBotBuilder', - content: localize('Bot Builder'), - method: () => { - setActiveTab(DBOT_TABS.BOT_BUILDER); - }, - }, - { - type: 'quick-strategy', - icon: 'IcQuickStrategy', - content: localize('Quick strategy'), - method: () => { - setActiveTab(DBOT_TABS.BOT_BUILDER); - setFormVisibility(true); - sendToRudderStackOnQuickStrategyIconClick(); - }, - }, - ]; - - return React.useMemo( - () => ( -
-
- {actions.map(icons => { - const { icon, content, method } = icons; - return ( -
- { - method(); - }} - /> - - {content} - -
- ); - })} - { - setIsFileSupported(handleFileChange(e, false)); - loadFileFromLocal(); - setFileLoaded(true); - setOpenSettings(NOTIFICATION_TYPE.BOT_IMPORT); - }} - /> - - - - - - - { - setPreviewOnPopup(false); - onCloseDialog(); - }} - height_offset='80px' - page_overlay - > -
- -
- - -
- -
- ), - // eslint-disable-next-line react-hooks/exhaustive-deps - [is_dialog_open, has_dashboard_strategies] - ); -}); - -export default Cards; diff --git a/src/pages/dashboard/constants.ts b/src/pages/dashboard/common/constants.ts similarity index 100% rename from src/pages/dashboard/constants.ts rename to src/pages/dashboard/common/constants.ts diff --git a/src/pages/dashboard/common/delete-dialog.scss b/src/pages/dashboard/common/delete-dialog/delete-dialog.scss similarity index 100% rename from src/pages/dashboard/common/delete-dialog.scss rename to src/pages/dashboard/common/delete-dialog/delete-dialog.scss diff --git a/src/pages/dashboard/common/delete-dialog.tsx b/src/pages/dashboard/common/delete-dialog/delete-dialog.tsx similarity index 100% rename from src/pages/dashboard/common/delete-dialog.tsx rename to src/pages/dashboard/common/delete-dialog/delete-dialog.tsx diff --git a/src/pages/dashboard/common/google-drive.scss b/src/pages/dashboard/common/google-dialog/google-drive.scss similarity index 100% rename from src/pages/dashboard/common/google-drive.scss rename to src/pages/dashboard/common/google-dialog/google-drive.scss diff --git a/src/pages/dashboard/common/google-drive.tsx b/src/pages/dashboard/common/google-dialog/google-drive.tsx similarity index 100% rename from src/pages/dashboard/common/google-drive.tsx rename to src/pages/dashboard/common/google-dialog/google-drive.tsx diff --git a/src/pages/dashboard/common/index.scss b/src/pages/dashboard/common/index.scss deleted file mode 100644 index 904aaecb..00000000 --- a/src/pages/dashboard/common/index.scss +++ /dev/null @@ -1,515 +0,0 @@ -@import './google-drive.scss'; -@import './save-modal.scss'; - -.load-strategy { - &__wrapper { - position: fixed; - top: 4rem; - z-index: 10; - width: 100%; - - .dc-mobile-full-page-modal { - @include mobile { - width: 100%; - } - - &__body { - height: 100%; - } - .google-drive-label { - width: 100%; - } - } - - & .dc-tabs { - @include mobile { - height: 100%; - display: unset; - flex: 1; - - &__content { - height: calc(100% - 4rem); - } - } - } - } - - &__container { - @include desktop { - height: calc(80vh - 15rem); - - &--has-footer { - height: calc(80vh - 15rem); - } - - > * { - height: 100%; - margin-top: 0.8rem; - } - } - - @include tablet { - height: calc(80vh - 15rem); - - &--has-footer { - height: calc(80vh - 15rem); - } - - > * { - height: 100%; - margin-top: 0.8rem; - } - } - - @include mobile { - height: 100%; - overflow: hidden; - padding-inline-start: 0.5rem; - } - } - - &__title { - font-size: var(--text-size-s); - font-weight: 700; - margin: 1.6rem 0; - margin-inline-end: 1.6rem; - color: var(--text-general); - - &--listed { - margin: 0 !important; - } - } - - &__button-group { - display: flex; - justify-content: flex-end; - margin-inline-end: 1.6rem; - - &--clear { - height: 3.4rem; - width: 6.7rem; - background-color: $color-grey-6; - border-radius: 0.4rem; - color: $color-white; - outline: none; - border: none; - font-weight: 700; - font-size: 1.4rem; - cursor: pointer; - margin-inline-end: 1.6rem; - } - - &--open { - height: 3.4rem; - background-color: $color-red; - border-radius: 0.4rem; - color: $color-white; - outline: none; - border: none; - font-weight: 700; - font-size: '1.4rem'; - cursor: pointer; - } - } - - &__preview-workspace { - padding: 1.5rem; - border-radius: $BORDER_RADIUS; - border: solid 1px var(--border-normal); - height: calc(100vh - 30.4rem); - position: relative; - overflow: hidden; - margin-inline-end: 1.6rem; - margin-bottom: 1.6rem; - - &-controls { - padding: 0.7rem 0.5rem; - display: flex; - flex-direction: column; - position: absolute; - inset-inline-end: 1.6rem; - bottom: 1.6rem; - border-radius: 3rem; - background-color: $color-grey-2; - box-shadow: 0.2rem 0.2rem 0.5rem var(--shadow-menu); - z-index: 4; - } - - &-icon { - margin: 0.5rem; - cursor: pointer; - } - } - - &__local { - &-dropzone { - @include desktop { - padding-top: 1.6rem; - } - - @include mobile { - height: 100%; - padding: 1.6rem; - } - - &-area { - @include flex-center; - flex-direction: column; - border: dashed 0.2rem var(--border-normal); - border-radius: $BORDER_RADIUS; - height: 100%; - padding: 1.6rem; - } - } - - &-icon { - margin-bottom: 1.6rem; - } - - &-title { - margin-bottom: 1.6rem; - font-size: var(--text-size-s); - } - - &-description { - margin-bottom: 1.6rem; - font-size: var(--text-size-xs); - } - - &-preview { - display: flex; - flex-direction: column; - position: relative; - - @include mobile { - padding: 1.6rem; - height: calc(100% - 7.4rem); // - footer height - &--active { - height: calc(70% - 7.4rem); - } - } - - &--listed { - @include mobile { - padding: 0; - } - } - - &-close { - background-image: radial-gradient(at right top); - position: absolute; - padding: 2.5rem; - border-bottom-left-radius: 50%; - inset-inline-end: 0; - top: 0; - z-index: 99; - cursor: pointer; - } - } - - &-footer { - padding: 1.6rem; - display: flex; - justify-content: flex-end; - border-top: 1px solid var(--general-section-1); - } - } - - &__google-drive { - @include flex-center; - flex-direction: column; - - @include mobile { - border: dashed 0.2rem var(--border-normal); - border-radius: $BORDER_RADIUS; - margin: 1.6rem; - padding: 1.6rem; - height: calc(100% - 3.2rem); // - 2x margin. - } - - &-icon { - margin-bottom: 1.6rem; - - &--disabled { - opacity: 0.32; - } - } - - &-connected-text { - margin-bottom: 1.6rem; - font-size: var(--text-size-s); - font-weight: bold; - line-height: 2.4rem; - color: var(--text-general); - } - - &-terms { - font-size: var(--text-size-xs); - line-height: 2rem; - margin: 1.6rem 0; - text-align: center; - color: var(--text-general); - } - - &-text { - margin-bottom: 1rem; - } - } -} - -.picker { - max-width: 98%; - border-radius: 0.8rem; - max-height: 99%; - - &-content { - max-width: 98%; - padding: 1%; - } - - @include mobile { - height: 100%; - width: 100%; - top: 0; - } -} - -.dc-modal__container_load-strategy { - @include tablet { - width: calc(100vw - 4.8rem) !important; - } -} - -.dc-dialog { - @include mobile { - &__wrapper--preview { - top: 6.5rem; - - .dc-dialog { - &__dialog { - justify-content: flex-start; - min-width: 100vw; - min-height: 100vh; - padding: 0; - } - - &__header { - &-wrapper { - margin-bottom: 0; - - h1 { - width: 100%; - text-align: center; - } - - @include flex-center; - height: 4rem; - box-shadow: inset 0 -0.1rem 0 $color-grey-2; - } - - &--close { - padding: 1.6rem; - margin-top: -1rem; - } - } - - &__content { - max-width: unset; - - .injectionDiv { - margin: 2.4rem; - height: calc(100vh - 26.5rem); - border: 1px solid $color-grey-6; - } - - .load-strategy { - &__preview-workspace { - &-container { - position: relative; - margin-bottom: 3.2rem; - min-height: 33rem; - } - - &-controls { - inset-inline-end: 3.6rem; - } - } - - &__button-group { - box-shadow: inset 0 0.2rem 0rem $color-grey-2; - margin: 0; - padding: 1.6rem; - } - } - } - - &__footer { - display: none; - } - } - } - } -} - -.toolbar { - &__dialog { - transition: none; - } -} - -.flex-align-center { - display: flex; - align-items: center; -} - -.bot-list { - &__wrapper { - height: calc(100vh - 54.8rem); - overflow: auto; - } - &__header { - @extend .flex-align-center; - padding: 0 0.8rem; - border-bottom: 1px solid var(--border-divider); - - @include mobile { - padding: 0; - } - - &__label { - padding: 0.8rem; - width: 35%; - @include mobile { - width: 40%; - padding-inline-start: 0; - } - } - &__time-stamp { - width: 20%; - padding: 0.8rem; - @include mobile { - width: 25%; - padding-inline-end: 0; - } - } - &__load-type { - width: 25%; - padding: 0.8rem; - } - } - &__item { - @extend .flex-align-center; - padding: 0 0.8rem; - border-bottom: 1px solid var(--border-divider); - user-select: none; - position: relative; - &:hover { - cursor: pointer; - } - - &__label { - padding: 0.8rem; - width: 35%; - .text-wrapper { - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - display: -webkit-box; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - } - - @include mobile { - width: 40%; - padding-inline-start: 0; - } - } - - &__time-stamp { - width: 20%; - padding: 0.8rem; - @include mobile { - width: 25%; - } - } - - &__load-type { - @extend .flex-align-center; - width: 25%; - padding: 0.8rem; - - .dc-icon { - margin-inline-end: 0.8rem; - } - } - - &__actions { - @include flex-center(flex-end); - width: 20%; - padding: 0.8rem; - justify-content: flex-end; - &__action-item { - margin-inline-end: 1.6rem; - &:last-child { - margin-inline: 0; - } - } - - @include mobile { - width: 10%; - } - - button { - background: transparent; - border: none; - width: unset; - padding: 0; - } - } - - &__responsive { - background: var(--general-main-1); - box-shadow: - 0 0 2rem rgba(0, 0, 0, 0.05), - 0 1.6rem 2rem rgba(0, 0, 0, 0.05); - display: none; - min-width: 15rem; - position: absolute; - inset-inline-end: 3rem; - top: 4rem; - z-index: 100; - &--active { - display: block; - } - - &__menu { - align-items: center; - display: flex; - height: 4rem; - padding: 0.8rem 1.1rem; - .dc-icon { - margin-inline-end: 0.8rem; - } - - &:last-child { - box-shadow: inset 0 0.1rem 0 var(--border-divider); - } - } - } - - &:nth-last-child(-n + 4) { - .bot-list__item__responsive { - top: -15rem; - &--min { - top: 1rem; - inset-inline-end: 6rem; - } - } - } - - &--selected { - background-color: var(--general-section-1); - } - } -} diff --git a/src/pages/dashboard/common/index.ts b/src/pages/dashboard/common/index.ts deleted file mode 100644 index 6346a38e..00000000 --- a/src/pages/dashboard/common/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import LoadBotPreview from './local'; - -import './index.scss'; - -export default LoadBotPreview; diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/common/info-panel.tsx similarity index 100% rename from src/pages/dashboard/info-panel.tsx rename to src/pages/dashboard/common/info-panel.tsx diff --git a/src/pages/dashboard/common/local-footer.tsx b/src/pages/dashboard/common/local-footer.tsx deleted file mode 100644 index 79f921de..00000000 --- a/src/pages/dashboard/common/local-footer.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { observer } from 'mobx-react-lite'; - -import { Button } from '@deriv-com/ui'; - -import { useStore } from '@/hooks/useStore'; -import { localize } from '@/utils/tmp/dummy'; - -import './index.scss'; - -const LocalFooter = observer(() => { - const { ui } = useStore(); - const { load_modal, dashboard } = useStore(); - const { is_open_button_loading, loadFileFromLocal, setLoadedLocalFile, toggleLoadModal } = load_modal; - const { setPreviewOnPopup } = dashboard; - - const { is_mobile } = ui; - const Wrapper = is_mobile ? Button.Group : React.Fragment; - return ( - - {is_mobile && ( - - ); - return ( -
-
-
-
- {!is_mobile && } -
- - setPreviewOnDialog(false)} - is_mobile_full_width - className='dc-dialog__wrapper--preview' - has_close_icon - title={localize('Preview')} - onConfirm={() => null} - > - -
{renderOpenButton()}
- - -
-
-
- ); -}); - -export default LocalComponent; diff --git a/src/pages/dashboard/common/recent-footer.tsx b/src/pages/dashboard/common/recent-footer.tsx deleted file mode 100644 index fb796496..00000000 --- a/src/pages/dashboard/common/recent-footer.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { observer } from 'mobx-react-lite'; - -import { Button } from '@deriv-com/ui'; - -import { useStore } from '@/hooks/useStore'; -import { localize } from '@/utils/tmp/dummy'; - -import './index.scss'; - -const RecentFooter = observer(() => { - const { load_modal } = useStore(); - const { is_open_button_loading, loadFileFromRecent } = load_modal; - return ( - - -
- {CONTEXT_MENU_MOBILE.map(item => ( -
{ - e.stopPropagation(); - viewRecentStrategy(item.type); - }} - > -
- -
- - {item.label} - -
- ))} -
- - - ); -}); - -export default RecentWorkspace; diff --git a/src/pages/dashboard/common/recent.tsx b/src/pages/dashboard/common/recent.tsx deleted file mode 100644 index f2750357..00000000 --- a/src/pages/dashboard/common/recent.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React from 'react'; -import { observer } from 'mobx-react-lite'; - -import { Text } from '@deriv-com/ui'; - -import MobileWrapper from '@/components/shared_ui/mobile-wrapper'; -import { getSavedWorkspaces } from '@/external/bot-skeleton'; -import { useStore } from '@/hooks/useStore'; -import { Localize, localize } from '@/utils/tmp/dummy'; - -import DeleteDialog from './delete-dialog'; -import RecentWorkspace from './recent-workspace'; -import SaveModal from './save-modal'; - -import './index.scss'; - -type THeader = { - label: string; - className: string; -}; - -const HEADERS: THeader[] = [ - { - label: localize('Bot name'), - className: 'bot-list__header__label', - }, - { - label: localize('Last modified'), - className: 'bot-list__header__time-stamp', - }, - { - label: localize('Status'), - className: 'bot-list__header__load-type', - }, -]; - -const RecentComponent = observer(() => { - const { load_modal, dashboard } = useStore(); - const { setDashboardStrategies, dashboard_strategies } = load_modal; - const { setStrategySaveType, strategy_save_type } = dashboard; - const { ui } = useStore(); - const { is_mobile } = ui; - const get_first_strategy_info = React.useRef(false); - const get_instacee = React.useRef(false); - - React.useEffect(() => { - setStrategySaveType(''); - const getStrategies = async () => { - const recent_strategies = await getSavedWorkspaces(); - setDashboardStrategies(recent_strategies); - if (!get_instacee.current) { - get_instacee.current = true; - } - }; - getStrategies(); - //this dependency is used when we use the save modal popup - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [strategy_save_type]); - - React.useEffect(() => { - if (!dashboard_strategies?.length && !get_first_strategy_info.current) { - get_first_strategy_info.current = true; - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - if (!dashboard_strategies?.length) return null; - return ( -
-
-
-
- - - -
-
- {HEADERS.map(({ label, className }) => { - return ( -
- - {label} - -
- ); - })} -
-
- {dashboard_strategies.map((workspace, index) => { - return ; - })} -
- - - - -
-
-
- ); -}); - -export default RecentComponent; diff --git a/src/pages/dashboard/common/icon-radio.tsx b/src/pages/dashboard/common/save-modal-dialog/icon-radio.tsx similarity index 100% rename from src/pages/dashboard/common/icon-radio.tsx rename to src/pages/dashboard/common/save-modal-dialog/icon-radio.tsx diff --git a/src/pages/dashboard/common/save-modal.scss b/src/pages/dashboard/common/save-modal-dialog/save-modal.scss similarity index 100% rename from src/pages/dashboard/common/save-modal.scss rename to src/pages/dashboard/common/save-modal-dialog/save-modal.scss diff --git a/src/pages/dashboard/common/save-modal.tsx b/src/pages/dashboard/common/save-modal-dialog/save-modal.tsx similarity index 100% rename from src/pages/dashboard/common/save-modal.tsx rename to src/pages/dashboard/common/save-modal-dialog/save-modal.tsx diff --git a/src/pages/dashboard/stop-bot-modal-content.tsx b/src/pages/dashboard/common/stop-bot-dialog/stop-bot-modal-content.tsx similarity index 100% rename from src/pages/dashboard/stop-bot-modal-content.tsx rename to src/pages/dashboard/common/stop-bot-dialog/stop-bot-modal-content.tsx diff --git a/src/pages/dashboard/common/stop-bot-modal.tsx b/src/pages/dashboard/common/stop-bot-dialog/stop-bot-modal.tsx similarity index 93% rename from src/pages/dashboard/common/stop-bot-modal.tsx rename to src/pages/dashboard/common/stop-bot-dialog/stop-bot-modal.tsx index fbd75af9..c003dd7b 100644 --- a/src/pages/dashboard/common/stop-bot-modal.tsx +++ b/src/pages/dashboard/common/stop-bot-dialog/stop-bot-modal.tsx @@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'; import { useStore } from '@/hooks/useStore'; -import StopBotModalContent from '../stop-bot-modal-content'; +import StopBotModalContent from './stop-bot-modal-content'; const StopBotModal = observer(() => { const { run_panel, quick_strategy, summary_card } = useStore(); diff --git a/src/pages/dashboard/dashboard-bot-list.tsx b/src/pages/dashboard/dashboard-bot-list.tsx new file mode 100644 index 00000000..2eb3b16c --- /dev/null +++ b/src/pages/dashboard/dashboard-bot-list.tsx @@ -0,0 +1,137 @@ +import { isMobileOs } from '@/components/shared'; +import { DBOT_TABS } from '@/constants/bot-contents'; +import { MENU_DESKTOP, STRATEGY } from '@/constants/dashboard'; +import { getSavedWorkspaces, timeSince } from '@/external/bot-skeleton'; +import { useStore } from '@/hooks/useStore'; +import { waitForDomElement } from '@/utils/dom-observer'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + + +const DashboardBotList = observer(() => { + const { load_modal, dashboard, save_modal } = useStore(); + const { + dashboard_strategies, + setDashboardStrategies, + onToggleDeleteDialog, + loadFileFromRecent, + setPreviewedStrategyId, + previewRecentStrategy, + } = load_modal; + const { setActiveTab, active_tab, setPreviewOnDialog } = dashboard; + const { updateBotName, toggleSaveModal } = save_modal; + const is_mobile = isMobileOs(); + + React.useEffect(() => { + let strategies; + const getStrategies = async () => { + strategies = await getSavedWorkspaces(); + setDashboardStrategies(strategies); + }; + getStrategies(); + }, []); + + const handleInit = (workspace: any) => { + setPreviewedStrategyId(workspace?.id); + // Fires for desktop + if (active_tab === 0) { + previewRecentStrategy(workspace.id); + } + }; + + const handlePreviewList = (workspace: any) => { + setPreviewedStrategyId(workspace.id); + // Fires for mobile on clicking preview button + if (is_mobile) { + setPreviewOnDialog(true); + const dashboard_tab_dom_element = document.getElementsByClassName('tab__dashboard')?.[0]; + waitForDomElement('#load-strategy__blockly-container', dashboard_tab_dom_element).then(() => { + previewRecentStrategy(workspace.id); + }); + } + }; + + const handleEdit = async () => { + await loadFileFromRecent(); + setActiveTab(DBOT_TABS.BOT_BUILDER); + }; + + const handleSave = (workspace: any) => { + updateBotName(workspace?.name); + toggleSaveModal(); + }; + + const viewRecentStrategy = async (type: string, workspace: any) => { + //setSelectedStrategyId(workspace.id); + switch (type) { + case STRATEGY.INIT: + // Fires for desktop preview + handleInit(workspace); + break; + + case STRATEGY.PREVIEW_LIST: + // Fires for mobile preview + handlePreviewList(workspace); + break; + + case STRATEGY.EDIT: + await handleEdit(); + break; + + case STRATEGY.SAVE: + handleSave(workspace); + break; + + case STRATEGY.DELETE: + onToggleDeleteDialog(true); + break; + + default: + break; + } + }; + + if (!dashboard_strategies) return null; + return ( +
+
Your Bots
+ + + + + + + + + + + {dashboard_strategies.map((workspace, index) => ( + + + + + + + ))} + +
Bot NameLast ModifiedStatus
{workspace.name} + {timeSince(workspace.timestamp)} + {workspace.save_type} + {MENU_DESKTOP.map(item => ( +
{ + e.stopPropagation(); + viewRecentStrategy(item.type, workspace); + }} + > + {item.type} +
+ ))} +
+
+ ); +}); + +export default DashboardBotList; \ No newline at end of file diff --git a/src/pages/dashboard/dashboard-quick-actions.tsx b/src/pages/dashboard/dashboard-quick-actions.tsx new file mode 100644 index 00000000..e2441618 --- /dev/null +++ b/src/pages/dashboard/dashboard-quick-actions.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { observer } from 'mobx-react-lite'; +import { useStore } from '@/hooks/useStore'; +import { DBOT_TABS } from '@/constants/bot-contents'; +import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils'; + +const DashboardQuickActions = observer(() => { + const { dashboard, load_modal } = useStore(); + const { showVideoDialog, setActiveTab, setFileLoaded, setOpenSettings } = dashboard; + const { handleFileChange, loadFileFromLocal } = load_modal; + const load_file_ref = React.useRef(null); + const [is_file_supported, setIsFileSupported] = React.useState(true); + const openFileLoader = () => { + load_file_ref?.current?.click(); + }; + const openGoogleDriveDialog = () => { + showVideoDialog({ + type: 'google', + }); + }; + const quick_actions = [ + { + type: 'my-computer', + icon: My computer, + content: 'My Computer', + onClickHandler: () => openFileLoader(), + }, + { + type: 'google-drive', + icon: Google Drive, + content: 'Google Drive', + onClickHandler: () => openGoogleDriveDialog(), + }, + { + type: 'bot-builder', + icon: Bot Builder, + content: 'Bot Builder', + onClickHandler: () => { + setActiveTab(DBOT_TABS.BOT_BUILDER); + }, + }, + { + type: 'quick-strategy', + icon: Quick strategy, + content: 'Quick strategy', + onClickHandler: () => { + setActiveTab(DBOT_TABS.BOT_BUILDER); + }, + }, + ]; + return ( +
+ {quick_actions.map(icons => { + const { icon, content, onClickHandler } = icons; + return ( +
+
{icon}
+
{content}
+
+ ); + })} + { + setIsFileSupported(handleFileChange(e, false)); + loadFileFromLocal(); + setFileLoaded(true); + setOpenSettings(NOTIFICATION_TYPE.BOT_IMPORT); + }} + /> +
+ ); +}); + + +export default DashboardQuickActions; \ No newline at end of file diff --git a/src/pages/dashboard/dashboard.scss b/src/pages/dashboard/dashboard.scss index a14a539b..1c14ecf9 100644 --- a/src/pages/dashboard/dashboard.scss +++ b/src/pages/dashboard/dashboard.scss @@ -14,7 +14,7 @@ $spacing-medium: 3rem; outline: none; border-radius: 2.4rem; } -.bot-dashboard{ +.bot-dashboard { position: relative; } .dashboard { @@ -28,17 +28,35 @@ $spacing-medium: 3rem; width: 90%; } margin: 0 auto; - max-height: 40rem; - overflow: auto; &__table { width: 100%; + display: block; &__title { + // display: block; + // &:nth-child(1) { + // width: 41%; + // } + // &:nth-child(2) { + // width: 21%; + // } + // &:nth-child(3) { + // width: 20%; + // } + // &:nth-child(4) { + // width: 20%; + // } + font-size: 1.4rem; font-weight: bold; - border-bottom: 1px solid var(--border-divider); - margin-bottom: 1.6rem; + padding-bottom: 1.6rem; + } + &__body { + display: block; + max-height: 35rem; + overflow: auto; } &__row { + border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); &__bot_name, &__last_modified, @@ -47,8 +65,17 @@ $spacing-medium: 3rem; padding: 0.8rem 0; font-size: 14px; } + + &__bot_name { + width: 40%; + } + &__last_modified, + &__status { + width: 20%; + } &__actions { display: flex; + &--item { margin-inline-end: 1.6rem; cursor: pointer; diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index 04637bdb..d9b90ae1 100644 --- a/src/pages/dashboard/dashboard.tsx +++ b/src/pages/dashboard/dashboard.tsx @@ -1,201 +1,15 @@ import React from 'react'; import { observer } from 'mobx-react-lite'; import { useStore } from '@/hooks/useStore'; -import { DBOT_TABS } from '@/constants/bot-contents'; -import { getSavedWorkspaces, timeSince } from '@/external/bot-skeleton'; -import { MENU_DESKTOP, STRATEGY } from '@/constants/dashboard'; -import DeleteDialog from './common/delete-dialog'; -import { waitForDomElement } from '@/utils/dom-observer'; -import { isMobileOs } from '@/components/shared'; -import SaveModal from './common/save-modal'; - -const DashboardQuickActions = observer(() => { - const { dashboard } = useStore(); - const { showVideoDialog, setActiveTab } = dashboard; - const load_file_ref = React.useRef(null); - const openFileLoader = () => { - load_file_ref?.current?.click(); - }; - const openGoogleDriveDialog = () => { - showVideoDialog({ - type: 'google', - }); - }; - const quick_actions = [ - { - type: 'my-computer', - icon: My computer, - content: 'My Computer', - onClickHandler: () => openFileLoader(), - }, - { - type: 'google-drive', - icon: Google Drive, - content: 'Google Drive', - onClickHandler: () => openGoogleDriveDialog(), - }, - { - type: 'bot-builder', - icon: Bot Builder, - content: 'Bot Builder', - onClickHandler: () => { - setActiveTab(DBOT_TABS.BOT_BUILDER); - }, - }, - { - type: 'quick-strategy', - icon: Quick strategy, - content: 'Quick strategy', - onClickHandler: () => { - setActiveTab(DBOT_TABS.BOT_BUILDER); - }, - }, - ]; - return ( -
- {quick_actions.map(icons => { - const { icon, content, onClickHandler } = icons; - return ( -
-
{icon}
-
{content}
-
- ); - })} - {}} /> -
- ); -}); - -const DashboardBotList = observer(() => { - const { load_modal, dashboard, save_modal } = useStore(); - const { - dashboard_strategies, - setDashboardStrategies, - onToggleDeleteDialog, - loadFileFromRecent, - setPreviewedStrategyId, - previewRecentStrategy, - } = load_modal; - const { setActiveTab, active_tab, setPreviewOnDialog } = dashboard; - const { updateBotName, toggleSaveModal } = save_modal; - const is_mobile = isMobileOs(); - - React.useEffect(() => { - let strategies; - const getStrategies = async () => { - strategies = await getSavedWorkspaces(); - setDashboardStrategies(strategies); - }; - getStrategies(); - }, []); - - - const handleInit = (workspace: any) => { - setPreviewedStrategyId(workspace?.id); - // Fires for desktop - if (active_tab === 0) { - previewRecentStrategy(workspace.id); - } - }; - - const handlePreviewList = (workspace: any) => { - setPreviewedStrategyId(workspace.id); - // Fires for mobile on clicking preview button - if (is_mobile) { - setPreviewOnDialog(true); - const dashboard_tab_dom_element = document.getElementsByClassName('tab__dashboard')?.[0]; - waitForDomElement('#load-strategy__blockly-container', dashboard_tab_dom_element).then(() => { - previewRecentStrategy(workspace.id); - }); - } - }; - - const handleEdit = async () => { - await loadFileFromRecent(); - setActiveTab(DBOT_TABS.BOT_BUILDER); - }; - - const handleSave = (workspace: any) => { - updateBotName(workspace?.name); - toggleSaveModal(); - }; - - const viewRecentStrategy = async (type: string, workspace: any) => { - //setSelectedStrategyId(workspace.id); - switch (type) { - case STRATEGY.INIT: - // Fires for desktop preview - handleInit(workspace); - break; - - case STRATEGY.PREVIEW_LIST: - // Fires for mobile preview - handlePreviewList(workspace); - break; - - case STRATEGY.EDIT: - await handleEdit(); - break; - - case STRATEGY.SAVE: - handleSave(workspace); - break; - - case STRATEGY.DELETE: - onToggleDeleteDialog(true); - break; - - default: - break; - } - }; - - if(!dashboard_strategies) return null; - return ( -
-
Your Bots
- - - - - - {dashboard_strategies.map((workspace, index) => { - const { name, timestamp, save_type } = workspace; - return ( - - - - - - - ); - })} -
Bot NameLast ModifiedStatusAction
{name}{timeSince(timestamp)}{save_type} - {MENU_DESKTOP.map(item => { - return ( -
{ - e.stopPropagation(); - viewRecentStrategy(item.type, workspace); - }} - > - -
- ); - })} -
-
- ); -}); +import DeleteDialog from './common/delete-dialog/delete-dialog'; +import SaveModal from './common/save-modal-dialog/save-modal'; +import DashboardQuickActions from './dashboard-quick-actions'; +import DashboardBotList from './dashboard-bot-list'; const Dashboard = observer(() => { - const onClickUserGuide = () => { - }; - const { load_modal } = useStore(); - const { setDashboardStrategies} = load_modal; + const onClickUserGuide = () => {}; + const { load_modal } = useStore(); + const { setDashboardStrategies } = load_modal; return (
diff --git a/src/pages/dashboard/intro-card.tsx b/src/pages/dashboard/intro-card.tsx deleted file mode 100644 index 8180181b..00000000 --- a/src/pages/dashboard/intro-card.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { TSidebarItem } from './constants'; - -type TIntroCard = { - sidebar_item: TSidebarItem; -}; - -const Index = ({ sidebar_item }: TIntroCard) => { - const { label, content } = sidebar_item; - return ( -
-

{label}

- {content?.map(text =>

{text}

)} -
- ); -}; - -export default Index; diff --git a/src/pages/dashboard/user-guide.tsx b/src/pages/dashboard/user-guide.tsx deleted file mode 100644 index 2e5fd77f..00000000 --- a/src/pages/dashboard/user-guide.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -import { Text } from '@deriv-com/ui'; - -import { DBOT_TABS } from '@/constants/bot-contents'; -import { Icon, localize } from '@/utils/tmp/dummy'; - -type TUserGuide = { - is_mobile?: boolean; - handleTabChange: (item: number) => void; - setActiveTabTutorial: (active_tab: number) => void; -}; - -const UserGuide: React.FC = ({ is_mobile, handleTabChange, setActiveTabTutorial }) => { - return ( -
- -
- ); -}; - -export default UserGuide; diff --git a/src/pages/dashboard/run-strategy.tsx b/src/pages/main/common/run-strategy.tsx similarity index 100% rename from src/pages/dashboard/run-strategy.tsx rename to src/pages/main/common/run-strategy.tsx diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx index 0950dfa8..ae9a1380 100644 --- a/src/pages/main/main.tsx +++ b/src/pages/main/main.tsx @@ -20,7 +20,7 @@ import RunPanel from '../../components/run-panel'; import Chart from '../chart'; import ChartModal from '../chart/chart-modal'; import Dashboard from '../dashboard'; -import RunStrategy from '../dashboard/run-strategy'; +import RunStrategy from './common/run-strategy'; import Tutorial from '../tutorials'; const AppWrapper = observer(() => { From 8d00cf9eb8acf22fdb5ab8429499a8a9e9a1aa8e Mon Sep 17 00:00:00 2001 From: Rupato Date: Tue, 2 Jul 2024 12:28:46 +0800 Subject: [PATCH 3/9] fix: added icons for dashboard --- public/ic-save.svg | 1 - public/ic-user-guide.svg | 1 - public/{ => icons}/deriv-logo.svg | 0 public/{ => icons}/ic-bot-builder.svg | 0 public/{ => icons}/ic-cross.svg | 0 public/{ => icons}/ic-delete.svg | 0 public/icons/ic-edit.svg | 1 + public/{ => icons}/ic-google-drive.svg | 0 public/icons/ic-menu-dots.svg | 1 + public/{ => icons}/ic-my-computer.svg | 0 public/{ => icons}/ic-open.svg | 0 public/{ => icons}/ic-quick-strategy.svg | 0 public/icons/ic-save.svg | 1 + public/icons/ic-user-guide.svg | 1 + src/components/shared_ui/dialog/dialog.tsx | 5 +- src/constants/dashboard.ts | 16 ++--- src/pages/dashboard/dashboard-bot-list.tsx | 43 +++++++---- .../dashboard/dashboard-quick-actions.tsx | 17 ++--- src/pages/dashboard/dashboard.scss | 71 +++++++++++++------ src/pages/dashboard/dashboard.tsx | 6 +- 20 files changed, 110 insertions(+), 54 deletions(-) delete mode 100644 public/ic-save.svg delete mode 100644 public/ic-user-guide.svg rename public/{ => icons}/deriv-logo.svg (100%) rename public/{ => icons}/ic-bot-builder.svg (100%) rename public/{ => icons}/ic-cross.svg (100%) rename public/{ => icons}/ic-delete.svg (100%) create mode 100644 public/icons/ic-edit.svg rename public/{ => icons}/ic-google-drive.svg (100%) create mode 100644 public/icons/ic-menu-dots.svg rename public/{ => icons}/ic-my-computer.svg (100%) rename public/{ => icons}/ic-open.svg (100%) rename public/{ => icons}/ic-quick-strategy.svg (100%) create mode 100644 public/icons/ic-save.svg create mode 100644 public/icons/ic-user-guide.svg diff --git a/public/ic-save.svg b/public/ic-save.svg deleted file mode 100644 index a410ab6c..00000000 --- a/public/ic-save.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/ic-user-guide.svg b/public/ic-user-guide.svg deleted file mode 100644 index 68e3a88c..00000000 --- a/public/ic-user-guide.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/deriv-logo.svg b/public/icons/deriv-logo.svg similarity index 100% rename from public/deriv-logo.svg rename to public/icons/deriv-logo.svg diff --git a/public/ic-bot-builder.svg b/public/icons/ic-bot-builder.svg similarity index 100% rename from public/ic-bot-builder.svg rename to public/icons/ic-bot-builder.svg diff --git a/public/ic-cross.svg b/public/icons/ic-cross.svg similarity index 100% rename from public/ic-cross.svg rename to public/icons/ic-cross.svg diff --git a/public/ic-delete.svg b/public/icons/ic-delete.svg similarity index 100% rename from public/ic-delete.svg rename to public/icons/ic-delete.svg diff --git a/public/icons/ic-edit.svg b/public/icons/ic-edit.svg new file mode 100644 index 00000000..44037311 --- /dev/null +++ b/public/icons/ic-edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ic-google-drive.svg b/public/icons/ic-google-drive.svg similarity index 100% rename from public/ic-google-drive.svg rename to public/icons/ic-google-drive.svg diff --git a/public/icons/ic-menu-dots.svg b/public/icons/ic-menu-dots.svg new file mode 100644 index 00000000..e28383f1 --- /dev/null +++ b/public/icons/ic-menu-dots.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ic-my-computer.svg b/public/icons/ic-my-computer.svg similarity index 100% rename from public/ic-my-computer.svg rename to public/icons/ic-my-computer.svg diff --git a/public/ic-open.svg b/public/icons/ic-open.svg similarity index 100% rename from public/ic-open.svg rename to public/icons/ic-open.svg diff --git a/public/ic-quick-strategy.svg b/public/icons/ic-quick-strategy.svg similarity index 100% rename from public/ic-quick-strategy.svg rename to public/icons/ic-quick-strategy.svg diff --git a/public/icons/ic-save.svg b/public/icons/ic-save.svg new file mode 100644 index 00000000..980a3eef --- /dev/null +++ b/public/icons/ic-save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/ic-user-guide.svg b/public/icons/ic-user-guide.svg new file mode 100644 index 00000000..7984f430 --- /dev/null +++ b/public/icons/ic-user-guide.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/shared_ui/dialog/dialog.tsx b/src/components/shared_ui/dialog/dialog.tsx index 1fafca13..200a1cb6 100644 --- a/src/components/shared_ui/dialog/dialog.tsx +++ b/src/components/shared_ui/dialog/dialog.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import classNames from 'classnames'; import ReactDOM from 'react-dom'; import { CSSTransition } from 'react-transition-group'; +import classNames from 'classnames'; + // import Icon from '../icon/icon'; // import Button from '../button/button'; import Text from '../text'; @@ -147,7 +148,7 @@ const Dialog = ({ )} {has_close_icon && (
- + {/* */}
)} diff --git a/src/constants/dashboard.ts b/src/constants/dashboard.ts index b25294b5..4db3773c 100644 --- a/src/constants/dashboard.ts +++ b/src/constants/dashboard.ts @@ -1,4 +1,4 @@ -import { localize } from '@/utils/tmp/dummy'; +// import { localize } from '@/utils/tmp/dummy'; export const STRATEGY = { EDIT: 'edit', @@ -12,15 +12,15 @@ export const STRATEGY = { export const MENU_DESKTOP = [ { type: STRATEGY.EDIT, - icon: '/ic-open.svg', + icon: 'icons/ic-open.svg', }, { type: STRATEGY.SAVE, - icon: '/ic-save.svg', + icon: 'icons/ic-save.svg', }, { type: STRATEGY.DELETE, - icon: '/ic-delete.svg', + icon: 'icons/ic-delete.svg', }, ]; @@ -28,21 +28,21 @@ export const CONTEXT_MENU_MOBILE = [ { type: STRATEGY.PREVIEW_LIST, icon: 'IcPreview', - label: localize('Preview'), + label: 'Preview', }, { type: STRATEGY.EDIT, icon: 'IcEdit', - label: localize('Edit'), + label: 'Edit', }, { type: STRATEGY.SAVE, icon: 'IcSave', - label: localize('Save'), + label: 'Save', }, { type: STRATEGY.DELETE, icon: 'IcDelete', - label: localize('Delete'), + label: 'Delete', }, ]; diff --git a/src/pages/dashboard/dashboard-bot-list.tsx b/src/pages/dashboard/dashboard-bot-list.tsx index 2eb3b16c..cd164f7c 100644 --- a/src/pages/dashboard/dashboard-bot-list.tsx +++ b/src/pages/dashboard/dashboard-bot-list.tsx @@ -1,12 +1,12 @@ +import React from 'react'; +import { observer } from 'mobx-react-lite'; + import { isMobileOs } from '@/components/shared'; import { DBOT_TABS } from '@/constants/bot-contents'; -import { MENU_DESKTOP, STRATEGY } from '@/constants/dashboard'; +import { CONTEXT_MENU_MOBILE, MENU_DESKTOP, STRATEGY } from '@/constants/dashboard'; import { getSavedWorkspaces, timeSince } from '@/external/bot-skeleton'; import { useStore } from '@/hooks/useStore'; import { waitForDomElement } from '@/utils/dom-observer'; -import { observer } from 'mobx-react-lite'; -import React from 'react'; - const DashboardBotList = observer(() => { const { load_modal, dashboard, save_modal } = useStore(); @@ -96,12 +96,12 @@ const DashboardBotList = observer(() => {
Your Bots
- - - - - - + + + + + + @@ -116,7 +116,7 @@ const DashboardBotList = observer(() => { {MENU_DESKTOP.map(item => (
{ e.stopPropagation(); viewRecentStrategy(item.type, workspace); @@ -125,6 +125,25 @@ const DashboardBotList = observer(() => { {item.type}
))} + + {CONTEXT_MENU_MOBILE.map(item => ( +
{ + e.stopPropagation(); + viewRecentStrategy(item.type, workspace); + }} + > +
+ {/* */} + {item.type} +
+ {item.label} +
+ ))} ))} @@ -134,4 +153,4 @@ const DashboardBotList = observer(() => { ); }); -export default DashboardBotList; \ No newline at end of file +export default DashboardBotList; diff --git a/src/pages/dashboard/dashboard-quick-actions.tsx b/src/pages/dashboard/dashboard-quick-actions.tsx index e2441618..33d7970b 100644 --- a/src/pages/dashboard/dashboard-quick-actions.tsx +++ b/src/pages/dashboard/dashboard-quick-actions.tsx @@ -1,14 +1,16 @@ import React from 'react'; import { observer } from 'mobx-react-lite'; -import { useStore } from '@/hooks/useStore'; -import { DBOT_TABS } from '@/constants/bot-contents'; + import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils'; +import { DBOT_TABS } from '@/constants/bot-contents'; +import { useStore } from '@/hooks/useStore'; const DashboardQuickActions = observer(() => { const { dashboard, load_modal } = useStore(); const { showVideoDialog, setActiveTab, setFileLoaded, setOpenSettings } = dashboard; const { handleFileChange, loadFileFromLocal } = load_modal; const load_file_ref = React.useRef(null); + /* eslint-disable @typescript-eslint/no-unused-vars */ const [is_file_supported, setIsFileSupported] = React.useState(true); const openFileLoader = () => { load_file_ref?.current?.click(); @@ -21,19 +23,19 @@ const DashboardQuickActions = observer(() => { const quick_actions = [ { type: 'my-computer', - icon: My computer, + icon: My computer, content: 'My Computer', onClickHandler: () => openFileLoader(), }, { type: 'google-drive', - icon: Google Drive, + icon: Google Drive, content: 'Google Drive', onClickHandler: () => openGoogleDriveDialog(), }, { type: 'bot-builder', - icon: Bot Builder, + icon: Bot Builder, content: 'Bot Builder', onClickHandler: () => { setActiveTab(DBOT_TABS.BOT_BUILDER); @@ -41,7 +43,7 @@ const DashboardQuickActions = observer(() => { }, { type: 'quick-strategy', - icon: Quick strategy, + icon: Quick strategy, content: 'Quick strategy', onClickHandler: () => { setActiveTab(DBOT_TABS.BOT_BUILDER); @@ -75,5 +77,4 @@ const DashboardQuickActions = observer(() => { ); }); - -export default DashboardQuickActions; \ No newline at end of file +export default DashboardQuickActions; diff --git a/src/pages/dashboard/dashboard.scss b/src/pages/dashboard/dashboard.scss index 1c14ecf9..f096e8c2 100644 --- a/src/pages/dashboard/dashboard.scss +++ b/src/pages/dashboard/dashboard.scss @@ -14,9 +14,11 @@ $spacing-medium: 3rem; outline: none; border-radius: 2.4rem; } + .bot-dashboard { position: relative; } + .dashboard { background: var(--general-main-1); height: calc(100vh - 16.6rem); @@ -24,40 +26,44 @@ $spacing-medium: 3rem; &__botlist { width: 70rem; - @media screen and (max-width: 991px) { + + @media screen and (width <= 991px) { width: 90%; } + margin: 0 auto; + &__table { width: 100%; + height: 35rem; + overflow: auto; display: block; - &__title { - // display: block; - // &:nth-child(1) { - // width: 41%; - // } - // &:nth-child(2) { - // width: 21%; - // } - // &:nth-child(3) { - // width: 20%; - // } - // &:nth-child(4) { - // width: 20%; - // } + &__header { + position: relative; + + &__row { + position: sticky; + background: #fff; + top: 0; + } + } + + &__title { font-size: 1.4rem; font-weight: bold; padding-bottom: 1.6rem; } + &__body { - display: block; max-height: 35rem; overflow: auto; } + &__row { border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); + &__bot_name, &__last_modified, &__status, @@ -69,10 +75,12 @@ $spacing-medium: 3rem; &__bot_name { width: 40%; } + &__last_modified, &__status { width: 20%; } + &__actions { display: flex; @@ -80,6 +88,22 @@ $spacing-medium: 3rem; margin-inline-end: 1.6rem; cursor: pointer; } + + .desktop { + display: block; + + @media screen and (width <= 991px) { + display: none; + } + } + + .mobile { + display: none; + + @media screen and (width <= 991px) { + display: block; + } + } } } } @@ -92,12 +116,14 @@ $spacing-medium: 3rem; } &__description { - font-weight: 300; font-size: 16px; font-weight: normal; + @include align-center; + margin-bottom: $spacing-medium; - @media screen and (max-width: 991px) { + + @media screen and (width <= 991px) { width: 90%; margin: 0 auto; margin-bottom: $spacing-medium; @@ -112,14 +138,17 @@ $spacing-medium: 3rem; &__user-guide-button, &__quickactions { @include align-center; - @media screen and (max-width: 991px) { + + @media screen and (width <= 991px) { justify-content: space-around; } + margin-bottom: $spacing-medium; } &__user-guide-button { @include button-styles; + margin-top: 1.8rem; margin-right: 2.4rem; } @@ -127,12 +156,14 @@ $spacing-medium: 3rem; &__quickactions { &__card { margin-inline-end: 4rem; - @media screen and (max-width: 991px) { + + @media screen and (width <= 991px) { margin-inline-end: unset; } &__icon { @include align-center; + font-size: 3.2rem; width: 8rem; height: 8rem; diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index d9b90ae1..8901a373 100644 --- a/src/pages/dashboard/dashboard.tsx +++ b/src/pages/dashboard/dashboard.tsx @@ -1,10 +1,12 @@ import React from 'react'; import { observer } from 'mobx-react-lite'; + import { useStore } from '@/hooks/useStore'; + import DeleteDialog from './common/delete-dialog/delete-dialog'; import SaveModal from './common/save-modal-dialog/save-modal'; -import DashboardQuickActions from './dashboard-quick-actions'; import DashboardBotList from './dashboard-bot-list'; +import DashboardQuickActions from './dashboard-quick-actions'; const Dashboard = observer(() => { const onClickUserGuide = () => {}; @@ -15,7 +17,7 @@ const Dashboard = observer(() => {
From 94bd51fa71ee91fc65811e5482758f0377e9f803 Mon Sep 17 00:00:00 2001 From: Rupato Date: Tue, 2 Jul 2024 12:54:08 +0800 Subject: [PATCH 4/9] fix: eslint --- package.json | 4 ++-- src/components/shared_ui/dialog/dialog.tsx | 8 ++++---- src/external/bot-skeleton/utils/date-time-helper.js | 3 +-- .../dashboard/common/delete-dialog/delete-dialog.tsx | 10 ++++------ src/pages/dashboard/common/info-panel.tsx | 2 +- src/pages/main/main.tsx | 8 ++++---- 6 files changed, 16 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 57fdb871..f39b2a97 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ }, "scripts": { "start": "vite", - "start:dev": "vite-live-preview --reload --port=8444", + "start:dev": "vite-live-preview --reload --port=8443", "build": "vite build", "preview": "vite preview", "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"", @@ -119,4 +119,4 @@ "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.6.0" } -} +} \ No newline at end of file diff --git a/src/components/shared_ui/dialog/dialog.tsx b/src/components/shared_ui/dialog/dialog.tsx index 200a1cb6..0c0a4ef8 100644 --- a/src/components/shared_ui/dialog/dialog.tsx +++ b/src/components/shared_ui/dialog/dialog.tsx @@ -1,12 +1,9 @@ +/* eslint-disable simple-import-sort/imports */ import React from 'react'; import ReactDOM from 'react-dom'; import { CSSTransition } from 'react-transition-group'; import classNames from 'classnames'; - -// import Icon from '../icon/icon'; -// import Button from '../button/button'; import Text from '../text'; -// import { useOnClickOutside } from '../../hooks'; type TDialog = { cancel_button_text?: string; @@ -149,6 +146,7 @@ const Dialog = ({ {has_close_icon && (
+ {/* TODO: need to fix this component by importing the Icon in shared UI */} {/* */}
)} @@ -163,6 +161,7 @@ const Dialog = ({ )}
{!!onCancel && ( + //TODO: need to fix this component by importing the button in shared UI //
+
Load or build your bot
Import a bot from your computer or Google Drive, build it from scratch, or start with a quick strategy. From 35f1e68de1f83d709fd6c7cb9e0c39d4089854a8 Mon Sep 17 00:00:00 2001 From: Rupato Date: Mon, 8 Jul 2024 12:16:30 +0800 Subject: [PATCH 8/9] fix: context menu --- public/icons/ic-local.svg | 13 ++++ public/icons/ic-preview.svg | 1 + src/constants/dashboard.ts | 8 +-- src/pages/dashboard/dashboard-bot-list.tsx | 84 +++++++++++++--------- src/pages/dashboard/dashboard.scss | 26 ++++++- 5 files changed, 95 insertions(+), 37 deletions(-) create mode 100644 public/icons/ic-local.svg create mode 100644 public/icons/ic-preview.svg diff --git a/public/icons/ic-local.svg b/public/icons/ic-local.svg new file mode 100644 index 00000000..94324f16 --- /dev/null +++ b/public/icons/ic-local.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/icons/ic-preview.svg b/public/icons/ic-preview.svg new file mode 100644 index 00000000..9571bfcc --- /dev/null +++ b/public/icons/ic-preview.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/constants/dashboard.ts b/src/constants/dashboard.ts index 4db3773c..ddbc152d 100644 --- a/src/constants/dashboard.ts +++ b/src/constants/dashboard.ts @@ -27,22 +27,22 @@ export const MENU_DESKTOP = [ export const CONTEXT_MENU_MOBILE = [ { type: STRATEGY.PREVIEW_LIST, - icon: 'IcPreview', + icon: 'icons/ic-preview.svg', label: 'Preview', }, { type: STRATEGY.EDIT, - icon: 'IcEdit', + icon: 'icons/ic-edit.svg', label: 'Edit', }, { type: STRATEGY.SAVE, - icon: 'IcSave', + icon: 'icons/ic-save.svg', label: 'Save', }, { type: STRATEGY.DELETE, - icon: 'IcDelete', + icon: 'icons/ic-delete.svg', label: 'Delete', }, ]; diff --git a/src/pages/dashboard/dashboard-bot-list.tsx b/src/pages/dashboard/dashboard-bot-list.tsx index 5b081bfc..425d963f 100644 --- a/src/pages/dashboard/dashboard-bot-list.tsx +++ b/src/pages/dashboard/dashboard-bot-list.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; import { observer } from 'mobx-react-lite'; import { isMobileOs } from '@/components/shared'; @@ -20,6 +21,7 @@ const DashboardBotList = observer(() => { } = load_modal; const { setActiveTab, active_tab, setPreviewOnDialog } = dashboard; const { updateBotName, toggleSaveModal } = save_modal; + const [dropdown_active, setDropdownActive] = React.useState(false); const is_mobile = isMobileOs(); React.useEffect(() => { @@ -91,6 +93,53 @@ const DashboardBotList = observer(() => { } }; + const DashboardActionsMobile = (workspace: any) => { + return ( + <> + +
+ {CONTEXT_MENU_MOBILE.map(item => ( +
{ + e.stopPropagation(); + viewRecentStrategy(item.type, workspace); + }} + > + {item.type} + {item.label} +
+ ))} +
+ + ); + }; + + const DashboardActionsDesktop = (workspace: any) => { + return MENU_DESKTOP.map(item => ( +
{ + e.stopPropagation(); + viewRecentStrategy(item.type, workspace); + }} + > + {item.type} +
+ )); + }; + if (dashboard_strategies.length === 0) return null; return (
@@ -101,7 +150,7 @@ const DashboardBotList = observer(() => {
- @@ -113,37 +162,8 @@ const DashboardBotList = observer(() => { ))} diff --git a/src/pages/dashboard/dashboard.scss b/src/pages/dashboard/dashboard.scss index 87d3a0a3..81fb26d4 100644 --- a/src/pages/dashboard/dashboard.scss +++ b/src/pages/dashboard/dashboard.scss @@ -37,7 +37,8 @@ $spacing-medium: 3rem; width: 100%; height: 30rem; overflow: auto; - display: block; + + // display: block; &__header { position: relative; @@ -82,6 +83,7 @@ $spacing-medium: 3rem; } &__actions { + position: relative; display: flex; &--item { @@ -104,6 +106,28 @@ $spacing-medium: 3rem; display: block; } } + + .bot-list__item { + &__responsive__menu { + min-width: 15rem; + position: absolute; + inset-inline-end: 3rem; + z-index: 100; + background: #fff; + box-shadow: + 0 0 2rem rgb(0 0 0 / 5%), + 0 1.6rem 2rem rgb(0 0 0 / 5%); + display: none; + + &--active { + display: block; + } + } + + &__action-item { + display: flex; + } + } } } } From 28f9c775789b3f2ecf8d0a829e436ad21fd41848 Mon Sep 17 00:00:00 2001 From: Rupato Date: Mon, 8 Jul 2024 12:23:14 +0800 Subject: [PATCH 9/9] fix: assests folder --- public/{ => assets}/icons/deriv-logo.svg | 0 public/{ => assets}/icons/ic-bot-builder.svg | 0 public/{ => assets}/icons/ic-cross.svg | 0 public/{ => assets}/icons/ic-delete.svg | 0 public/{ => assets}/icons/ic-edit.svg | 0 public/{ => assets}/icons/ic-google-drive.svg | 0 public/{ => assets}/icons/ic-local.svg | 0 public/{ => assets}/icons/ic-menu-dots.svg | 0 public/{ => assets}/icons/ic-my-computer.svg | 0 public/{ => assets}/icons/ic-open.svg | 0 public/{ => assets}/icons/ic-preview.svg | 0 public/{ => assets}/icons/ic-quick-strategy.svg | 0 public/{ => assets}/icons/ic-save.svg | 0 public/{ => assets}/icons/ic-user-guide.svg | 0 14 files changed, 0 insertions(+), 0 deletions(-) rename public/{ => assets}/icons/deriv-logo.svg (100%) rename public/{ => assets}/icons/ic-bot-builder.svg (100%) rename public/{ => assets}/icons/ic-cross.svg (100%) rename public/{ => assets}/icons/ic-delete.svg (100%) rename public/{ => assets}/icons/ic-edit.svg (100%) rename public/{ => assets}/icons/ic-google-drive.svg (100%) rename public/{ => assets}/icons/ic-local.svg (100%) rename public/{ => assets}/icons/ic-menu-dots.svg (100%) rename public/{ => assets}/icons/ic-my-computer.svg (100%) rename public/{ => assets}/icons/ic-open.svg (100%) rename public/{ => assets}/icons/ic-preview.svg (100%) rename public/{ => assets}/icons/ic-quick-strategy.svg (100%) rename public/{ => assets}/icons/ic-save.svg (100%) rename public/{ => assets}/icons/ic-user-guide.svg (100%) diff --git a/public/icons/deriv-logo.svg b/public/assets/icons/deriv-logo.svg similarity index 100% rename from public/icons/deriv-logo.svg rename to public/assets/icons/deriv-logo.svg diff --git a/public/icons/ic-bot-builder.svg b/public/assets/icons/ic-bot-builder.svg similarity index 100% rename from public/icons/ic-bot-builder.svg rename to public/assets/icons/ic-bot-builder.svg diff --git a/public/icons/ic-cross.svg b/public/assets/icons/ic-cross.svg similarity index 100% rename from public/icons/ic-cross.svg rename to public/assets/icons/ic-cross.svg diff --git a/public/icons/ic-delete.svg b/public/assets/icons/ic-delete.svg similarity index 100% rename from public/icons/ic-delete.svg rename to public/assets/icons/ic-delete.svg diff --git a/public/icons/ic-edit.svg b/public/assets/icons/ic-edit.svg similarity index 100% rename from public/icons/ic-edit.svg rename to public/assets/icons/ic-edit.svg diff --git a/public/icons/ic-google-drive.svg b/public/assets/icons/ic-google-drive.svg similarity index 100% rename from public/icons/ic-google-drive.svg rename to public/assets/icons/ic-google-drive.svg diff --git a/public/icons/ic-local.svg b/public/assets/icons/ic-local.svg similarity index 100% rename from public/icons/ic-local.svg rename to public/assets/icons/ic-local.svg diff --git a/public/icons/ic-menu-dots.svg b/public/assets/icons/ic-menu-dots.svg similarity index 100% rename from public/icons/ic-menu-dots.svg rename to public/assets/icons/ic-menu-dots.svg diff --git a/public/icons/ic-my-computer.svg b/public/assets/icons/ic-my-computer.svg similarity index 100% rename from public/icons/ic-my-computer.svg rename to public/assets/icons/ic-my-computer.svg diff --git a/public/icons/ic-open.svg b/public/assets/icons/ic-open.svg similarity index 100% rename from public/icons/ic-open.svg rename to public/assets/icons/ic-open.svg diff --git a/public/icons/ic-preview.svg b/public/assets/icons/ic-preview.svg similarity index 100% rename from public/icons/ic-preview.svg rename to public/assets/icons/ic-preview.svg diff --git a/public/icons/ic-quick-strategy.svg b/public/assets/icons/ic-quick-strategy.svg similarity index 100% rename from public/icons/ic-quick-strategy.svg rename to public/assets/icons/ic-quick-strategy.svg diff --git a/public/icons/ic-save.svg b/public/assets/icons/ic-save.svg similarity index 100% rename from public/icons/ic-save.svg rename to public/assets/icons/ic-save.svg diff --git a/public/icons/ic-user-guide.svg b/public/assets/icons/ic-user-guide.svg similarity index 100% rename from public/icons/ic-user-guide.svg rename to public/assets/icons/ic-user-guide.svg
Bot NameLast ModifiedStatus
Bot NameLast ModifiedStatus
Bot Name Last Modified Status + {}
{workspace.save_type} - {MENU_DESKTOP.map(item => ( -
{ - e.stopPropagation(); - viewRecentStrategy(item.type, workspace); - }} - > - {item.type} -
- ))} - - {CONTEXT_MENU_MOBILE.map(item => ( -
{ - e.stopPropagation(); - viewRecentStrategy(item.type, workspace); - }} - > -
- {/* */} - {item.type} -
- {item.label} -
- ))} + +