From faca932995d115bffbf313c6a93db09a711b3be5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nauris=20Pu=CC=84k=CC=A7is?= Date: Tue, 20 Dec 2022 14:02:34 +0200 Subject: [PATCH 01/19] Use a fixed position for the guide --- .../features/image-guide/src/ui/Bubble.svelte | 18 +++++++- .../features/image-guide/src/ui/Main.svelte | 15 ++++++- .../features/image-guide/src/ui/Popup.svelte | 41 ++++++++++++++++++- 3 files changed, 68 insertions(+), 6 deletions(-) diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte index 982274beeec35..3e5a57d7f3997 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte @@ -1,4 +1,5 @@ -
+
{#if false === $isLoading} -
+
{#if $oversizedRatio > 9} {Math.floor( $oversizedRatio )}x diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte index a5d9bac4bd891..f8f77e3a5b36b 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte @@ -46,13 +46,24 @@ $: show = $guideState === 'always_on' ? 0 : false; $: toggleBackdrop( show !== false ); + let position = { + top: 0, + left: 0, + }; + + function hover( e: CustomEvent ) { + const detail = e.detail; + const index = detail.index; + position = detail.position; + show = index; + } {#if $guideState === 'active' || $guideState === 'always_on'}
{#each stores as store, index} - ( show = index )} /> + {/each}
{#if show !== false} @@ -60,7 +71,7 @@ Intentionally using only a single component here. See component source for details. --> - + {/if}
{/if} diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte index 1775388603cdc..5b46e248fbe5a 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte @@ -1,4 +1,5 @@ -
+ +
@@ -187,9 +221,12 @@ min-width: 320px; border-radius: 6px; - position: relative; overflow: hidden; + position: fixed; + top: 25%; + left: 25%; + text-align: left; } From 17412f237ca4398968587867a4371e19beddc49c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nauris=20Pu=CC=84k=CC=A7is?= Date: Tue, 20 Dec 2022 17:22:24 +0200 Subject: [PATCH 02/19] Increase padding --- .../plugins/boost/app/features/image-guide/src/ui/Main.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte index f8f77e3a5b36b..4529aae0173e6 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte @@ -99,10 +99,9 @@ height: 100%; z-index: 8000; line-height: 1.55; - padding: 15px; + padding: 20px; &.small { font-size: 13px; - padding: 15px; } &.micro { From a493d0d968954bee1cd2d090e5cf89665ce480f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nauris=20Pu=CC=84k=CC=A7is?= Date: Tue, 20 Dec 2022 18:47:26 +0200 Subject: [PATCH 03/19] Add a Portal component that teleports slot to body --- .../app/features/image-guide/src/ui/Portal.svelte | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 projects/plugins/boost/app/features/image-guide/src/ui/Portal.svelte diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Portal.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Portal.svelte new file mode 100644 index 0000000000000..454aaf6991c90 --- /dev/null +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Portal.svelte @@ -0,0 +1,15 @@ + + +
+ +
From fa1fe349662bdcf9c6b9718d5352263b4b8769eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nauris=20Pu=CC=84k=CC=A7is?= Date: Tue, 20 Dec 2022 18:48:09 +0200 Subject: [PATCH 04/19] Portal the pop-up to body to fix z-index issues --- .../features/image-guide/src/ui/Bubble.svelte | 9 +- .../features/image-guide/src/ui/Main.svelte | 20 +- .../features/image-guide/src/ui/Popup.svelte | 198 +++++++++--------- 3 files changed, 124 insertions(+), 103 deletions(-) diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte index 3e5a57d7f3997..144ee789b7f66 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte @@ -35,10 +35,15 @@ } -
+
{#if false === $isLoading} -
+
{#if $oversizedRatio > 9} {Math.floor( $oversizedRatio )}x diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte index 4529aae0173e6..eda07a095a4f3 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte @@ -17,7 +17,21 @@ stores.forEach( store => store.updateDimensions() ); } ); - function onMouseLeave() { + function closeDetails( e ) { + // Don't exit when hovering the Portal + if ( + e.relatedTarget && + // Don't exit when hovering the Popup + ( e.relatedTarget.classList.contains( 'details' ) || + // Don't exit when mouse is over the backdrop + // The Backdrop + ( e.relatedTarget.classList.contains( 'guide' ) && + // Make sure the backdrop isn't a neighboring guide. + e.relatedTarget.classList.contains( 'show' ) ) ) + ) { + return; + } + if ( $guideState !== 'always_on' ) { show = false; } @@ -60,7 +74,7 @@ {#if $guideState === 'active' || $guideState === 'always_on'} -
+
{#each stores as store, index} @@ -71,7 +85,7 @@ Intentionally using only a single component here. See component source for details. --> - + {/if}
{/if} diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte index 5b46e248fbe5a..22d1eb0fcca45 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte @@ -3,6 +3,7 @@ import { backOut } from 'svelte/easing'; import { fly } from 'svelte/transition'; import JetpackLogo from './JetpackLogo.svelte'; + import Portal from './Portal.svelte'; import type { MeasurableImageStore } from '../stores/MeasurableImageStore'; import type { GuideSize } from '../types'; @@ -20,7 +21,7 @@ /** * This is assigning a lot of reactive variables * to avoid re-rendering the component - * when multiple bubbles are active. + * when browsing between multiple bubbles next to each other. * * Note that in Main.svelte only the properties of this component * change to avoid creating multiple components. @@ -64,121 +65,123 @@ initialScrollY = scrollY; initialTop = position.top; } ); - $: repositionOnScroll( scrollY ); -
- + +
+ -
-
-
- {imageName} -
- {#if ratio >= 1.3} -
- The image loaded is {ratio}x larger than it appears in the browser. - {#if $fileSize.weight > 450} - Try using a smaller image or reduce the file size by compressing it. - {/if} -
- {:else if ratio === 1} -
The image is exactly the correct size for this screen.
- {:else if ratio >= 0.99 && ratio < 1.3} -
- The image size is very close to the size it appears in the browser. - {#if ratio > 1} - Because there are various screen sizes, it's okay for the image to be - {ratio}x than it appears on the page. - {/if} -
- {:else} - {@const stretchedBy = maybeDecimals( 1 / $oversizedRatio ) } -
- The image file is {stretchedBy}x smaller than expected on this screen. This might be okay, - but pay attention whether the image appears blurry. +
+
+
+ {imageName}
+ {#if ratio >= 1.3} +
+ The image loaded is {ratio}x larger than it appears in the browser. + {#if $fileSize.weight > 450} + Try using a smaller image or reduce the file size by compressing it. + {/if} +
+ {:else if ratio === 1} +
The image is exactly the correct size for this screen.
+ {:else if ratio >= 0.99 && ratio < 1.3} +
+ The image size is very close to the size it appears in the browser. + {#if ratio > 1} + Because there are various screen sizes, it's okay for the image to be + {ratio}x than it appears on the page. + {/if} +
+ {:else} + {@const stretchedBy = maybeDecimals( 1 / $oversizedRatio ) } +
+ The image file is {stretchedBy}x smaller than expected on this screen. This might be + okay, but pay attention whether the image appears blurry. +
+ {/if} + Learn more +
+ {#if $imageURL} + {imageName} {/if} - Learn more
- {#if $imageURL} - {imageName} - {/if} -
-
-
-
Image File Dimensions
- {#if $fileSize.width > 0 && $fileSize.height > 0} -
{$fileSize.width} x {$fileSize.height}
- {:else} +
+
+
Image File Dimensions
+ {#if $fileSize.width > 0 && $fileSize.height > 0} +
{$fileSize.width} x {$fileSize.height}
+ {:else} +
+ {#if $isLoading} + Loading... + {:else} + Unknown + {/if} +
+ {/if} +
+ +
+
Expected Dimensions
+
{$expectedSize.width} x {$expectedSize.height}
+
+ +
+
Size on screen
+
{$sizeOnPage.width} x {$sizeOnPage.height}
+
+ +
+
Image Size
- {#if $isLoading} + {#if $fileSize.weight > 0} + {Math.round( $fileSize.weight )} KB + {:else if $isLoading} Loading... {:else} Unknown {/if}
- {/if} -
- -
-
Expected Dimensions
-
{$expectedSize.width} x {$expectedSize.height}
-
- -
-
Size on screen
-
{$sizeOnPage.width} x {$sizeOnPage.height}
-
- -
-
Image Size
-
- {#if $fileSize.weight > 0} - {Math.round( $fileSize.weight )} KB - {:else if $isLoading} - Loading... - {:else} - Unknown - {/if}
-
-
-
Potential savings
-
- {#if $potentialSavings > 0} - {$potentialSavings} KB - {:else if $isLoading} - Loading... - {:else} - N/A - {/if} +
+
Potential savings
+
+ {#if $potentialSavings > 0} + {$potentialSavings} KB + {:else if $isLoading} + Loading... + {:else} + N/A + {/if} +
+ {#if imageOrigin !== origin} +
+ Unable to estimate file size savings because the image is hosted on a different domain. +
+ {/if}
- {#if imageOrigin !== origin} -
- Unable to estimate file size savings because the image is hosted on a different domain. -
- {/if}
-
+