Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FLOWS-79] - Feat: control tools guide and modal #153

Merged
merged 4 commits into from
Oct 27, 2023
Merged

[FLOWS-79] - Feat: control tools guide and modal #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a8158b
feat: control tools guide and modal
paulobernardoaf Oct 25, 2023
e57ce37
fix: update snapshots
paulobernardoaf Oct 25, 2023
0dd8317
Merge branch 'feat/find-starting-node-button' into feat/control-tools…
paulobernardoaf Oct 27, 2023
4b14e6e
fix: find start text-wrap
paulobernardoaf Oct 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@
simulateResume: null
},
showNewUpdates: false,
initialGuide: 'v2'
};
showFlowEditor(document.getElementById('floweditor'), config);
</script>
Expand Down
13 changes: 13 additions & 0 deletions src/components/canvas/Canvas.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
89 changes: 66 additions & 23 deletions src/components/canvas/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -423,6 +424,12 @@ export class Canvas extends React.PureComponent<CanvasProps, CanvasState> {
this.props.onMouseStateChange(MouseState.DRAG);
}
}

if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
event.preventDefault();
event.stopPropagation();
this.moveToStart();
}
}

private handleKeyUp(event: any): void {
Expand Down Expand Up @@ -973,10 +980,9 @@ export class Canvas extends React.PureComponent<CanvasProps, CanvasState> {
}

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;

Expand Down Expand Up @@ -1052,28 +1058,65 @@ export class Canvas extends React.PureComponent<CanvasProps, CanvasState> {

{this.state.panzoomInstance && (
<div className={styles.zoom_control}>
<UnnnicTooltip
className={styles.zoom_tooltip}
text="Zoom"
enabled={true}
<GuidingSteps
guide="control_tools"
step={1}
title={i18n.t('guiding.control_tools.1.title', 'Zoom tool')}
description={i18n.t(
'guiding.control_tools.1.description',
`Now you can zoom in and zoom out natively, without having to zoom in on the entire browser, which also helps with the navigability of cards.`
)}
buttonText={i18n.t('guiding.v2.1.button', 'Got it 2/3')}
side="top"
align="arrow_left"
>
<UnnnicTooltip
className={styles.zoom_tooltip}
text="Zoom"
enabled={true}
side="top"
shortcutText={(getOS() === 'Macintosh' ? 'Cmd' : 'Ctrl') + ' + Scroll'}
>
<div className={styles.out} onClick={() => this.handleZoomClick(0)}>
<span className="material-symbols-rounded">remove</span>
</div>
<div className={styles.percentage}>
{this.state.currentZoom}
<span className="material-symbols-rounded">percent</span>
</div>
<div className={styles.in} onClick={() => this.handleZoomClick(1)}>
<span className="material-symbols-rounded">add</span>
</div>
</UnnnicTooltip>
</GuidingSteps>

<GuidingSteps
guide="control_tools"
step={2}
title={i18n.t('guiding.control_tools.2.title', 'Start of flow')}
description={i18n.t(
'guiding.control_tools.2.description',
`Your flow is too big and sometimes you get lost? Your problems are over, just click here or use the shortcut Ctrl + Enter to go back to the beginning of your flow.`
)}
buttonText={i18n.t('guiding.v2.2.button', 'Got it 3/3')}
side="top"
shortcutText={(getOS() === 'Macintosh' ? 'Cmd' : 'Ctrl') + ' + Scroll'}
align="arrow_left"
>
<div className={styles.out} onClick={() => this.handleZoomClick(0)}>
<span className="material-symbols-rounded">remove</span>
</div>
<div className={styles.percentage}>
{this.state.currentZoom}
<span className="material-symbols-rounded">percent</span>
</div>
<div className={styles.in} onClick={() => this.handleZoomClick(1)}>
<span className="material-symbols-rounded">add</span>
</div>
</UnnnicTooltip>
<div className={styles.start} onClick={() => this.moveToStart()}>
<span className={styles.hide}>{i18n.t('to_flow_start', 'Start of flow')}</span>
<span className="material-symbols-rounded">arrow_upward</span>
</div>
<UnnnicTooltip
className={styles.start_tooltip}
text=""
enabled={true}
side="right"
shortcutText={(getOS() === 'Macintosh' ? 'Cmd' : 'Ctrl') + ' + Enter'}
>
<div className={styles.start} onClick={() => this.moveToStart()}>
<span className={styles.hide}>
{i18n.t('to_flow_start', 'Start of flow')}
</span>
<span className="material-symbols-rounded">arrow_upward</span>
</div>
</UnnnicTooltip>
</GuidingSteps>
</div>
)}
</div>
Expand Down
Loading
Loading