diff --git a/public/index.html b/public/index.html index 9d45ce6da..516115632 100644 --- a/public/index.html +++ b/public/index.html @@ -218,6 +218,7 @@ simulateResume: null }, showNewUpdates: false, + initialGuide: 'v2' }; showFlowEditor(document.getElementById('floweditor'), config); diff --git a/src/components/canvas/Canvas.module.scss b/src/components/canvas/Canvas.module.scss index c6eebc531..84298403d 100644 --- a/src/components/canvas/Canvas.module.scss +++ b/src/components/canvas/Canvas.module.scss @@ -88,6 +88,19 @@ $background_offset: ($grid_size / 2) + ($node_padding) + px; } } + .start_tooltip { + overflow-wrap: unset; + white-space: nowrap; + + :last-child { + left: 300px !important; + + br { + display: none; + } + } + } + .in, .out, .start { display: flex; width: $unnnic-spacing-xl; diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index a08e6c9af..37d507b0e 100644 --- a/src/components/canvas/Canvas.tsx +++ b/src/components/canvas/Canvas.tsx @@ -1,6 +1,7 @@ import { react as bindCallbacks } from 'auto-bind'; import panzoom, { PanZoom } from 'panzoom'; import { CanvasDraggable, CanvasDraggableProps } from 'components/canvas/CanvasDraggable'; +import GuidingSteps from 'components/guidingsteps/GuidingSteps'; import { getDraggablesInBox, reflow } from 'components/canvas/helpers'; import { DRAG_THRESHOLD } from 'components/flow/Flow'; import { Dimensions, Exit, FlowNode, FlowPosition } from 'flowTypes'; @@ -423,6 +424,12 @@ export class Canvas extends React.PureComponent { this.props.onMouseStateChange(MouseState.DRAG); } } + + if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { + event.preventDefault(); + event.stopPropagation(); + this.moveToStart(); + } } private handleKeyUp(event: any): void { @@ -973,10 +980,9 @@ export class Canvas extends React.PureComponent { } private moveToStart() { - const startingNode = this.getStartingNode(); + const { position } = this.getStartingNode(); - if (startingNode) { - const { position } = startingNode; + if (position) { const viewportWidth = document.documentElement.clientWidth; const scale = this.state.panzoomInstance.getTransform().scale; @@ -1052,28 +1058,65 @@ export class Canvas extends React.PureComponent { {this.state.panzoomInstance && (
- + +
this.handleZoomClick(0)}> + remove +
+
+ {this.state.currentZoom} + percent +
+
this.handleZoomClick(1)}> + add +
+ + + + -
this.handleZoomClick(0)}> - remove -
-
- {this.state.currentZoom} - percent -
-
this.handleZoomClick(1)}> - add -
- -
this.moveToStart()}> - {i18n.t('to_flow_start', 'Start of flow')} - arrow_upward -
+ +
this.moveToStart()}> + + {i18n.t('to_flow_start', 'Start of flow')} + + arrow_upward +
+ +
)} diff --git a/src/components/canvas/__snapshots__/Canvas.test.tsx.snap b/src/components/canvas/__snapshots__/Canvas.test.tsx.snap index 9c146b764..7bf07041e 100644 --- a/src/components/canvas/__snapshots__/Canvas.test.tsx.snap +++ b/src/components/canvas/__snapshots__/Canvas.test.tsx.snap @@ -31,78 +31,117 @@ exports[`Canvas adjusts the height when updating dimensions 1`] = ` class="zoom_control" >
- - remove - -
-
- 100 - + remove + +
+
- percent - + 100 + + percent + +
+
+ + add + +
-
+ Zoom +
- add + Ctrl + Scroll -
+
- +
+
+
+
- Zoom -
+ style="all: unset;" + > +
+ + Start of flow + + + arrow_upward + +
+
- Ctrl + Scroll + +
+ + Ctrl + Enter + - +
-
- - Start of flow - - - arrow_upward - -
@@ -142,78 +181,117 @@ exports[`Canvas initializes the height to the lowest draggable 1`] = ` class="zoom_control" >
- - remove - -
-
- 100 - + remove + +
+
- percent - + 100 + + percent + +
+
+ + add + +
-
+ Zoom +
- add + Ctrl + Scroll -
+
- +
+
+
+
- Zoom -
+ style="all: unset;" + > +
+ + Start of flow + + + arrow_upward + +
+
- Ctrl + Scroll + +
+ + Ctrl + Enter + - +
-
- - Start of flow - - - arrow_upward - -
@@ -256,78 +334,117 @@ exports[`Canvas render default 1`] = ` class="zoom_control" >
- - remove - -
-
- 100 - + remove + +
+
- percent - + 100 + + percent + +
+
+ + add + +
-
+ Zoom +
- add + Ctrl + Scroll -
+
- +
+
+
+
- Zoom -
+ style="all: unset;" + > +
+ + Start of flow + + + arrow_upward + +
+
- Ctrl + Scroll + +
+ + Ctrl + Enter + - +
-
- - Start of flow - - - arrow_upward - -
diff --git a/src/components/flow/Flow.tsx b/src/components/flow/Flow.tsx index 74e89d369..8d491127f 100644 --- a/src/components/flow/Flow.tsx +++ b/src/components/flow/Flow.tsx @@ -421,7 +421,10 @@ export class Flow extends React.PureComponent { } private startGuiding() { - this.props.mergeEditorState({ currentGuide: 'v2', guidingStep: 0 }); + const initialGuide = this.context.config.initialGuide; + if (initialGuide) { + this.props.mergeEditorState({ currentGuide: initialGuide, guidingStep: 0 }); + } } private showNewUpdatesModal(): void { @@ -447,30 +450,37 @@ export class Flow extends React.PureComponent { */}
- •  {i18n.t('new_updates.news.first', 'The editor is faster')} • {' '} {i18n.t( - 'new_updates.news.second', - 'Two new cards for processing responses in a 100% intelligent way' + 'new_updates.news.first', + 'Now you can use your “little hand” to navigate in your flow' + )} + + •  {i18n.t('new_updates.news.second', 'Zoom tool')} + + • {' '} + {i18n.t( + 'new_updates.news.third', + "It's easier to know where your flow is going with the new colors on the arrows that connect the blocks" )} • {' '} - {i18n.t('new_updates.news.third', 'Copy and paste any type of card without worrying')} + {i18n.t( + 'new_updates.news.fourth', + 'The feedback modal is different and takes up less space on your screen' + )} • {' '} - {i18n.t('new_updates.news.fourth', 'Bugs fixed in the selection component on cards')} + {i18n.t('new_updates.news.fifth', "Now it's easier to find the start of your flow")}
- {i18n.t( - 'new_updates.footer', - 'Feel free to send feedbacks about your experience clicking on the detective' - )} + {i18n.t('new_updates.footer', 'Feel free to send feedbacks about your experience')}
@@ -483,7 +493,7 @@ export class Flow extends React.PureComponent { ReactDOM.unmountComponentAtNode(newUpdatesModalEl); }} /> - {/* { this.startGuiding(); ReactDOM.unmountComponentAtNode(newUpdatesModalEl); }} - /> */} + /> , newUpdatesModalEl diff --git a/src/components/guidingsteps/GuidingSteps.module.scss b/src/components/guidingsteps/GuidingSteps.module.scss index 651fff9f8..9d147ead1 100644 --- a/src/components/guidingsteps/GuidingSteps.module.scss +++ b/src/components/guidingsteps/GuidingSteps.module.scss @@ -62,10 +62,18 @@ background-color: $unnnic-color-brand-weni-soft; width: 100%; } + + &.arrow_left { + + &::before { + left: 2.5%; + } + } } .top { top: calc(var(--tooltip-margin) * -1); + transform: translateX(-2%) translateY(-100%); &::before { top: 100%; diff --git a/src/components/guidingsteps/GuidingSteps.tsx b/src/components/guidingsteps/GuidingSteps.tsx index ccbff0d61..5a9f4fd27 100644 --- a/src/components/guidingsteps/GuidingSteps.tsx +++ b/src/components/guidingsteps/GuidingSteps.tsx @@ -34,6 +34,8 @@ export interface GuidingStepsProps { description: string; buttonText: string; side?: string; + align?: string; + action?: () => void; } export class GuidingSteps extends React.Component< @@ -46,6 +48,10 @@ export class GuidingSteps extends React.Component< private nextGuide(): void { this.props.mergeEditorState({ guidingStep: this.props.guidingStep + 1 }); + + if (this.props.action) { + this.props.action(); + } } private shouldRenderGuide(): boolean { @@ -56,12 +62,15 @@ export class GuidingSteps extends React.Component< public render(): JSX.Element { const directionStyle = this.props.side ? styles[this.props.side] : styles.right; + const arrowAlign = this.props.align ? styles[this.props.align] : styles.arrow_center; return (
{this.props.children} {this.shouldRenderGuide() && ( -
+
{this.props.title} diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 919551ef5..4bfca4b04 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -143,24 +143,35 @@ export class Sidebar extends React.PureComponent { public render(): JSX.Element { return (
- -
this.toggleMouseState()}> - {this.props.mouseState === MouseState.SELECT ? ( - near_me - ) : ( - back_hand - )} -
- + +
this.toggleMouseState()}> + {this.props.mouseState === MouseState.SELECT ? ( + near_me + ) : ( + back_hand + )} +
+ + { this.preloadBgImage(); } + private startNextTour() { + this.props.mergeEditorState({ currentGuide: 'control_tools', guidingStep: 0 }); + } + public render(): ReactNode { const simStyle = this.state.simulatorStyle === 'whatsapp' ? styles.whatsapp : ''; @@ -1152,6 +1156,7 @@ export class Simulator extends React.Component { )} buttonText={i18n.t('guiding.v2.2.button', 'Got it 3/3')} side="left" + action={() => this.startNextTour()} >
diff --git a/src/components/simulator/__snapshots__/Simulator.test.ts.snap b/src/components/simulator/__snapshots__/Simulator.test.ts.snap index 5435736bb..b447b5061 100644 --- a/src/components/simulator/__snapshots__/Simulator.test.ts.snap +++ b/src/components/simulator/__snapshots__/Simulator.test.ts.snap @@ -153,6 +153,7 @@ exports[`Simulator renders 1`] = `