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

Add custom image in downloads editor (#41342) 

* Add custom image in downloads editor

* Add changelog
This commit is contained in:
Fernando Marichal 2023-11-10 10:44:49 -03:00 committed by GitHub
parent f5156e2860
commit 21b24d9ef2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/dev-41254_use_custom_image_in_downloads_editor Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Add custom image in downloads editor #41342

13
packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx
View File

@ -22,7 +22,8 @@ import {
* Internal dependencies
*/
import { EditDownloadsModalProps } from './types';
import { UnionIcon } from './union-icon';
import { UnionIcon } from './images/union-icon';
import { DownloadsCustomImage } from './images/downloads-custom-image';
export interface Image {
id: number;
@ -131,8 +132,8 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
className="woocommerce-edit-downloads-modal"
>
<div className="woocommerce-edit-downloads-modal__preview">
{ isImage( file ) && (
<ImageGallery allowDragging={ false } columns={ 1 }>
<ImageGallery allowDragging={ false } columns={ 1 }>
{ isImage( file ) ? (
<ImageGalleryItem
key={ id }
alt={ name }
@ -140,8 +141,10 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
id={ `${ id }` }
isCover={ false }
/>
</ImageGallery>
) }
) : (
<DownloadsCustomImage />
) }
</ImageGallery>
<FormFileUpload
onChange={ handleFormFileUploadChange }
render={ ( { openFileDialog } ) => (

46
packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/downloads-custom-image.tsx Normal file
View File

@ -0,0 +1,46 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const DownloadsCustomImage = () => (
<svg
width="56"
height="72"
viewBox="0 0 56 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M37.9551 0H1.41177C0.63207 0 0 0.632067 0 1.41176V70.5882C0 71.3679 0.632067 72 1.41176 72H54.5882C55.3679 72 56 71.3679 56 70.5882V17.9261L37.9551 0Z"
fill="#F0F0F0"
/>
<rect
x="28.6191"
y="40.6892"
width="13.3101"
height="13.3107"
rx="2.85325"
fill="#DDDDDD"
/>
<ellipse
cx="18.1551"
cy="47.3446"
rx="6.65505"
ry="6.65537"
fill="#DDDDDD"
/>
<path
d="M25.9557 24.1401C26.5048 23.1889 27.8776 23.1889 28.4267 24.1401L34.6041 34.84C35.1531 35.7911 34.4668 36.9799 33.3686 36.9799H21.0139C19.9157 36.9799 19.2293 35.7911 19.7784 34.84L25.9557 24.1401Z"
fill="#DDDDDD"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M38.0005 9.53674e-05L56 17.9995H40.824C39.2646 17.9995 38.0005 16.7354 38.0005 15.176V9.53674e-05Z"
fill="#DDDDDD"
/>
</svg>
);

0
packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/union-icon.tsx → packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/union-icon.tsx
View File