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

Image Gallery: Update toolbar position and tooltips (#35534) 

* Move image gallery toolbar up a bit
* Increase z-index of image gallery toolbar so that tooltips are not behind other images
* Update image gallery toolbar button tooltips
This commit is contained in:
Matt Sherman 2022-11-14 21:08:27 +00:00 committed by GitHub
parent 5b06618a6f
commit 932b3386c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-product-images-toolbar-positioning Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Updated image gallery toolbar position and tooltips.

3
packages/js/components/src/image-gallery/image-gallery-toolbar.scss
View File

@ -1,7 +1,8 @@
.woocommerce-image-gallery__toolbar {
position: absolute;
top: -50px;
top: -58px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background-color: white;
}

6
packages/js/components/src/image-gallery/image-gallery-toolbar.tsx
View File

@ -64,7 +64,7 @@ export const ImageGalleryToolbar: React.FC< ImageGalleryToolbarProps > = ( {
icon={ () => (
<SortableHandle itemIndex={ childIndex } />
) }
label={ __( 'Drag', 'woocommerce' ) }
label={ __( 'Drag to reorder', 'woocommerce' ) }
/>
<ToolbarButton
disabled={ childIndex < 2 }
@ -85,7 +85,7 @@ export const ImageGalleryToolbar: React.FC< ImageGalleryToolbarProps > = ( {
<ToolbarButton
onClick={ () => setAsCoverImage( childIndex ) }
icon={ CoverImageIcon }
label={ __( 'Set as cover image', 'woocommerce' ) }
label={ __( 'Set as cover', 'woocommerce' ) }
/>
</ToolbarGroup>
) }
@ -106,7 +106,7 @@ export const ImageGalleryToolbar: React.FC< ImageGalleryToolbarProps > = ( {
<ToolbarButton
onClick={ () => removeItem( childIndex ) }
icon={ trash }
label={ __( 'Delete', 'woocommerce' ) }
label={ __( 'Remove', 'woocommerce' ) }
/>
</ToolbarGroup>
</Toolbar>