← All changes | modules/optimization/assets/js/templates/list-view/index.js +32 -26 1.0.0 → trunk View file →

		@@ -1,13 +1,14 @@
1	1	import { __ } from '@wordpress/i18n';
2	2	import { escapeHTML } from '@wordpress/escape-html';
3	3	import { formatFileSize } from '../../utils';
	4	+import { getErrorButton } from '../common';
4	5
5	6	const notOptimizedTemplate = () => {
6	7	return `
7	8	<button type="button"
8	9	class="button button-primary image-optimization-control__button image-optimization-control__button--optimize">
9		- ${ __( 'Optimize now', 'image-optimizer' ) }
	10	+ ${ __( 'Optimize now', 'image-optimization' ) }
10	11	</button>
11	12	`;
12	13	};
13	14
		@@ -15,21 +16,21 @@
15	16	let buttonText;
16	17
17	18	switch ( action ) {
18	19	case 'restore':
19		- buttonText = __( 'Restoring…', 'image-optimizer' );
	20	+ buttonText = __( 'Restoring…', 'image-optimization' );
20	21	break;
21	22
22	23	case 'optimize':
23		- buttonText = __( 'Optimizing…', 'image-optimizer' );
	24	+ buttonText = __( 'Optimizing…', 'image-optimization' );
24	25	break;
25	26
26	27	case 'reoptimize':
27		- buttonText = __( 'Reoptimizing…', 'image-optimizer' );
	28	+ buttonText = __( 'Reoptimizing…', 'image-optimization' );
28	29	break;
29	30
30	31	default:
31		- buttonText = __( 'Loading…', 'image-optimizer' );
	32	+ buttonText = __( 'Loading…', 'image-optimization' );
32	33	}
33	34
34	35	return `
35	36	<button class="button button-secondary image-optimization-control__button image-optimization-control__button--optimize"
		@@ -38,48 +39,53 @@
38	39	</button>
39	40	`;
40	41	};
41	42
42		-const errorTemplate = ( message ) => {
	43	+const errorTemplate = ( { message, imagesLeft, errorType, allowRetry } ) => {
43	44	return `
44	45	<span class="image-optimization-control__error-message">${ escapeHTML( message ) }</span>
45	46
46		- <button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
47		- type="button">
48		- ${ __( 'Try again', 'image-optimizer' ) }
49		- </button>
	47	+ ${ getErrorButton( { imagesLeft, errorType, allowRetry } ) }
50	48	`;
51	49	};
52	50
53		-const successTemplate = ( data ) => {
	51	+const optimizedTemplate = ( data ) => {
54	52	const absoluteValue = formatFileSize( data?.saved?.absolute, 1 );
55	53
56	54	return `
57	55	<p class="image-optimization-control__property">
58		- ${ __( 'Image sizes optimized', 'image-optimizer' ) }:
	56	+ ${ __( 'Image sizes optimized', 'image-optimization' ) }:
59	57
60		- <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>
61	67	</p>
62	68
63	69	<p class="image-optimization-control__property">
64		- ${ __( 'Overall saving', 'image-optimizer' ) }:
65		-
66		- <span>${ data?.saved?.relative }% (${ absoluteValue })</span>
	70	+ ${ data?.saved?.absolute !== 0
	71	+ ? `${ __( 'Overall saving', 'image-optimization' ) }: <span>${ data?.saved?.relative }% (${ absoluteValue })</span>`
	72	+ : `<span>${ __( 'Image is fully optimized', 'image-optimization' ) }</span>` }
67	73	</p>
68	74
69		- ${ data?.canBeRestored ? `
70		- <div class="image-optimization-control__buttons-wrapper">
	75	+ <div class="image-optimization-control__buttons-wrapper">
	76	+ ${ data?.canBeRestored ? `
71	77	<button type="button"
72	78	class="button button-secondary image-optimization-control__button image-optimization-control__button--restore-original">
73		- ${ __( 'Restore original', 'image-optimizer' ) }
	79	+ ${ __( 'Restore original', 'image-optimization' ) }
74	80	</button>
	81	+ ` : '' }
75	82
76		- <button type="button"
77		- class="button button-secondary image-optimization-control__button image-optimization-control__button--reoptimize">
78		- ${ __( 'Reoptimize', 'image-optimizer' ) }
79		- </button>
80		- </div>
81		- ` : '' }
	83	+ <button type="button"
	84	+ class="button button-secondary image-optimization-control__button image-optimization-control__button--reoptimize">
	85	+ ${ __( 'Reoptimize', 'image-optimization' ) }
	86	+ </button>
	87	+ </div>
82	88	`;
83	89	};
84	90
85	91	const listViewTemplates = Object.freeze( {
		@@ -85,8 +91,8 @@
85	91	const listViewTemplates = Object.freeze( {
86	92	notOptimizedTemplate,
87	93	loadingTemplate,
88	94	errorTemplate,
89		- successTemplate,
	95	+ optimizedTemplate,
90	96	} );
91	97
92	98	export default listViewTemplates;