← All changes | modules/optimization/assets/js/templates/list-view/index.js +12 -14 1.2.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	<button type="button"
		@@ -39,23 +39,13 @@
39	39	</button>
40	40	`;
41	41	};
42	42
43		-const errorTemplate = ( message, imagesLeft ) => {
	43	+const errorTemplate = ( { message, imagesLeft, errorType, allowRetry } ) => {
44	44	return `
45	45	<span class="image-optimization-control__error-message">${ escapeHTML( message ) }</span>
46	46
47		- ${ imagesLeft === 0
48		- ? `<a class="button button-secondary button-large image-optimization-control__button"
49		- href="${ UPGRADE_LINK }"
50		- target="_blank" rel="noopener noreferrer">
51		- ${ __( 'Upgrade', 'image-optimization' ) }
52		- </a>
53		- ` : `
54		- <button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
55		- type="button">
56		- ${ __( 'Try again', 'image-optimization' ) }
57		- </button>` }
	47	+ ${ getErrorButton( { imagesLeft, errorType, allowRetry } ) }
58	48	`;
59	49	};
60	50
61	51	const optimizedTemplate = ( data ) => {
		@@ -64,9 +54,17 @@
64	54	return `
65	55	<p class="image-optimization-control__property">
66	56	${ __( 'Image sizes optimized', 'image-optimization' ) }:
67	57
68		- <span>${ data?.sizesOptimized }</span>
	58	+ <span>
	59	+ ${ data?.sizesOptimized }/${ data?.sizesTotal }
	60	+
	61	+ <button type="button"
	62	+ class="image-optimization-control__details-button"
	63	+ aria-label="${ __( 'Open optimization details', 'image-optimization' ) }">
	64	+ (+)
	65	+ </button>
	66	+ </span>
69	67	</p>
70	68
71	69	<p class="image-optimization-control__property">
72	70	${ data?.saved?.absolute !== 0