← All changes | modules/optimization/assets/js/templates/list-view/index.js +22 -24 1.0.1 → trunk View file →

		@@ -1,14 +1,14 @@
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"
9	9	class="button button-primary image-optimization-control__button image-optimization-control__button--optimize">
10		- ${ __( 'Optimize now', 'image-optimizer' ) }
	10	+ ${ __( 'Optimize now', 'image-optimization' ) }
11	11	</button>
12	12	`;
13	13	};
14	14
		@@ -16,21 +16,21 @@
16	16	let buttonText;
17	17
18	18	switch ( action ) {
19	19	case 'restore':
20		- buttonText = __( 'Restoring…', 'image-optimizer' );
	20	+ buttonText = __( 'Restoring…', 'image-optimization' );
21	21	break;
22	22
23	23	case 'optimize':
24		- buttonText = __( 'Optimizing…', 'image-optimizer' );
	24	+ buttonText = __( 'Optimizing…', 'image-optimization' );
25	25	break;
26	26
27	27	case 'reoptimize':
28		- buttonText = __( 'Reoptimizing…', 'image-optimizer' );
	28	+ buttonText = __( 'Reoptimizing…', 'image-optimization' );
29	29	break;
30	30
31	31	default:
32		- buttonText = __( 'Loading…', 'image-optimizer' );
	32	+ buttonText = __( 'Loading…', 'image-optimization' );
33	33	}
34	34
35	35	return `
36	36	<button class="button button-secondary image-optimization-control__button image-optimization-control__button--optimize"
		@@ -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-optimizer' ) }
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-optimizer' ) }
57		- </button>` }
	47	+ ${ getErrorButton( { imagesLeft, errorType, allowRetry } ) }
58	48	`;
59	49	};
60	50
61	51	const optimizedTemplate = ( data ) => {
		@@ -62,17 +52,25 @@
62	52	const absoluteValue = formatFileSize( data?.saved?.absolute, 1 );
63	53
64	54	return `
65	55	<p class="image-optimization-control__property">
66		- ${ __( 'Image sizes optimized', 'image-optimizer' ) }:
	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
73		- ? `${ __( 'Overall saving', 'image-optimizer' ) }: <span>${ data?.saved?.relative }% (${ absoluteValue })</span>`
74		- : `<span>${ __( 'Image is fully optimized', 'image-optimizer' ) }</span>` }
	71	+ ? `${ __( 'Overall saving', 'image-optimization' ) }: <span>${ data?.saved?.relative }% (${ absoluteValue })</span>`
	72	+ : `<span>${ __( 'Image is fully optimized', 'image-optimization' ) }</span>` }
75	73	</p>
76	74
77	75	<div class="image-optimization-control__buttons-wrapper">
78	76	${ data?.canBeRestored ? `
		@@ -77,15 +75,15 @@
77	75	<div class="image-optimization-control__buttons-wrapper">
78	76	${ data?.canBeRestored ? `
79	77	<button type="button"
80	78	class="button button-secondary image-optimization-control__button image-optimization-control__button--restore-original">
81		- ${ __( 'Restore original', 'image-optimizer' ) }
	79	+ ${ __( 'Restore original', 'image-optimization' ) }
82	80	</button>
83	81	` : '' }
84	82
85	83	<button type="button"
86	84	class="button button-secondary image-optimization-control__button image-optimization-control__button--reoptimize">
87		- ${ __( 'Reoptimize', 'image-optimizer' ) }
	85	+ ${ __( 'Reoptimize', 'image-optimization' ) }
88	86	</button>
89	87	</div>
90	88	`;
91	89	};