← All changes | modules/optimization/assets/js/templates/details-view/index.js +37 -41 1.0.1 → trunk View file →

		@@ -1,28 +1,28 @@
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		- <span class="setting image-optimizer-setting">
	8	+ <span class="setting image-optimization-setting">
9	9	<span class="name image-optimization-control__property">
10		- ${ __( 'Status', 'image-optimizer' ) }:
	10	+ ${ __( 'Status', 'image-optimization' ) }:
11	11	</span>
12	12
13	13	<span class="image-optimization-control__property-value">
14		- ${ __( 'Not optimized', 'image-optimizer' ) }
	14	+ ${ __( 'Not optimized', 'image-optimization' ) }
15	15	</span>
16	16	</span>
17	17
18		- <span class="setting image-optimizer-setting">
	18	+ <span class="setting image-optimization-setting">
19	19	<span class="name image-optimization-control__property"></span>
20	20
21	21	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
22	22	<button type="button"
23	23	class="button button-primary image-optimization-control__button image-optimization-control__button--optimize">
24		- ${ __( 'Optimize now', 'image-optimizer' ) }
	24	+ ${ __( 'Optimize now', 'image-optimization' ) }
25	25	</button>
26	26	</span>
27	27	</span>
28	28	`;
		@@ -29,19 +29,19 @@
29	29	};
30	30
31	31	const loadingTemplate = () => {
32	32	return `
33		- <span class="setting image-optimizer-setting">
	33	+ <span class="setting image-optimization-setting">
34	34	<span class="name image-optimization-control__property">
35		- ${ __( 'Status', 'image-optimizer' ) }:
	35	+ ${ __( 'Status', 'image-optimization' ) }:
36	36	</span>
37	37
38	38	<span class="image-optimization-control__property-value">
39		- ${ __( 'In Progress', 'image-optimizer' ) }
	39	+ ${ __( 'In Progress', 'image-optimization' ) }
40	40	</span>
41	41	</span>
42	42
43		- <span class="setting image-optimizer-setting">
	43	+ <span class="setting image-optimization-setting">
44	44	<span class="name image-optimization-control__property"></span>
45	45
46	46	<span class="image-optimization-control__property-value image-optimization-control__property-value--spinner">
47	47	<span class="spinner is-active"></span>
		@@ -49,23 +49,23 @@
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		- <span class="setting image-optimizer-setting">
	55	+ <span class="setting image-optimization-setting">
56	56	<span class="name image-optimization-control__property">
57		- ${ __( 'Status', 'image-optimizer' ) }:
	57	+ ${ __( 'Status', 'image-optimization' ) }:
58	58	</span>
59	59
60	60	<span class="image-optimization-control__property-value">
61		- ${ __( 'Error', 'image-optimizer' ) }
	61	+ ${ __( 'Error', 'image-optimization' ) }
62	62	</span>
63	63	</span>
64	64
65		- <span class="setting image-optimizer-setting">
	65	+ <span class="setting image-optimization-setting">
66	66	<span class="name image-optimization-control__property">
67		- ${ __( 'Reason', 'image-optimizer' ) }:
	67	+ ${ __( 'Reason', 'image-optimization' ) }:
68	68	</span>
69	69
70	70	<span class="image-optimization-control__property-value">
71	71	${ escapeHTML( message ) }
		@@ -71,23 +71,13 @@
71	71	${ escapeHTML( message ) }
72	72	</span>
73	73	</span>
74	74
75		- <span class="setting image-optimizer-setting">
	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-optimizer' ) }
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-optimizer' ) }
89		- </button>` }
	79	+ ${ getErrorButton( { imagesLeft, errorType, allowRetry } ) }
90	80	</span>
91	81	</span>
92	82	`;
93	83	};
		@@ -95,32 +85,38 @@
95	85	const optimizedTemplate = ( data ) => {
96	86	const absoluteValue = formatFileSize( data?.saved?.absolute, 1 );
97	87
98	88	return `
99		- <span class="setting image-optimizer-setting">
	89	+ <span class="setting image-optimization-setting">
100	90	<span class="name image-optimization-control__property">
101		- ${ __( 'Status', 'image-optimizer' ) }:
	91	+ ${ __( 'Status', 'image-optimization' ) }:
102	92	</span>
103	93
104	94	<span class="image-optimization-control__property-value">
105		- ${ __( 'Optimized', 'image-optimizer' ) }
	95	+ ${ __( 'Optimized', 'image-optimization' ) }
106	96	</span>
107	97	</span>
108	98
109		- <span class="setting image-optimizer-setting">
	99	+ <span class="setting image-optimization-setting">
110	100	<span class="name image-optimization-control__property">
111		- ${ __( 'Image sizes optimized', 'image-optimizer' ) }:
	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		- <span class="setting image-optimizer-setting">
	115	+ <span class="setting image-optimization-setting">
120	116	${ data?.saved?.absolute !== 0
121	117	? `<span class="name image-optimization-control__property">
122		- ${ __( 'Overall saving', 'image-optimizer' ) }:
	118	+ ${ __( 'Overall saving', 'image-optimization' ) }:
123	119	</span>
124	120
125	121	<span class="image-optimization-control__property-value">
126	122	${ data?.saved?.relative }% (${ absoluteValue })
		@@ -127,31 +123,31 @@
127	123	</span>`
128	124	: `<span class="name image-optimization-control__property"></span>
129	125
130	126	<span class="image-optimization-control__property-value">
131		- ${ __( 'Image is fully optimized', 'image-optimizer' ) }
	127	+ ${ __( 'Image is fully optimized', 'image-optimization' ) }
132	128	</span>` }
133	129	</span>
134	130
135		- <span class="setting image-optimizer-setting">
	131	+ <span class="setting image-optimization-setting">
136	132	<span class="name image-optimization-control__property"></span>
137	133
138	134	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
139	135	<button class="button button-link image-optimization-control__button image-optimization-control__button--reoptimize"
140	136	type="button">
141		- ${ __( 'Reoptimize', 'image-optimizer' ) }
	137	+ ${ __( 'Reoptimize', 'image-optimization' ) }
142	138	</button>
143	139	</span>
144	140	</span>
145	141
146	142	${ data?.canBeRestored ? `
147		- <span class="setting image-optimizer-setting">
	143	+ <span class="setting image-optimization-setting">
148	144	<span class="name image-optimization-control__property"></span>
149	145
150	146	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
151	147	<button class="button button-link image-optimization-control__button image-optimization-control__button--restore-original"
152	148	type="button">
153		- ${ __( 'Restore original', 'image-optimizer' ) }
	149	+ ${ __( 'Restore original', 'image-optimization' ) }
154	150	</button>
155	151	</span>
156	152	</span>
157	153	` : '' }