← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/RowCellSettings.js +268 -413 3.10.11 → 3.2.1 View file →

		@@ -2,14 +2,11 @@
2	2	* WordPress dependencies
3	3	*/
4	4	const { __ } = wp.i18n;
5	5
6		-const {
7		- Component,
8		- Fragment
9		-} = wp.element;
	6	+const { Component } = wp.element;
10	7
11		-const { ColorPalette } = wp.blockEditor || wp.editor;
	8	+const { ColorPalette } = wp.editor;
12	9
13	10	const {
14	11	BaseControl,
15	12	PanelBody,
		@@ -24,11 +21,8 @@
24	21	render() {
25	22
26	23	const settings = this.props.chart['visualizer-settings'];
27	24
28		- const type = this.props.chart['visualizer-chart-type'];
29		- const library = this.props.chart['visualizer-chart-library'];
30		-
31	25	return (
32	26	<PanelBody
33	27	title={ __( 'Row/Cell Settings' ) }
34	28	initialOpen={ false }
		@@ -34,447 +28,308 @@
34	28	initialOpen={ false }
35	29	className="visualizer-advanced-panel"
36	30	>
37	31
38		- { ( 'DataTable' === library ) ? (
39		- <Fragment>
	32	+ <PanelBody
	33	+ title={ __( 'Header Row' ) }
	34	+ className="visualizer-inner-sections"
	35	+ initialOpen={ false }
	36	+ >
40	37
41		- <PanelBody
42		- title={ __( 'Odd Table Row' ) }
43		- className="visualizer-inner-sections"
44		- initialOpen={ false }
45		- >
	38	+ <BaseControl
	39	+ label={ __( 'Background Color' ) }
	40	+ >
	41	+ <ColorPalette
	42	+ value={ settings.customcss.headerRow['background-color'] }
	43	+ onChange={ e => {
	44	+ settings.customcss.headerRow['background-color'] = e;
	45	+ this.props.edit( settings );
	46	+ } }
	47	+ />
	48	+ </BaseControl>
46	49
47		- <BaseControl
48		- label={ __( 'Background Color' ) }
49		- >
50		- <ColorPalette
51		- value={ settings.customcss.oddTableRow['background-color'] }
52		- onChange={ e => {
53		- settings.customcss.oddTableRow['background-color'] = e;
54		- this.props.edit( settings );
55		- } }
56		- />
57		- </BaseControl>
	50	+ <BaseControl
	51	+ label={ __( 'Color' ) }
	52	+ >
	53	+ <ColorPalette
	54	+ value={ settings.customcss.headerRow.color }
	55	+ onChange={ e => {
	56	+ settings.customcss.headerRow.color = e;
	57	+ this.props.edit( settings );
	58	+ } }
	59	+ />
	60	+ </BaseControl>
58	61
59		- <BaseControl
60		- label={ __( 'Color' ) }
61		- >
62		- <ColorPalette
63		- value={ settings.customcss.oddTableRow.color }
64		- onChange={ e => {
65		- settings.customcss.oddTableRow.color = e;
66		- this.props.edit( settings );
67		- } }
68		- />
69		- </BaseControl>
	62	+ <TextControl
	63	+ label={ __( 'Text Orientation' ) }
	64	+ help={ __( 'In degrees.' ) }
	65	+ type="number"
	66	+ value={ settings.customcss.headerRow.transform }
	67	+ onChange={ e => {
	68	+ settings.customcss.headerRow.transform = e;
	69	+ this.props.edit( settings );
	70	+ } }
	71	+ />
70	72
71		- <TextControl
72		- label={ __( 'Text Orientation' ) }
73		- help={ __( 'In degrees.' ) }
74		- type="number"
75		- value={ settings.customcss.oddTableRow.transform }
76		- onChange={ e => {
77		- settings.customcss.oddTableRow.transform = e;
78		- this.props.edit( settings );
79		- } }
80		- />
	73	+ </PanelBody>
81	74
82		- </PanelBody>
	75	+ <PanelBody
	76	+ title={ __( 'Table Row' ) }
	77	+ className="visualizer-inner-sections"
	78	+ initialOpen={ false }
	79	+ >
83	80
84		- <PanelBody
85		- title={ __( 'Even Table Row' ) }
86		- className="visualizer-inner-sections"
87		- initialOpen={ false }
88		- >
	81	+ <BaseControl
	82	+ label={ __( 'Background Color' ) }
	83	+ >
	84	+ <ColorPalette
	85	+ value={ settings.customcss.tableRow['background-color'] }
	86	+ onChange={ e => {
	87	+ settings.customcss.tableRow['background-color'] = e;
	88	+ this.props.edit( settings );
	89	+ } }
	90	+ />
	91	+ </BaseControl>
89	92
90		- <BaseControl
91		- label={ __( 'Background Color' ) }
92		- >
93		- <ColorPalette
94		- value={ settings.customcss.evenTableRow['background-color'] }
95		- onChange={ e => {
96		- settings.customcss.evenTableRow['background-color'] = e;
97		- this.props.edit( settings );
98		- } }
99		- />
100		- </BaseControl>
	93	+ <BaseControl
	94	+ label={ __( 'Color' ) }
	95	+ >
	96	+ <ColorPalette
	97	+ value={ settings.customcss.tableRow.color }
	98	+ onChange={ e => {
	99	+ settings.customcss.tableRow.color = e;
	100	+ this.props.edit( settings );
	101	+ } }
	102	+ />
	103	+ </BaseControl>
101	104
102		- <BaseControl
103		- label={ __( 'Color' ) }
104		- >
105		- <ColorPalette
106		- value={ settings.customcss.evenTableRow.color }
107		- onChange={ e => {
108		- settings.customcss.evenTableRow.color = e;
109		- this.props.edit( settings );
110		- } }
111		- />
112		- </BaseControl>
	105	+ <TextControl
	106	+ label={ __( 'Text Orientation' ) }
	107	+ help={ __( 'In degrees.' ) }
	108	+ type="number"
	109	+ value={ settings.customcss.tableRow.transform }
	110	+ onChange={ e => {
	111	+ settings.customcss.tableRow.transform = e;
	112	+ this.props.edit( settings );
	113	+ } }
	114	+ />
113	115
114		- <TextControl
115		- label={ __( 'Text Orientation' ) }
116		- help={ __( 'In degrees.' ) }
117		- type="number"
118		- value={ settings.customcss.evenTableRow.transform }
119		- onChange={ e => {
120		- settings.customcss.evenTableRow.transform = e;
121		- this.props.edit( settings );
122		- } }
123		- />
	116	+ </PanelBody>
124	117
125		- </PanelBody>
	118	+ <PanelBody
	119	+ title={ __( 'Odd Table Row' ) }
	120	+ className="visualizer-inner-sections"
	121	+ initialOpen={ false }
	122	+ >
126	123
127		- <PanelBody
128		- title={ __( 'Table Cell' ) }
129		- className="visualizer-inner-sections"
130		- initialOpen={ false }
131		- >
	124	+ <BaseControl
	125	+ label={ __( 'Background Color' ) }
	126	+ >
	127	+ <ColorPalette
	128	+ value={ settings.customcss.oddTableRow['background-color'] }
	129	+ onChange={ e => {
	130	+ settings.customcss.oddTableRow['background-color'] = e;
	131	+ this.props.edit( settings );
	132	+ } }
	133	+ />
	134	+ </BaseControl>
132	135
133		- <BaseControl
134		- label={ __( 'Background Color' ) }
135		- >
136		- <ColorPalette
137		- value={ settings.customcss.tableCell['background-color'] }
138		- onChange={ e => {
139		- settings.customcss.tableCell['background-color'] = e;
140		- this.props.edit( settings );
141		- } }
142		- />
143		- </BaseControl>
	136	+ <BaseControl
	137	+ label={ __( 'Color' ) }
	138	+ >
	139	+ <ColorPalette
	140	+ value={ settings.customcss.oddTableRow.color }
	141	+ onChange={ e => {
	142	+ settings.customcss.oddTableRow.color = e;
	143	+ this.props.edit( settings );
	144	+ } }
	145	+ />
	146	+ </BaseControl>
144	147
145		- <BaseControl
146		- label={ __( 'Color' ) }
147		- >
148		- <ColorPalette
149		- value={ settings.customcss.tableCell.color }
150		- onChange={ e => {
151		- settings.customcss.tableCell.color = e;
152		- this.props.edit( settings );
153		- } }
154		- />
155		- </BaseControl>
	148	+ <TextControl
	149	+ label={ __( 'Text Orientation' ) }
	150	+ help={ __( 'In degrees.' ) }
	151	+ type="number"
	152	+ value={ settings.customcss.oddTableRow.transform }
	153	+ onChange={ e => {
	154	+ settings.customcss.oddTableRow.transform = e;
	155	+ this.props.edit( settings );
	156	+ } }
	157	+ />
156	158
157		- <TextControl
158		- label={ __( 'Text Orientation' ) }
159		- help={ __( 'In degrees.' ) }
160		- type="number"
161		- value={ settings.customcss.tableCell.transform }
162		- onChange={ e => {
163		- settings.customcss.tableCell.transform = e;
164		- this.props.edit( settings );
165		- } }
166		- />
	159	+ </PanelBody>
167	160
168		- </PanelBody>
	161	+ <PanelBody
	162	+ title={ __( 'Selected Table Row' ) }
	163	+ className="visualizer-inner-sections"
	164	+ initialOpen={ false }
	165	+ >
169	166
170		- </Fragment>
171		- ) : (
172		- <Fragment>
	167	+ <BaseControl
	168	+ label={ __( 'Background Color' ) }
	169	+ >
	170	+ <ColorPalette
	171	+ value={ settings.customcss.selectedTableRow['background-color'] }
	172	+ onChange={ e => {
	173	+ settings.customcss.selectedTableRow['background-color'] = e;
	174	+ this.props.edit( settings );
	175	+ } }
	176	+ />
	177	+ </BaseControl>
173	178
174		- <PanelBody
175		- title={ __( 'Header Row' ) }
176		- className="visualizer-inner-sections"
177		- initialOpen={ false }
178		- >
	179	+ <BaseControl
	180	+ label={ __( 'Color' ) }
	181	+ >
	182	+ <ColorPalette
	183	+ value={ settings.customcss.selectedTableRow.color }
	184	+ onChange={ e => {
	185	+ settings.customcss.selectedTableRow.color = e;
	186	+ this.props.edit( settings );
	187	+ } }
	188	+ />
	189	+ </BaseControl>
179	190
180		- <BaseControl
181		- label={ __( 'Background Color' ) }
182		- >
183		- <ColorPalette
184		- value={ settings.customcss.headerRow['background-color'] }
185		- onChange={ e => {
186		- settings.customcss.headerRow['background-color'] = e;
187		- this.props.edit( settings );
188		- } }
189		- />
190		- </BaseControl>
	191	+ <TextControl
	192	+ label={ __( 'Text Orientation' ) }
	193	+ help={ __( 'In degrees.' ) }
	194	+ type="number"
	195	+ value={ settings.customcss.selectedTableRow.transform }
	196	+ onChange={ e => {
	197	+ settings.customcss.selectedTableRow.transform = e;
	198	+ this.props.edit( settings );
	199	+ } }
	200	+ />
191	201
192		- <BaseControl
193		- label={ __( 'Color' ) }
194		- >
195		- <ColorPalette
196		- value={ settings.customcss.headerRow.color }
197		- onChange={ e => {
198		- settings.customcss.headerRow.color = e;
199		- this.props.edit( settings );
200		- } }
201		- />
202		- </BaseControl>
	202	+ </PanelBody>
203	203
204		- <TextControl
205		- label={ __( 'Text Orientation' ) }
206		- help={ __( 'In degrees.' ) }
207		- type="number"
208		- value={ settings.customcss.headerRow.transform }
209		- onChange={ e => {
210		- settings.customcss.headerRow.transform = e;
211		- this.props.edit( settings );
212		- } }
213		- />
	204	+ <PanelBody
	205	+ title={ __( 'Hover Table Row' ) }
	206	+ className="visualizer-inner-sections"
	207	+ initialOpen={ false }
	208	+ >
214	209
215		- </PanelBody>
	210	+ <BaseControl
	211	+ label={ __( 'Background Color' ) }
	212	+ >
	213	+ <ColorPalette
	214	+ value={ settings.customcss.hoverTableRow['background-color'] }
	215	+ onChange={ e => {
	216	+ settings.customcss.hoverTableRow['background-color'] = e;
	217	+ this.props.edit( settings );
	218	+ } }
	219	+ />
	220	+ </BaseControl>
216	221
217		- <PanelBody
218		- title={ __( 'Table Row' ) }
219		- className="visualizer-inner-sections"
220		- initialOpen={ false }
221		- >
	222	+ <BaseControl
	223	+ label={ __( 'Color' ) }
	224	+ >
	225	+ <ColorPalette
	226	+ value={ settings.customcss.hoverTableRow.color }
	227	+ onChange={ e => {
	228	+ settings.customcss.hoverTableRow.color = e;
	229	+ this.props.edit( settings );
	230	+ } }
	231	+ />
	232	+ </BaseControl>
222	233
223		- <BaseControl
224		- label={ __( 'Background Color' ) }
225		- >
226		- <ColorPalette
227		- value={ settings.customcss.tableRow['background-color'] }
228		- onChange={ e => {
229		- settings.customcss.tableRow['background-color'] = e;
230		- this.props.edit( settings );
231		- } }
232		- />
233		- </BaseControl>
	234	+ <TextControl
	235	+ label={ __( 'Text Orientation' ) }
	236	+ help={ __( 'In degrees.' ) }
	237	+ type="number"
	238	+ value={ settings.customcss.hoverTableRow.transform }
	239	+ onChange={ e => {
	240	+ settings.customcss.hoverTableRow.transform = e;
	241	+ this.props.edit( settings );
	242	+ } }
	243	+ />
234	244
235		- <BaseControl
236		- label={ __( 'Color' ) }
237		- >
238		- <ColorPalette
239		- value={ settings.customcss.tableRow.color }
240		- onChange={ e => {
241		- settings.customcss.tableRow.color = e;
242		- this.props.edit( settings );
243		- } }
244		- />
245		- </BaseControl>
	245	+ </PanelBody>
246	246
247		- <TextControl
248		- label={ __( 'Text Orientation' ) }
249		- help={ __( 'In degrees.' ) }
250		- type="number"
251		- value={ settings.customcss.tableRow.transform }
252		- onChange={ e => {
253		- settings.customcss.tableRow.transform = e;
254		- this.props.edit( settings );
255		- } }
256		- />
	247	+ <PanelBody
	248	+ title={ __( 'Header Cell' ) }
	249	+ className="visualizer-inner-sections"
	250	+ initialOpen={ false }
	251	+ >
257	252
258		- </PanelBody>
	253	+ <BaseControl
	254	+ label={ __( 'Background Color' ) }
	255	+ >
	256	+ <ColorPalette
	257	+ value={ settings.customcss.headerCell['background-color'] }
	258	+ onChange={ e => {
	259	+ settings.customcss.headerCell['background-color'] = e;
	260	+ this.props.edit( settings );
	261	+ } }
	262	+ />
	263	+ </BaseControl>
259	264
260		- <PanelBody
261		- title={ __( 'Odd Table Row' ) }
262		- className="visualizer-inner-sections"
263		- initialOpen={ false }
264		- >
	265	+ <BaseControl
	266	+ label={ __( 'Color' ) }
	267	+ >
	268	+ <ColorPalette
	269	+ value={ settings.customcss.headerCell.color }
	270	+ onChange={ e => {
	271	+ settings.customcss.headerCell.color = e;
	272	+ this.props.edit( settings );
	273	+ } }
	274	+ />
	275	+ </BaseControl>
265	276
266		- <BaseControl
267		- label={ __( 'Background Color' ) }
268		- >
269		- <ColorPalette
270		- value={ settings.customcss.oddTableRow['background-color'] }
271		- onChange={ e => {
272		- settings.customcss.oddTableRow['background-color'] = e;
273		- this.props.edit( settings );
274		- } }
275		- />
276		- </BaseControl>
	277	+ <TextControl
	278	+ label={ __( 'Text Orientation' ) }
	279	+ help={ __( 'In degrees.' ) }
	280	+ type="number"
	281	+ value={ settings.customcss.headerCell.transform }
	282	+ onChange={ e => {
	283	+ settings.customcss.headerCell.transform = e;
	284	+ this.props.edit( settings );
	285	+ } }
	286	+ />
277	287
278		- <BaseControl
279		- label={ __( 'Color' ) }
280		- >
281		- <ColorPalette
282		- value={ settings.customcss.oddTableRow.color }
283		- onChange={ e => {
284		- settings.customcss.oddTableRow.color = e;
285		- this.props.edit( settings );
286		- } }
287		- />
288		- </BaseControl>
	288	+ </PanelBody>
289	289
290		- <TextControl
291		- label={ __( 'Text Orientation' ) }
292		- help={ __( 'In degrees.' ) }
293		- type="number"
294		- value={ settings.customcss.oddTableRow.transform }
295		- onChange={ e => {
296		- settings.customcss.oddTableRow.transform = e;
297		- this.props.edit( settings );
298		- } }
299		- />
	290	+ <PanelBody
	291	+ title={ __( 'Table Cell' ) }
	292	+ className="visualizer-inner-sections"
	293	+ initialOpen={ false }
	294	+ >
300	295
301		- </PanelBody>
	296	+ <BaseControl
	297	+ label={ __( 'Background Color' ) }
	298	+ >
	299	+ <ColorPalette
	300	+ value={ settings.customcss.tableCell['background-color'] }
	301	+ onChange={ e => {
	302	+ settings.customcss.tableCell['background-color'] = e;
	303	+ this.props.edit( settings );
	304	+ } }
	305	+ />
	306	+ </BaseControl>
302	307
303		- <PanelBody
304		- title={ __( 'Selected Table Row' ) }
305		- className="visualizer-inner-sections"
306		- initialOpen={ false }
307		- >
	308	+ <BaseControl
	309	+ label={ __( 'Color' ) }
	310	+ >
	311	+ <ColorPalette
	312	+ value={ settings.customcss.tableCell.color }
	313	+ onChange={ e => {
	314	+ settings.customcss.tableCell.color = e;
	315	+ this.props.edit( settings );
	316	+ } }
	317	+ />
	318	+ </BaseControl>
308	319
309		- <BaseControl
310		- label={ __( 'Background Color' ) }
311		- >
312		- <ColorPalette
313		- value={ settings.customcss.selectedTableRow['background-color'] }
314		- onChange={ e => {
315		- settings.customcss.selectedTableRow['background-color'] = e;
316		- this.props.edit( settings );
317		- } }
318		- />
319		- </BaseControl>
	320	+ <TextControl
	321	+ label={ __( 'Text Orientation' ) }
	322	+ help={ __( 'In degrees.' ) }
	323	+ type="number"
	324	+ value={ settings.customcss.tableCell.transform }
	325	+ onChange={ e => {
	326	+ settings.customcss.tableCell.transform = e;
	327	+ this.props.edit( settings );
	328	+ } }
	329	+ />
320	330
321		- <BaseControl
322		- label={ __( 'Color' ) }
323		- >
324		- <ColorPalette
325		- value={ settings.customcss.selectedTableRow.color }
326		- onChange={ e => {
327		- settings.customcss.selectedTableRow.color = e;
328		- this.props.edit( settings );
329		- } }
330		- />
331		- </BaseControl>
332		-
333		- <TextControl
334		- label={ __( 'Text Orientation' ) }
335		- help={ __( 'In degrees.' ) }
336		- type="number"
337		- value={ settings.customcss.selectedTableRow.transform }
338		- onChange={ e => {
339		- settings.customcss.selectedTableRow.transform = e;
340		- this.props.edit( settings );
341		- } }
342		- />
343		-
344		- </PanelBody>
345		-
346		- <PanelBody
347		- title={ __( 'Hover Table Row' ) }
348		- className="visualizer-inner-sections"
349		- initialOpen={ false }
350		- >
351		-
352		- <BaseControl
353		- label={ __( 'Background Color' ) }
354		- >
355		- <ColorPalette
356		- value={ settings.customcss.hoverTableRow['background-color'] }
357		- onChange={ e => {
358		- settings.customcss.hoverTableRow['background-color'] = e;
359		- this.props.edit( settings );
360		- } }
361		- />
362		- </BaseControl>
363		-
364		- <BaseControl
365		- label={ __( 'Color' ) }
366		- >
367		- <ColorPalette
368		- value={ settings.customcss.hoverTableRow.color }
369		- onChange={ e => {
370		- settings.customcss.hoverTableRow.color = e;
371		- this.props.edit( settings );
372		- } }
373		- />
374		- </BaseControl>
375		-
376		- <TextControl
377		- label={ __( 'Text Orientation' ) }
378		- help={ __( 'In degrees.' ) }
379		- type="number"
380		- value={ settings.customcss.hoverTableRow.transform }
381		- onChange={ e => {
382		- settings.customcss.hoverTableRow.transform = e;
383		- this.props.edit( settings );
384		- } }
385		- />
386		-
387		- </PanelBody>
388		-
389		- <PanelBody
390		- title={ __( 'Header Cell' ) }
391		- className="visualizer-inner-sections"
392		- initialOpen={ false }
393		- >
394		-
395		- <BaseControl
396		- label={ __( 'Background Color' ) }
397		- >
398		- <ColorPalette
399		- value={ settings.customcss.headerCell['background-color'] }
400		- onChange={ e => {
401		- settings.customcss.headerCell['background-color'] = e;
402		- this.props.edit( settings );
403		- } }
404		- />
405		- </BaseControl>
406		-
407		- <BaseControl
408		- label={ __( 'Color' ) }
409		- >
410		- <ColorPalette
411		- value={ settings.customcss.headerCell.color }
412		- onChange={ e => {
413		- settings.customcss.headerCell.color = e;
414		- this.props.edit( settings );
415		- } }
416		- />
417		- </BaseControl>
418		-
419		- <TextControl
420		- label={ __( 'Text Orientation' ) }
421		- help={ __( 'In degrees.' ) }
422		- type="number"
423		- value={ settings.customcss.headerCell.transform }
424		- onChange={ e => {
425		- settings.customcss.headerCell.transform = e;
426		- this.props.edit( settings );
427		- } }
428		- />
429		-
430		- </PanelBody>
431		-
432		- <PanelBody
433		- title={ __( 'Table Cell' ) }
434		- className="visualizer-inner-sections"
435		- initialOpen={ false }
436		- >
437		-
438		- <BaseControl
439		- label={ __( 'Background Color' ) }
440		- >
441		- <ColorPalette
442		- value={ settings.customcss.tableCell['background-color'] }
443		- onChange={ e => {
444		- settings.customcss.tableCell['background-color'] = e;
445		- this.props.edit( settings );
446		- } }
447		- />
448		- </BaseControl>
449		-
450		- <BaseControl
451		- label={ __( 'Color' ) }
452		- >
453		- <ColorPalette
454		- value={ settings.customcss.tableCell.color }
455		- onChange={ e => {
456		- settings.customcss.tableCell.color = e;
457		- this.props.edit( settings );
458		- } }
459		- />
460		- </BaseControl>
461		-
462		- <TextControl
463		- label={ __( 'Text Orientation' ) }
464		- help={ __( 'In degrees.' ) }
465		- type="number"
466		- value={ settings.customcss.tableCell.transform }
467		- onChange={ e => {
468		- settings.customcss.tableCell.transform = e;
469		- this.props.edit( settings );
470		- } }
471		- />
472		-
473		- </PanelBody>
474		-
475		- </Fragment>
476		- ) }
	331	+ </PanelBody>
477	332
478	333	</PanelBody>
479	334	);
480	335	}