Add custom image in downloads editor (#41342)
* Add custom image in downloads editor * Add changelog
This commit is contained in:
parent
f5156e2860
commit
21b24d9ef2
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: dev
|
||||||
|
|
||||||
|
Add custom image in downloads editor #41342
|
|
@ -22,7 +22,8 @@ import {
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { EditDownloadsModalProps } from './types';
|
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 {
|
export interface Image {
|
||||||
id: number;
|
id: number;
|
||||||
|
@ -131,8 +132,8 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
|
||||||
className="woocommerce-edit-downloads-modal"
|
className="woocommerce-edit-downloads-modal"
|
||||||
>
|
>
|
||||||
<div className="woocommerce-edit-downloads-modal__preview">
|
<div className="woocommerce-edit-downloads-modal__preview">
|
||||||
{ isImage( file ) && (
|
<ImageGallery allowDragging={ false } columns={ 1 }>
|
||||||
<ImageGallery allowDragging={ false } columns={ 1 }>
|
{ isImage( file ) ? (
|
||||||
<ImageGalleryItem
|
<ImageGalleryItem
|
||||||
key={ id }
|
key={ id }
|
||||||
alt={ name }
|
alt={ name }
|
||||||
|
@ -140,8 +141,10 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
|
||||||
id={ `${ id }` }
|
id={ `${ id }` }
|
||||||
isCover={ false }
|
isCover={ false }
|
||||||
/>
|
/>
|
||||||
</ImageGallery>
|
) : (
|
||||||
) }
|
<DownloadsCustomImage />
|
||||||
|
) }
|
||||||
|
</ImageGallery>
|
||||||
<FormFileUpload
|
<FormFileUpload
|
||||||
onChange={ handleFormFileUploadChange }
|
onChange={ handleFormFileUploadChange }
|
||||||
render={ ( { openFileDialog } ) => (
|
render={ ( { openFileDialog } ) => (
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
Loading…
Reference in New Issue