Global Inline Preset Color Issue Fixed

themeum · Nov 14, 2019 · 3a8b873 · 3a8b873
1 parent 628e9cb
commit 3a8b873
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/assets/reactjs/src/blocks/divider/index.js b/assets/reactjs/src/blocks/divider/index.js
@@ -19,7 +19,7 @@ registerBlockType ( 'qubely/divider', {
         ...globalAttributes,
 		spacer: { type: 'object', default:{spaceTop: { md: '10', unit: "px"}, spaceBottom: { md: '10', unit: "px"}}, style: [{ selector: '{{QUBELY}}' }] },
         style: { type: 'string', default: 'slash' },
-		color: { type: 'string', default: '#252525', style: [{ selector: '{{QUBELY}} .qubely-block-divider > div { border-top-color: {{color}}; } {{QUBELY}} .qubely-block-divider path { fill: {{color}}; }' }] },
+		color: { type: 'string', default: '#252525', style: [{ selector: '{{QUBELY}} .qubely-block-divider > div { border-top-color: {{color}}; } {{QUBELY}} .qubely-block-divider path { fill: {{color}}; } {{QUBELY}} .qubely-block-divider circle { stroke: {{color}}; }  {{QUBELY}} .qubely-block-divider ellipse { stroke: {{color}}; fill: {{color}}; }' }] },
 		height: { type: 'object', default: {md: '2', unit: 'px'}, style: [{ selector: '{{QUBELY}} .qubely-block-divider > div { border-top-width: {{height}};}' }] }, 
 		width: { type: 'object', default: {md: '280', unit: 'px'}, style: [{ selector: '{{QUBELY}} .qubely-block-divider > div { width: {{width}};} {{QUBELY}} .qubely-block-divider svg { width: {{width}};}' }] },
 		alignment: { type: 'object', default: {md: 'center'}, style: [{ selector: '{{QUBELY}} .qubely-block-divider {text-align: {{alignment}};}' }]},

diff --git a/assets/reactjs/src/components/fields/inline/editorInline.js b/assets/reactjs/src/components/fields/inline/editorInline.js
@@ -7,6 +7,17 @@ const { RichTextToolbarButton } = wp.blockEditor;
 const { registerFormatType } = wp.richText;
 const { ColorPicker, Popover } = wp.components;
 
+function defColors() {
+    let val = [];
+    const colors = window.globalData.settings;
+    val.push(colors.colorPreset1 || qubely_admin.palette[0])
+    val.push(colors.colorPreset2 || qubely_admin.palette[1])
+    val.push(colors.colorPreset3 || qubely_admin.palette[2])
+    val.push(colors.colorPreset4 || qubely_admin.palette[3])
+    val.push(colors.colorPreset5 || qubely_admin.palette[4])
+    val.push(colors.colorPreset6 || qubely_admin.palette[5])
+    return val;
+}
 
 function registerFormat() {
 
@@ -133,7 +144,19 @@ function registerFormat() {
                                             endIndex: value.end
                                         }))
                                     }} />
-
+                                    <div className="qubely-rgba-palette" style={{ padding: '0px 0px 15px 15px' }}>
+                                        {defColors().map(color => <button style={{ color: color }} onClick={() => {
+                                            onChange(applyFormat(value, {
+                                                type: 'qubely/inlinecolor',
+                                                attributes: {
+                                                    style: `color: ${color};`,
+                                                    data: color
+                                                },
+                                                startIndex: value.start,
+                                                endIndex: value.end
+                                            }))
+                                        }} />)}
+                                    </div>
                             </Popover>
                         }
                     </Fragment>
@@ -232,6 +255,20 @@ function registerFormat() {
                                         }))
                                     }} />
 
+                                <div className="qubely-rgba-palette" style={{ padding: '0px 0px 15px 15px' }}>
+                                    {defColors().map(color => <button style={{ color: color }} onClick={() => {
+                                        onChange(applyFormat(value, {
+                                            type: 'qubely/backgroundcolor',
+                                            attributes: {
+                                                style: `background-color: ${color};`,
+                                                data: color
+                                            },
+                                            startIndex: value.start,
+                                            endIndex: value.end
+                                        }))
+                                    }} />)}
+                                </div>
+
                             </Popover>
                         }
                     </Fragment>