From 42b63cb2a0302defb4223ec6f0cdb7c6808e51f2 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Wed, 23 Oct 2024 15:51:35 +0300 Subject: [PATCH 1/3] Fix performance history tooltip --- .../boost-score-graph/style-tooltip.scss | 15 ++++++++ .../boost-score-graph/tooltips-plugin.ts | 37 ++++++++----------- 2 files changed, 31 insertions(+), 21 deletions(-) diff --git a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss index 31a7c3de5f539..34a39ef226872 100644 --- a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss +++ b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss @@ -5,6 +5,16 @@ $white: #ffffff; .jb-score-tooltips-container { width: 100%; position: relative; + pointer-events: none; + +} + +.jb-score-tooltip-react-root { + position: absolute; + bottom: -20px; + translate: -50% calc( 100% - 20px ); + z-index: 1000; + pointer-events: auto; } .jb-score-tooltip { @@ -17,6 +27,11 @@ $white: #ffffff; width: 20em; position: relative; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); + display: none; + + .visible &, &:hover { + display: block; + } hr { border-top: 1px solid $grey; diff --git a/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts b/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts index c6dfb97d2e7e6..fd4d62886f1b3 100644 --- a/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts +++ b/projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts @@ -25,35 +25,26 @@ export function tooltipsPlugin( periods ) { if ( ! reactDom ) { reactDom = ReactDOM.createRoot( reactRoot ); } - reactRoot.style.position = 'absolute'; - reactRoot.style.bottom = -20 + 'px'; - reactRoot.style.translate = '-50% calc( 100% - 20px )'; - reactRoot.style.zIndex = '1000'; + reactRoot.classList.add( 'jb-score-tooltip-react-root' ); container.appendChild( reactRoot ); u.over.appendChild( container ); - /** - * Hides all tooltips. - */ - function hideTips() { - reactRoot.style.display = 'none'; - } + u.over.addEventListener( 'mouseenter', () => { + container.classList.add( 'visible' ); + } ); - /** - * Shows all tooltips. - */ - function showTips() { - reactRoot.style.display = null; - } + u.over.addEventListener( 'mouseleave', () => { + container.classList.remove( 'visible' ); + } ); - container.addEventListener( 'mouseleave', () => { - hideTips(); + reactRoot.addEventListener( 'mouseenter', () => { + reactRoot.classList.add( 'visible' ); } ); - container.addEventListener( 'mouseenter', () => { - showTips(); + reactRoot.addEventListener( 'mouseleave', () => { + reactRoot.classList.remove( 'visible' ); } ); } @@ -62,7 +53,7 @@ export function tooltipsPlugin( periods ) { * @param {uPlot} u - The uPlot instance. */ function setSize( u: uPlot ) { - container.style.height = u.over.clientHeight + 'px'; + container.style.paddingTop = u.over.clientHeight + 'px'; } /** @@ -75,6 +66,10 @@ export function tooltipsPlugin( periods ) { const period = periods[ idx ]; + if ( ! period ) { + return; + } + // Timestamp of the cursor position const timestamp = u.data[ 0 ][ idx ]; From 2c6b5f9db2d7977f602676f37f61988a58abc645 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Wed, 23 Oct 2024 15:56:18 +0300 Subject: [PATCH 2/3] changelog --- .../components/changelog/fix-boost-score-history-tooltip | 4 ++++ .../plugins/boost/changelog/fix-boost-score-history-tooltip | 4 ++++ .../plugins/jetpack/changelog/fix-boost-score-history-tooltip | 4 ++++ 3 files changed, 12 insertions(+) create mode 100644 projects/js-packages/components/changelog/fix-boost-score-history-tooltip create mode 100644 projects/plugins/boost/changelog/fix-boost-score-history-tooltip create mode 100644 projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip diff --git a/projects/js-packages/components/changelog/fix-boost-score-history-tooltip b/projects/js-packages/components/changelog/fix-boost-score-history-tooltip new file mode 100644 index 0000000000000..0dfd586d5bbe6 --- /dev/null +++ b/projects/js-packages/components/changelog/fix-boost-score-history-tooltip @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fixed tooltip behavior diff --git a/projects/plugins/boost/changelog/fix-boost-score-history-tooltip b/projects/plugins/boost/changelog/fix-boost-score-history-tooltip new file mode 100644 index 0000000000000..96f186bd9f3a4 --- /dev/null +++ b/projects/plugins/boost/changelog/fix-boost-score-history-tooltip @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Performance History: Fixed tooltip behavior diff --git a/projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip b/projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip new file mode 100644 index 0000000000000..1ef8afea050a2 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-boost-score-history-tooltip @@ -0,0 +1,4 @@ +Significance: patch +Type: other + + From 3d98aec24e6085de5870ca852a83bfc0f5041eb6 Mon Sep 17 00:00:00 2001 From: Adnan Haque Date: Fri, 1 Nov 2024 16:34:37 +0600 Subject: [PATCH 3/3] Allow text selection --- .../components/components/boost-score-graph/style-tooltip.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss index 34a39ef226872..03e4e76dfa1b2 100644 --- a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss +++ b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss @@ -15,6 +15,7 @@ $white: #ffffff; translate: -50% calc( 100% - 20px ); z-index: 1000; pointer-events: auto; + user-select: text; } .jb-score-tooltip {