Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CYS: fix tooltip position (#48495) 

* CYS: fix tooltip position

* Add changefile(s) from automation for the following project(s): woocommerce

* trigger CI

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-06-14 12:43:07 +02:00 committed by GitHub
parent c18dbb1ce4
commit dada673fac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx
View File

@ -37,6 +37,7 @@ import { useAddAutoBlockPreviewEventListenersAndObservers } from './hooks/auto-b
import { IsResizingContext } from './resizable-frame'; import { IsResizingContext } from './resizable-frame';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useQuery } from '@woocommerce/navigation'; import { useQuery } from '@woocommerce/navigation';
import clsx from 'clsx';
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
const { Provider: DisabledProvider } = Disabled.Context; const { Provider: DisabledProvider } = Disabled.Context;
@ -178,7 +179,10 @@ function ScaledBlockPreview( {
) } ) }
<DisabledProvider value={ true }> <DisabledProvider value={ true }>
<div <div
className="block-editor-block-preview__content" className={ clsx( 'block-editor-block-preview__content', {
'woocommerce-customize-store-assembler':
! isPatternPreview,
} ) }
style={ style={
autoScale autoScale
? { ? {

6
plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts
View File

@ -191,8 +191,6 @@ const updateSelectedBlock = (
} ); } );
updatePopoverPosition( { updatePopoverPosition( {
mainBodyWidth: window.document.body.clientWidth,
iframeWidth: body.clientWidth,
event, event,
hoveredBlockClientId: null, hoveredBlockClientId: null,
clickedBlockClientId: clickedBlockClientId as string, clickedBlockClientId: clickedBlockClientId as string,
@ -208,8 +206,6 @@ const updateSelectedBlock = (
if ( selectedBlockClientId ) { if ( selectedBlockClientId ) {
updatePopoverPosition( { updatePopoverPosition( {
mainBodyWidth: window.document.body.clientWidth,
iframeWidth: body.clientWidth,
event, event,
hoveredBlockClientId: selectedBlockClientId, hoveredBlockClientId: selectedBlockClientId,
clickedBlockClientId: null, clickedBlockClientId: null,
@ -272,8 +268,6 @@ type useAutoBlockPreviewEventListenersCallbacks = {
getBlockParents: ( clientId: string ) => string[]; getBlockParents: ( clientId: string ) => string[];
setBlockEditingMode: ( clientId: string ) => void; setBlockEditingMode: ( clientId: string ) => void;
updatePopoverPosition: ( options: { updatePopoverPosition: ( options: {
mainBodyWidth: number;
iframeWidth: number;
event: MouseEvent; event: MouseEvent;
hoveredBlockClientId: string | null; hoveredBlockClientId: string | null;
clickedBlockClientId: string | null; clickedBlockClientId: string | null;

12
plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-popover-handler.ts
View File

@ -38,20 +38,16 @@ export const usePopoverHandler = () => {
); );
const updatePopoverPosition = ( { const updatePopoverPosition = ( {
mainBodyWidth,
iframeWidth,
event, event,
clickedBlockClientId, clickedBlockClientId,
hoveredBlockClientId, hoveredBlockClientId,
}: { }: {
mainBodyWidth: number;
iframeWidth: number;
event: MouseEvent; event: MouseEvent;
clickedBlockClientId: string | null; clickedBlockClientId: string | null;
hoveredBlockClientId: string | null; hoveredBlockClientId: string | null;
} ) => { } ) => {
const iframe = window.document.querySelector( const iframe = window.document.querySelector(
'iframe[name="editor-canvas"]' '.woocommerce-customize-store-assembler > iframe[name="editor-canvas"]'
) as HTMLElement; ) as HTMLElement;
clickedClientId = clickedClientId =
@ -72,10 +68,8 @@ export const usePopoverHandler = () => {
const newElement = { const newElement = {
getBoundingClientRect: generateGetBoundingClientRect( getBoundingClientRect: generateGetBoundingClientRect(
event.clientX + event.clientX + iframeRect.left,
( mainBodyWidth - iframeWidth - iframeRect.left ) + event.clientY + iframeRect.top + 20
200,
event.clientY + iframeRect.top + 40
), ),
} as VirtualElement; } as VirtualElement;

1
plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss
View File

@ -815,6 +815,7 @@ body.woocommerce-assembler {
} }
.woocommerce-customize-store_popover-tooltip { .woocommerce-customize-store_popover-tooltip {
pointer-events: none;
.components-popover__content { .components-popover__content {
width: fit-content; width: fit-content;
user-select: none; user-select: none;

4
plugins/woocommerce/changelog/48495-fix-cys-tooltip-position Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
CYS: fix tooltip position. </details> <details> <summary>Changelog Entry Comment</summary>