Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: hide focus pointer when the associated element is out of view in welcome tour (#14216)

Browse Source
This commit is contained in:
akash-codemonk 2022-06-16 10:04:42 +05:30 committed by GitHub
parent 32f9adef21
commit 1514734b27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/src/ce/constants/messages.ts
View File

@ -1135,7 +1135,7 @@ export const END_TUTORIAL = () => "END TUTORIAL";
export const TITLE = () => export const TITLE = () =>
"In this tutorial we’ll build a tool to display customer information"; "In this tutorial we’ll build a tool to display customer information";
export const DESCRIPTION = () => export const DESCRIPTION = () =>
"This tool has a table that displays customer data and a form to update a particular customer record. Try out the tool below before you start building this."; "This tool has a table that displays customer data and a form to update a particular customer record. Try out the tool below before you start building.";
export const BUTTON_TEXT = () => "Start Building"; export const BUTTON_TEXT = () => "Start Building";
// -- Rating -- // -- Rating --
export const RATING_TITLE = () => export const RATING_TITLE = () =>

2
app/client/src/pages/Editor/GuidedTour/constants.tsx
View File

@ -392,7 +392,7 @@ export const Steps: StepsType = {
{ {
text: ( text: (
<> <>
In the property pane of Name input, add the{" "} In the property pane of {GuidedTourEntityNames.NAME_INPUT}, add the{" "}
<b> <b>
<code> <code>
&#123;&#123;CustomersTable.selectedRow.name&#125;&#125; &#123;&#123;CustomersTable.selectedRow.name&#125;&#125;

26
app/client/src/pages/Editor/GuidedTour/utils.ts
View File

@ -33,6 +33,12 @@ class IndicatorHelper {
} }
const coordinates = getCoordinates(primaryReference); const coordinates = getCoordinates(primaryReference);
if (coordinates.hidden) {
this.indicatorWrapper.style.display = "none";
} else {
this.indicatorWrapper.style.display = "initial";
}
// Remove previous indicator if it is unable to find the // Remove previous indicator if it is unable to find the
// correct position // correct position
if (coordinates.width === 0) { if (coordinates.width === 0) {
@ -117,8 +123,21 @@ class IndicatorHelper {
} }
const indicatorHelperInstance = new IndicatorHelper(); const indicatorHelperInstance = new IndicatorHelper();
function getCoordinates(elem: Element) { // To check if the element is behind another element for e.g when it is scrolled
const box = elem.getBoundingClientRect(); // out of view
function isBehindOtherElement(element: Element, boundingRect: DOMRect) {
const { bottom, left, right, top } = boundingRect;
if (element.contains(document.elementFromPoint(left, top))) return false;
if (element.contains(document.elementFromPoint(right, top))) return false;
if (element.contains(document.elementFromPoint(left, bottom))) return false;
if (element.contains(document.elementFromPoint(right, bottom))) return false;
return true;
}
function getCoordinates(element: Element) {
const box = element.getBoundingClientRect();
return { return {
top: box.top + window.pageYOffset, top: box.top + window.pageYOffset,
@ -127,6 +146,9 @@ function getCoordinates(elem: Element) {
left: box.left + window.pageXOffset, left: box.left + window.pageXOffset,
width: box.width, width: box.width,
height: box.height, height: box.height,
// If the element present is not the same as the one we are interested in
// we set the hidden flag to true to hide it using `display: none`.
hidden: isBehindOtherElement(element, box),
}; };
} }