Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/VC-115/live-editor-support' into…
Browse files Browse the repository at this point in the history 
… VC-115/live-editor-support
  • Loading branch information
@hiteshshetty-dev
hiteshshetty-dev committed Oct 9, 2024
2 parents a607170 + 17979e3 commit f93c4e0
Show file tree
Hide file tree
Showing 9 changed files with 93 additions and 53 deletions.
4 changes: 3 additions & 1 deletion src/visualBuilder/components/CommentIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,10 @@ export default function CommentIcon(props: CommentIconProps) {
className={classNames(
"visual-builder__button visual-builder__button--secondary",
visualBuilderStyles()["visual-builder__button"],
visualBuilderStyles()["visual-builder__button--secondary"]
visualBuilderStyles()["visual-builder__button--secondary"],
visualBuilderStyles()["visual-builder__tooltip"]
)}
data-tooltip={"Add comment"}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
Expand Down
4 changes: 1 addition & 3 deletions src/visualBuilder/components/CslpError.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,7 @@ export function CslpError({}: CslpErrorProps) {
>
<p>Invalid CSLP tag</p>
<span>
Due to the invalid CSLP tag, the related Contentstack
field cannot be identified, and therefore, the content
cannot be modified.
The CSLP is invalid or incorrectly generated.
</span>
</div>
) : null}
Expand Down
20 changes: 15 additions & 5 deletions src/visualBuilder/components/FieldToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,10 @@ function FieldToolbarComponent(
"visual-builder__button visual-builder__button--secondary visual-builder__button--edit",
visualBuilderStyles()["visual-builder__button"],
visualBuilderStyles()["visual-builder__button--secondary"],
visualBuilderStyles()["visual-builder__button--edit"]
visualBuilderStyles()["visual-builder__button--edit"],
visualBuilderStyles()["visual-builder__tooltip"]
)}
data-tooltip={"Edit"}
onClick={(e) => {
// TODO the listener for field path is attached to the common parent requiring
// propagation to be stopped, should ideally only attach onClick to fieldpath dropdown
Expand All @@ -161,8 +163,10 @@ function FieldToolbarComponent(
className={classNames(
"visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
visualBuilderStyles()["visual-builder__button"],
visualBuilderStyles()["visual-builder__button--secondary"]
visualBuilderStyles()["visual-builder__button--secondary"],
visualBuilderStyles()["visual-builder__tooltip"]
)}
data-tooltip={"Replace"}
data-testid={`visual-builder-replace-${fieldType}`}
onClick={(e) => {
e.stopPropagation();
Expand Down Expand Up @@ -229,8 +233,10 @@ function FieldToolbarComponent(
],
visualBuilderStyles()[
"visual-builder__button--secondary"
]
],
visualBuilderStyles()["visual-builder__tooltip"]
)}
data-tooltip={direction.value === "vertical"?"Move up":"Move left"}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
Expand Down Expand Up @@ -262,8 +268,10 @@ function FieldToolbarComponent(
],
visualBuilderStyles()[
"visual-builder__button--secondary"
]
],
visualBuilderStyles()["visual-builder__tooltip"]
)}
data-tooltip={direction.value === "vertical"?"Move down":"Move right"}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
Expand Down Expand Up @@ -295,8 +303,10 @@ function FieldToolbarComponent(
],
visualBuilderStyles()[
"visual-builder__button--secondary"
]
],
visualBuilderStyles()["visual-builder__tooltip"]
)}
data-tooltip={"Delete"}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
Expand Down
4 changes: 3 additions & 1 deletion src/visualBuilder/components/addInstanceButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,10 @@ function AddInstanceButtonComponent(
visualBuilderStyles()["visual-builder__add-button"],
{
"visual-builder__add-button--with-label": props.label,
}
},
visualBuilderStyles()["visual-builder__tooltip"]
)}
data-tooltip={"Add section"}
data-testid="visual-builder-add-instance-button"
disabled={disabled}
title={
Expand Down
3 changes: 1 addition & 2 deletions src/visualBuilder/components/emptyBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,7 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
visualBuilderStyles()["visual-builder__empty-block-title"]
)}
>
There are no {blockParentName.toLowerCase()} to show in this
section.
There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.
</div>
<button
className={classNames(
Expand Down
2 changes: 1 addition & 1 deletion src/visualBuilder/components/fieldLabelWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ function FieldLabelWrapperComponent(
icon: fieldDisabled ? (
<div
className={classNames(
visualBuilderStyles()["visual-builder__tooltip"]
visualBuilderStyles()["visual-builder__tooltip--persistent"]
)}
data-tooltip={reason}
>
Expand Down
2 changes: 1 addition & 1 deletion src/visualBuilder/generators/__test__/generateToolbar.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ describe("appendFieldPathDropdown", () => {
});

test("should not do anything if tooltip is already present", () => {
focusedToolbar.classList.add("visual-builder__tooltip");
focusedToolbar.classList.add("visual-builder__tooltip--persistent");

appendFieldPathDropdown(mockEventDetails, focusedToolbar);

Expand Down
9 changes: 9 additions & 0 deletions src/visualBuilder/listeners/mouseHover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,15 @@ async function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {
}

if (params.customCursor) {
const elementUnderCursor = document.elementFromPoint(params.event.clientX, params.event.clientY);
if(elementUnderCursor){
if(elementUnderCursor.nodeName === "A" || elementUnderCursor.nodeName === "BUTTON"){
elementUnderCursor.classList.add(
visualBuilderStyles()['visual-builder__no-cursor-style']
)
}
}

if (
VisualBuilder.VisualBuilderGlobalState.value
.previousHoveredTargetDOM !== editableElement
Expand Down
98 changes: 59 additions & 39 deletions src/visualBuilder/visualBuilder.style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,40 @@
import { css } from "goober";


const tooltipBaseStyle = `
pointer-events: all;
svg {
pointer-events: none;
}
&:before {
content: attr(data-tooltip);
position: absolute;
bottom: 20px;
margin-bottom: 16px;
padding: 12px;
border-radius: 4px;
width: max-content;
max-width: 200px;
color: #fff;
font-family: Inter;
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: 132%; /* 0.99rem */
letter-spacing: 0.015rem;
background: #767676;
}
&:after {
content: "";
position: absolute;
bottom: 17px;
/* the arrow */
border: 10px solid #000;
border-color: #767676 transparent transparent transparent;
}
`;


export function visualBuilderStyles() {
return {
"visual-builder__container": css`
Expand Down Expand Up @@ -381,51 +416,33 @@ export function visualBuilderStyles() {
}
`,
"visual-builder__tooltip": css`
pointer-events: all;
svg {
pointer-events: none;
}
${tooltipBaseStyle}
&:before {
content: attr(data-tooltip);
position: absolute;
bottom: 20px;
left: -16px;
margin-bottom: 16px;
padding: 12px;
border-radius: 4px;
width: max-content;
max-width: 200px;
display: block;
&:before {
display: none;
}
color: #fff;
background: #909090;
font-family: Inter;
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: 132%; /* 0.99rem */
letter-spacing: 0.015rem;
text-align: left;
}
&:hover:before,
&:hover:after {
display: block;
}
&:after {
content: "";
position: absolute;
&:after {
display: none;
}
`,

bottom: 17px;
"visual-builder__tooltip--persistent": css`
${tooltipBaseStyle}
/* the arrow */
border: 10px solid #000;
border-color: #909090 transparent transparent transparent;
&:before {
display: block;
}
display: block;
}
`,
&:after {
display: block;
}
`,
"visual-builder__empty-block": css`
width: 100%;
height: 100%;
Expand Down Expand Up @@ -604,6 +621,9 @@ export function visualBuilderStyles() {
margin-bottom: 4px;
}
`,
"visual-builder__no-cursor-style": css`
cursor: none !important;
`
};
}

Expand Down

0 comments on commit f93c4e0

Please sign in to comment.