← All changes | modules/optimization/assets/js/templates/details-view/index.js +55 -45 1.0.0 → trunk View file →

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