← All changes | modules/optimization/assets/js/templates/meta-box/index.js +25 -29 1.0.2 → 1.7.7 View file →

		@@ -1,16 +1,16 @@
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	<p class="image-optimization-control__property">
9		- ${ __( 'Status', 'image-optimizer' ) }:
	9	+ ${ __( 'Status', 'image-optimization' ) }:
10	10
11	11	<span class="image-optimization-control__property-value">
12		- ${ __( 'Not optimized', 'image-optimizer' ) }
	12	+ ${ __( 'Not optimized', 'image-optimization' ) }
13	13	</span>
14	14	</p>
15	15
16	16	<div class="image-optimization-control__action-button-wrapper">
		@@ -15,9 +15,9 @@
15	15
16	16	<div class="image-optimization-control__action-button-wrapper">
17	17	<button type="button"
18	18	class="button button-primary image-optimization-control__button image-optimization-control__button--optimize">
19		- ${ __( 'Optimize now', 'image-optimizer' ) }
	19	+ ${ __( 'Optimize now', 'image-optimization' ) }
20	20	</button>
21	21	</div>
22	22	`;
23	23	};
		@@ -24,12 +24,12 @@
24	24
25	25	const loadingTemplate = () => {
26	26	return `
27	27	<p class="image-optimization-control__property">
28		- ${ __( 'Status', 'image-optimizer' ) }:
	28	+ ${ __( 'Status', 'image-optimization' ) }:
29	29
30	30	<span class="image-optimization-control__property-value">
31		- ${ __( 'In Progress', 'image-optimizer' ) }
	31	+ ${ __( 'In Progress', 'image-optimization' ) }
32	32	</span>
33	33	</p>
34	34
35	35	<div class="image-optimization-control__action-spinner-wrapper">
		@@ -37,20 +37,20 @@
37	37	</div>
38	38	`;
39	39	};
40	40
41		-const errorTemplate = ( message, imagesLeft ) => {
	41	+const errorTemplate = ( { message, imagesLeft, errorType, allowRetry } ) => {
42	42	return `
43	43	<p class="image-optimization-control__property">
44		- ${ __( 'Status', 'image-optimizer' ) }:
	44	+ ${ __( 'Status', 'image-optimization' ) }:
45	45
46	46	<span class="image-optimization-control__property-value">
47		- ${ __( 'Error', 'image-optimizer' ) }
	47	+ ${ __( 'Error', 'image-optimization' ) }
48	48	</span>
49	49	</p>
50	50
51	51	<p class="image-optimization-control__property">
52		- ${ __( 'Reason', 'image-optimizer' ) }:
	52	+ ${ __( 'Reason', 'image-optimization' ) }:
53	53
54	54	<span class="image-optimization-control__property-value">
55	55	${ escapeHTML( message ) }
56	56	</span>
		@@ -56,19 +56,9 @@
56	56	</span>
57	57	</p>
58	58
59	59	<div class="image-optimization-control__action-button-wrapper">
60		- ${ imagesLeft === 0
61		- ? `<a class="button button-secondary button-large image-optimization-control__button"
62		- href="${ UPGRADE_LINK }"
63		- target="_blank" rel="noopener noreferrer">
64		- ${ __( 'Upgrade', 'image-optimizer' ) }
65		- </a>
66		- ` : `
67		- <button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
68		- type="button">
69		- ${ __( 'Try again', 'image-optimizer' ) }
70		- </button>` }
	60	+ ${ getErrorButton( { imagesLeft, errorType, allowRetry } ) }
71	61	</div>
72	62	`;
73	63	};
74	64
		@@ -76,20 +66,26 @@
76	66	const absoluteValue = formatFileSize( data?.saved?.absolute, 1 );
77	67
78	68	return `
79	69	<p class="image-optimization-control__property">
80		- ${ __( 'Status', 'image-optimizer' ) }:
	70	+ ${ __( 'Status', 'image-optimization' ) }:
81	71
82	72	<span class="image-optimization-control__property-value">
83		- ${ __( 'Optimized', 'image-optimizer' ) }
	73	+ ${ __( 'Optimized', 'image-optimization' ) }
84	74	</span>
85	75	</p>
86	76
87	77	<p class="image-optimization-control__property">
88		- ${ __( 'Image sizes optimized', 'image-optimizer' ) }:
	78	+ ${ __( 'Image sizes optimized', 'image-optimization' ) }:
89	79
90	80	<span class="image-optimization-control__property-value">
91		- ${ data?.sizesOptimized }
	81	+ ${ data?.sizesOptimized }/${ data?.sizesTotal }
	82	+
	83	+ <button type="button"
	84	+ class="image-optimization-control__details-button"
	85	+ aria-label="${ __( 'Open optimization details', 'image-optimization' ) }">
	86	+ (+)
	87	+ </button>
92	88	</span>
93	89	</p>
94	90
95	91	<p class="image-optimization-control__property">
		@@ -95,13 +91,13 @@
95	91	<p class="image-optimization-control__property">
96	92	${ data?.saved?.absolute !== 0
97	93	? `
98	94	<span class="image-optimization-control__property-value">
99		- ${ __( 'Overall saving', 'image-optimizer' ) }: ${ data?.saved?.relative }% (${ absoluteValue })
	95	+ ${ __( 'Overall saving', 'image-optimization' ) }: ${ data?.saved?.relative }% (${ absoluteValue })
100	96	</span>
101	97	` : `
102	98	<span class="image-optimization-control__property-value">
103		- ${ __( 'Image is fully optimized', 'image-optimizer' ) }
	99	+ ${ __( 'Image is fully optimized', 'image-optimization' ) }
104	100	</span>
105	101	` }
106	102	</p>
107	103
		@@ -108,15 +104,15 @@
108	104	<div class="image-optimization-control__action-button-wrapper">
109	105	${ data?.canBeRestored ? `
110	106	<button class="button button-link image-optimization-control__button image-optimization-control__button--restore-original"
111	107	type="button">
112		- ${ __( 'Restore original', 'image-optimizer' ) }
	108	+ ${ __( 'Restore original', 'image-optimization' ) }
113	109	</button>
114	110	` : '' }
115	111
116	112	<button class="button button-link image-optimization-control__button image-optimization-control__button--reoptimize"
117	113	type="button">
118		- ${ __( 'Reoptimize', 'image-optimizer' ) }
	114	+ ${ __( 'Reoptimize', 'image-optimization' ) }
119	115	</button>
120	116	</div>
121	117	`;
122	118	};