← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/RowCellSettings.js +412 -268 3.1.2 → 3.4.2 View file →

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