← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/RowCellSettings.js +413 -268 3.1.0 → 3.7.1 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,11 @@
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	+ const library = this.props.chart['visualizer-chart-library'];
	30	+
25	31	return (
26	32	<PanelBody
27	33	title={ __( 'Row/Cell Settings' ) }
28	34	initialOpen={ false }
		@@ -28,308 +34,447 @@
28	34	initialOpen={ false }
29	35	className="visualizer-advanced-panel"
30	36	>
31	37
32		- <PanelBody
33		- title={ __( 'Header Row' ) }
34		- className="visualizer-inner-sections"
35		- initialOpen={ false }
36		- >
	38	+ { ( 'DataTable' === library ) ? (
	39	+ <Fragment>
37	40
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>
	41	+ <PanelBody
	42	+ title={ __( 'Odd Table Row' ) }
	43	+ className="visualizer-inner-sections"
	44	+ initialOpen={ false }
	45	+ >
49	46
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>
	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>
61	58
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		- />
	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>
72	70
73		- </PanelBody>
	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	+ />
74	81
75		- <PanelBody
76		- title={ __( 'Table Row' ) }
77		- className="visualizer-inner-sections"
78		- initialOpen={ false }
79		- >
	82	+ </PanelBody>
80	83
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>
	84	+ <PanelBody
	85	+ title={ __( 'Even Table Row' ) }
	86	+ className="visualizer-inner-sections"
	87	+ initialOpen={ false }
	88	+ >
92	89
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>
	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>
104	101
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		- />
	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>
115	113
116		- </PanelBody>
	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	+ />
117	124
118		- <PanelBody
119		- title={ __( 'Odd Table Row' ) }
120		- className="visualizer-inner-sections"
121		- initialOpen={ false }
122		- >
	125	+ </PanelBody>
123	126
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>
	127	+ <PanelBody
	128	+ title={ __( 'Table Cell' ) }
	129	+ className="visualizer-inner-sections"
	130	+ initialOpen={ false }
	131	+ >
135	132
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>
	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>
147	144
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		- />
	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>
158	156
159		- </PanelBody>
	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	+ />
160	167
161		- <PanelBody
162		- title={ __( 'Selected Table Row' ) }
163		- className="visualizer-inner-sections"
164		- initialOpen={ false }
165		- >
	168	+ </PanelBody>
166	169
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>
	170	+ </Fragment>
	171	+ ) : (
	172	+ <Fragment>
178	173
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>
	174	+ <PanelBody
	175	+ title={ __( 'Header Row' ) }
	176	+ className="visualizer-inner-sections"
	177	+ initialOpen={ false }
	178	+ >
190	179
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		- />
	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>
201	191
202		- </PanelBody>
	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>
203	203
204		- <PanelBody
205		- title={ __( 'Hover Table Row' ) }
206		- className="visualizer-inner-sections"
207		- initialOpen={ false }
208		- >
	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	+ />
209	214
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>
	215	+ </PanelBody>
221	216
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>
	217	+ <PanelBody
	218	+ title={ __( 'Table Row' ) }
	219	+ className="visualizer-inner-sections"
	220	+ initialOpen={ false }
	221	+ >
233	222
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		- />
	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>
244	234
245		- </PanelBody>
	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>
246	246
247		- <PanelBody
248		- title={ __( 'Header Cell' ) }
249		- className="visualizer-inner-sections"
250		- initialOpen={ false }
251		- >
	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	+ />
252	257
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>
	258	+ </PanelBody>
264	259
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>
	260	+ <PanelBody
	261	+ title={ __( 'Odd Table Row' ) }
	262	+ className="visualizer-inner-sections"
	263	+ initialOpen={ false }
	264	+ >
276	265
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		- />
	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>
287	277
288		- </PanelBody>
	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>
289	289
290		- <PanelBody
291		- title={ __( 'Table Cell' ) }
292		- className="visualizer-inner-sections"
293		- initialOpen={ false }
294		- >
	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	+ />
295	300
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>
	301	+ </PanelBody>
307	302
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>
	303	+ <PanelBody
	304	+ title={ __( 'Selected Table Row' ) }
	305	+ className="visualizer-inner-sections"
	306	+ initialOpen={ false }
	307	+ >
319	308
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		- />
	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>
330	320
331		- </PanelBody>
	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	+ ) }
332	477
333	478	</PanelBody>
334	479	);
335	480	}