← All changes | modules/optimization/assets/js/templates/details-view/index.js +10 -14 1.1.0 → trunk View file →

		@@ -1,8 +1,8 @@
1	1	import { __ } from '@wordpress/i18n';
2	2	import { escapeHTML } from '@wordpress/escape-html';
3	3	import { formatFileSize } from '../../utils';
4		-import { UPGRADE_LINK } from '../../constants';
	4	+import { getErrorButton } from '../common';
5	5
6	6	const notOptimizedTemplate = () => {
7	7	return `
8	8	<span class="setting image-optimization-setting">
		@@ -49,9 +49,9 @@
49	49	</span>
50	50	`;
51	51	};
52	52
53		-const errorTemplate = ( message, imagesLeft ) => {
	53	+const errorTemplate = ( { message, imagesLeft, errorType, allowRetry } ) => {
54	54	return `
55	55	<span class="setting image-optimization-setting">
56	56	<span class="name image-optimization-control__property">
57	57	${ __( 'Status', 'image-optimization' ) }:
		@@ -75,19 +75,9 @@
75	75	<span class="setting image-optimization-setting">
76	76	<span class="name image-optimization-control__property"></span>
77	77
78	78	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
79		- ${ imagesLeft === 0
80		- ? `<a class="button button-secondary button-large image-optimization-control__button"
81		- href="${ UPGRADE_LINK }"
82		- target="_blank" rel="noopener noreferrer">
83		- ${ __( 'Upgrade', 'image-optimization' ) }
84		- </a>
85		- ` : `
86		- <button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
87		- type="button">
88		- ${ __( 'Try again', 'image-optimization' ) }
89		- </button>` }
	79	+ ${ getErrorButton( { imagesLeft, errorType, allowRetry } ) }
90	80	</span>
91	81	</span>
92	82	`;
93	83	};
		@@ -111,9 +101,15 @@
111	101	${ __( 'Image sizes optimized', 'image-optimization' ) }:
112	102	</span>
113	103
114	104	<span class="image-optimization-control__property-value">
115		- ${ data?.sizesOptimized }
	105	+ ${ data?.sizesOptimized }/${ data?.sizesTotal }
	106	+
	107	+ <button type="button"
	108	+ class="image-optimization-control__details-button"
	109	+ aria-label="${ __( 'Open optimization details', 'image-optimization' ) }">
	110	+ (+)
	111	+ </button>
116	112	</span>
117	113	</span>
118	114
119	115	<span class="setting image-optimization-setting">