From a18c38ebf711a189d9b9540b52866f631252e333 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 10:54:57 +0530 Subject: [PATCH 1/4] feat: created seperate class for permenant tooltip --- .../components/fieldLabelWrapper.tsx | 2 +- .../__test__/generateToolbar.test.ts | 2 +- src/visualBuilder/visualBuilder.style.ts | 48 +++++++++++++++++++ 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/src/visualBuilder/components/fieldLabelWrapper.tsx b/src/visualBuilder/components/fieldLabelWrapper.tsx index d21ff9a7..25559e21 100644 --- a/src/visualBuilder/components/fieldLabelWrapper.tsx +++ b/src/visualBuilder/components/fieldLabelWrapper.tsx @@ -118,7 +118,7 @@ function FieldLabelWrapperComponent( icon: fieldDisabled ? (
diff --git a/src/visualBuilder/generators/__test__/generateToolbar.test.ts b/src/visualBuilder/generators/__test__/generateToolbar.test.ts index 975aa500..8445cdf6 100644 --- a/src/visualBuilder/generators/__test__/generateToolbar.test.ts +++ b/src/visualBuilder/generators/__test__/generateToolbar.test.ts @@ -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); diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index 9c199185..b336600a 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -381,6 +381,54 @@ export function visualBuilderStyles() { } `, "visual-builder__tooltip": css` + 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; + display: none; + + color: #fff; + background: #767676; + font-family: Inter; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 132%; /* 0.99rem */ + letter-spacing: 0.015rem; + } + + &:hover:before, + &:hover:after { + display: block; + } + &:after { + content: ""; + position: absolute; + + bottom: 17px; + + /* the arrow */ + border: 10px solid #000; + border-color: #767676 transparent transparent transparent; + + display: none; + } + `, + "visual-builder__tooltip--persistent": css` pointer-events: all; svg { From a018d0f4c79c52ac84dba09844bc9412c14bfd59 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 11:12:28 +0530 Subject: [PATCH 2/4] feat: code cleaning --- src/visualBuilder/visualBuilder.style.ts | 122 +++++++++-------------- 1 file changed, 47 insertions(+), 75 deletions(-) diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index b336600a..90b8ae50 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -1,5 +1,38 @@ 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; + } + &:after { + content: ""; + position: absolute; + bottom: 17px; + border: 10px solid #000; + border-color: transparent transparent transparent transparent; + } +`; + + export function visualBuilderStyles() { return { "visual-builder__container": css` @@ -381,98 +414,37 @@ export function visualBuilderStyles() { } `, "visual-builder__tooltip": css` - pointer-events: all; - - svg { - pointer-events: none; - } + ${tooltipBaseStyle} &:before { - content: attr(data-tooltip); - position: absolute; - - bottom: 20px; - margin-bottom: 16px; - - padding: 12px; - border-radius: 4px; - - width: max-content; - max-width: 200px; - display: none; - - color: #fff; background: #767676; - font-family: Inter; - font-size: 0.75rem; - font-style: normal; - font-weight: 400; - line-height: 132%; /* 0.99rem */ - letter-spacing: 0.015rem; + display: none; } &:hover:before, &:hover:after { display: block; } - &:after { - content: ""; - position: absolute; - - bottom: 17px; - /* the arrow */ - border: 10px solid #000; + &:after { border-color: #767676 transparent transparent transparent; - display: none; } `, - "visual-builder__tooltip--persistent": css` - 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; - display: block; - - 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; - } + "visual-builder__tooltip--persistent": css` + ${tooltipBaseStyle} - &:after { - content: ""; - position: absolute; - - bottom: 17px; - - /* the arrow */ - border: 10px solid #000; - border-color: #909090 transparent transparent transparent; + &:before { + background: #909090; + display: block; + } - display: block; - } - `, + &:after { + border-color: #909090 transparent transparent transparent; + display: block; + } + `, "visual-builder__empty-block": css` width: 100%; height: 100%; From f33a11e827ac51a4e9785199acc38924c8e32980 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 12:20:24 +0530 Subject: [PATCH 3/4] fix: code cleaning --- src/visualBuilder/visualBuilder.style.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index 90b8ae50..43a8ed21 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -22,13 +22,14 @@ const tooltipBaseStyle = ` font-weight: 400; line-height: 132%; /* 0.99rem */ letter-spacing: 0.015rem; + background: #767676; } &:after { content: ""; position: absolute; bottom: 17px; border: 10px solid #000; - border-color: transparent transparent transparent transparent; + border-color: #767676 transparent transparent transparent; } `; @@ -417,7 +418,6 @@ export function visualBuilderStyles() { ${tooltipBaseStyle} &:before { - background: #767676; display: none; } @@ -427,7 +427,6 @@ export function visualBuilderStyles() { } &:after { - border-color: #767676 transparent transparent transparent; display: none; } `, @@ -436,12 +435,10 @@ export function visualBuilderStyles() { ${tooltipBaseStyle} &:before { - background: #909090; display: block; } &:after { - border-color: #909090 transparent transparent transparent; display: block; } `, From 211617afa79c1427e7cee8dce60114c96174eec9 Mon Sep 17 00:00:00 2001 From: Venkat Date: Wed, 9 Oct 2024 12:22:41 +0530 Subject: [PATCH 4/4] fix: code cleaning --- src/visualBuilder/visualBuilder.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/visualBuilder/visualBuilder.style.ts b/src/visualBuilder/visualBuilder.style.ts index 43a8ed21..1d5683e9 100644 --- a/src/visualBuilder/visualBuilder.style.ts +++ b/src/visualBuilder/visualBuilder.style.ts @@ -28,6 +28,7 @@ const tooltipBaseStyle = ` content: ""; position: absolute; bottom: 17px; + /* the arrow */ border: 10px solid #000; border-color: #767676 transparent transparent transparent; }