tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Creates TainacanCompatColorPicker component to handle different versions #656

This commit is contained in:
mateuswetah 2022-01-13 16:10:17 -03:00
parent 06dc18e6b2
commit 359d20e58b
7 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
View File

@ -10,6 +10,7 @@ import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js'; import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
import 'swiper/css/swiper.min.css'; import 'swiper/css/swiper.min.css';
export default function({ attributes, setAttributes, className, isSelected, clientId }){ export default function({ attributes, setAttributes, className, isSelected, clientId }){
@ -324,7 +325,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
<BaseControl <BaseControl
id="backgroundcolorpicker" id="backgroundcolorpicker"
label={ __('Background color', 'tainacan')}> label={ __('Background color', 'tainacan')}>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ collectionBackgroundColor } value={ collectionBackgroundColor }
onChange={ ( color ) => { onChange={ ( color ) => {
collectionBackgroundColor = color; collectionBackgroundColor = color;

3
src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
View File

@ -10,6 +10,7 @@ import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js'; import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
export default function({ attributes, setAttributes, className, isSelected, clientId }){ export default function({ attributes, setAttributes, className, isSelected, clientId }){
let { let {
@ -571,7 +572,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
<BaseControl <BaseControl
id="backgroundcolorpicker" id="backgroundcolorpicker"
label={ __('Background color', 'tainacan') }> label={ __('Background color', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ collectionBackgroundColor } value={ collectionBackgroundColor }
onChange={ ( color ) => { onChange={ ( color ) => {
collectionBackgroundColor = color; collectionBackgroundColor = color;

25
src/views/gutenberg-blocks/blocks/faceted-search/edit.js
View File

@ -24,6 +24,7 @@ const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2'
import CollectionModal from './collection-modal.js'; import CollectionModal from './collection-modal.js';
import TermModal from './term-modal.js'; import TermModal from './term-modal.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
export default function({ attributes, setAttributes, className, isSelected, clientId }) { export default function({ attributes, setAttributes, className, isSelected, clientId }) {
let { let {
@ -586,7 +587,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="backgroundColorPicker" id="backgroundColorPicker"
label={ __('Background color', 'tainacan')} label={ __('Background color', 'tainacan')}
help={ __('The background color of the entire items list', 'tainacan') }> help={ __('The background color of the entire items list', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ backgroundColor } value={ backgroundColor }
onChange={ ( colorValue ) => { onChange={ ( colorValue ) => {
backgroundColor = colorValue; backgroundColor = colorValue;
@ -600,7 +601,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="secondaryColorPicker" id="secondaryColorPicker"
label={ __('Link and Active Main color', 'tainacan')} label={ __('Link and Active Main color', 'tainacan')}
help={ __('The text color links and other action or active state elements, such as select arrows, tooltip contents, etc', 'tainacan') }> help={ __('The text color links and other action or active state elements, such as select arrows, tooltip contents, etc', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ secondaryColor } value={ secondaryColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
secondaryColor = colorValue; secondaryColor = colorValue;
@ -614,7 +615,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="primaryColorPicker" id="primaryColorPicker"
label={ __('Tooltips background color', 'tainacan')} label={ __('Tooltips background color', 'tainacan')}
help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }> help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ primaryColor } value={ primaryColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
primaryColor = colorValue; primaryColor = colorValue;
@ -628,7 +629,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="inputBackgroundColorPicker" id="inputBackgroundColorPicker"
label={ __('Input Background color', 'tainacan')} label={ __('Input Background color', 'tainacan')}
help={ __('The background color for input fields', 'tainacan') }> help={ __('The background color for input fields', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ inputBackgroundColor } value={ inputBackgroundColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
inputBackgroundColor = colorValue; inputBackgroundColor = colorValue;
@ -642,7 +643,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="inputColorPicker" id="inputColorPicker"
label={ __('Input Text color', 'tainacan')} label={ __('Input Text color', 'tainacan')}
help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }> help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ inputColor } value={ inputColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
inputColor = colorValue; inputColor = colorValue;
@ -656,7 +657,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="inputBorderColorPicker" id="inputBorderColorPicker"
label={ __('Input Border color', 'tainacan')} label={ __('Input Border color', 'tainacan')}
help={ __('The border color for input fields', 'tainacan') }> help={ __('The border color for input fields', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ inputBorderColor } value={ inputBorderColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
inputBorderColor = colorValue; inputBorderColor = colorValue;
@ -670,7 +671,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="labelColorPicker" id="labelColorPicker"
label={ __('Label Text color', 'tainacan')} label={ __('Label Text color', 'tainacan')}
help={ __('The text color for field labels', 'tainacan') }> help={ __('The text color for field labels', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ labelColor } value={ labelColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
labelColor = colorValue; labelColor = colorValue;
@ -684,7 +685,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="headingColorPicker" id="headingColorPicker"
label={ __('Headings Text color', 'tainacan')} label={ __('Headings Text color', 'tainacan')}
help={ __('The text color for headings such as items title and filters menu header', 'tainacan') }> help={ __('The text color for headings such as items title and filters menu header', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ headingColor } value={ headingColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
headingColor = colorValue; headingColor = colorValue;
@ -698,7 +699,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="infoColorPicker" id="infoColorPicker"
label={ __('General Info Text color', 'tainacan')} label={ __('General Info Text color', 'tainacan')}
help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }> help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ infoColor } value={ infoColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
infoColor = colorValue; infoColor = colorValue;
@ -711,7 +712,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="itemBackgroundColorPicker" id="itemBackgroundColorPicker"
label={ __('Item Background color', 'tainacan')} label={ __('Item Background color', 'tainacan')}
help={ __('The background color for an item on the list', 'tainacan') }> help={ __('The background color for an item on the list', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ itemBackgroundColor } value={ itemBackgroundColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
itemBackgroundColor = colorValue; itemBackgroundColor = colorValue;
@ -725,7 +726,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="itemHoverBackgroundColorPicker" id="itemHoverBackgroundColorPicker"
label={ __('Item Hover Background color', 'tainacan')} label={ __('Item Hover Background color', 'tainacan')}
help={ __('The background color for an item on the list, when hovered', 'tainacan') }> help={ __('The background color for an item on the list, when hovered', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ itemHoverBackgroundColor } value={ itemHoverBackgroundColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
itemHoverBackgroundColor = colorValue; itemHoverBackgroundColor = colorValue;
@ -743,7 +744,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id="itemHeadingHoverBackgroundColorPicker" id="itemHeadingHoverBackgroundColorPicker"
label={ __('Item Heading Hover Background color', 'tainacan')} label={ __('Item Heading Hover Background color', 'tainacan')}
help={ __('The background color for the item heading (where the title is), when hovered', 'tainacan') }> help={ __('The background color for the item heading (where the title is), when hovered', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ itemHeadingHoverBackgroundColor } value={ itemHeadingHoverBackgroundColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
itemHeadingHoverBackgroundColor = colorValue; itemHeadingHoverBackgroundColor = colorValue;

18
src/views/gutenberg-blocks/blocks/item-submission-form/edit.js
View File

@ -4,7 +4,6 @@ const {
Button, Button,
TextControl, TextControl,
TextareaControl, TextareaControl,
ColorPalette,
BaseControl, BaseControl,
CheckboxControl, CheckboxControl,
FontSizePicker, FontSizePicker,
@ -20,6 +19,7 @@ const { InspectorControls, BlockControls, RichText, useBlockProps } = (tainacan_
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import CollectionModal from '../faceted-search/collection-modal.js'; import CollectionModal from '../faceted-search/collection-modal.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
export default function ({ attributes, setAttributes, className }) { export default function ({ attributes, setAttributes, className }) {
let { let {
@ -413,7 +413,7 @@ export default function ({ attributes, setAttributes, className }) {
id="backgroundColorPicker" id="backgroundColorPicker"
label={ __('Background color', 'tainacan')} label={ __('Background color', 'tainacan')}
help={ __('The background color of the entire items list', 'tainacan') }> help={ __('The background color of the entire items list', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ backgroundColor } value={ backgroundColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
backgroundColor = colorValue; backgroundColor = colorValue;
@ -427,7 +427,7 @@ export default function ({ attributes, setAttributes, className }) {
id="secondaryColorPicker" id="secondaryColorPicker"
label={ __('Link and Active Main color', 'tainacan')} label={ __('Link and Active Main color', 'tainacan')}
help={ __('The text color links and other action or active state elements, such as select arrows, tooltip contents, etc', 'tainacan') }> help={ __('The text color links and other action or active state elements, such as select arrows, tooltip contents, etc', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ secondaryColor } value={ secondaryColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
secondaryColor = colorValue; secondaryColor = colorValue;
@ -441,7 +441,7 @@ export default function ({ attributes, setAttributes, className }) {
id="primaryColorPicker" id="primaryColorPicker"
label={ __('Tooltips background color', 'tainacan')} label={ __('Tooltips background color', 'tainacan')}
help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }> help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ primaryColor } value={ primaryColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
primaryColor = colorValue; primaryColor = colorValue;
@ -455,7 +455,7 @@ export default function ({ attributes, setAttributes, className }) {
id="inputBackgroundColorPicker" id="inputBackgroundColorPicker"
label={ __('Input Background color', 'tainacan')} label={ __('Input Background color', 'tainacan')}
help={ __('The background color for input fields', 'tainacan') }> help={ __('The background color for input fields', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ inputBackgroundColor } value={ inputBackgroundColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
inputBackgroundColor = colorValue; inputBackgroundColor = colorValue;
@ -469,7 +469,7 @@ export default function ({ attributes, setAttributes, className }) {
id="inputColorPicker" id="inputColorPicker"
label={ __('Input Text color', 'tainacan')} label={ __('Input Text color', 'tainacan')}
help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }> help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ inputColor } value={ inputColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
inputColor = colorValue; inputColor = colorValue;
@ -483,7 +483,7 @@ export default function ({ attributes, setAttributes, className }) {
id="inputBorderColorPicker" id="inputBorderColorPicker"
label={ __('Input Border color', 'tainacan')} label={ __('Input Border color', 'tainacan')}
help={ __('The border color for input fields', 'tainacan') }> help={ __('The border color for input fields', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ inputBorderColor } value={ inputBorderColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
inputBorderColor = colorValue; inputBorderColor = colorValue;
@ -497,7 +497,7 @@ export default function ({ attributes, setAttributes, className }) {
id="labelColorPicker" id="labelColorPicker"
label={ __('Label Text color', 'tainacan')} label={ __('Label Text color', 'tainacan')}
help={ __('The text color for field labels', 'tainacan') }> help={ __('The text color for field labels', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ labelColor } value={ labelColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
labelColor = colorValue; labelColor = colorValue;
@ -510,7 +510,7 @@ export default function ({ attributes, setAttributes, className }) {
id="infoColorPicker" id="infoColorPicker"
label={ __('General Info Text color', 'tainacan')} label={ __('General Info Text color', 'tainacan')}
help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }> help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ infoColor } value={ infoColor }
onChange={ (colorValue ) => { onChange={ (colorValue ) => {
infoColor = colorValue; infoColor = colorValue;

3
src/views/gutenberg-blocks/blocks/search-bar/edit.js
View File

@ -5,6 +5,7 @@ const { RangeControl, TextControl, SelectControl, Button, ToggleControl, Placeho
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js';
import SearchBarModal from './search-bar-modal.js'; import SearchBarModal from './search-bar-modal.js';
export default function({ attributes, setAttributes, className, isSelected }) { export default function({ attributes, setAttributes, className, isSelected }) {
@ -310,7 +311,7 @@ export default function({ attributes, setAttributes, className, isSelected }) {
<BaseControl <BaseControl
id="backgroundcolorpicker" id="backgroundcolorpicker"
label={ __('Background color', 'tainacan') }> label={ __('Background color', 'tainacan') }>
<ColorPalette <TainacanBlocksCompatColorPicker
value={ collectionBackgroundColor } value={ collectionBackgroundColor }
onChange={ ( color ) => { onChange={ ( color ) => {
collectionBackgroundColor = color; collectionBackgroundColor = color;

21
src/views/gutenberg-blocks/js/tainacan-blocks-compat-colorpicker.js Normal file
View File

@ -0,0 +1,21 @@
const { ColorPicker, ColorPalette } = wp.components;
export default function TainacanBlocksCompatColorPicker({ value, onChange, enableAlpha, disableAlpha }) {
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
return currentWPVersion < '5.9' ?
<ColorPicker
color={ value }
onChangeComplete={ (value) => onChange(value.hex) }
enableAlpha={ enableAlpha }
disableAlpha={ disableAlpha }
/>
:
<ColorPalette
value={ value }
onChange={ onChange }
enableAlpha={ enableAlpha }
disableAlpha={ disableAlpha }
/>
}

2
src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js
View File

@ -2,7 +2,7 @@ const { Button, Toolbar, ToolbarGroup, ToolbarButton } = wp.components;
export default function TainacanBlocksCompatToolbar({ label, icon, onClick, onClickParams, controls }) { export default function TainacanBlocksCompatToolbar({ label, icon, onClick, onClickParams, controls }) {
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? currentWPVersion : tainacan_plugin.wp_version; const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
if (controls !== undefined) if (controls !== undefined)
return currentWPVersion < '5.4' ? <Toolbar controls={ controls } /> : <ToolbarGroup controls={ controls } /> return currentWPVersion < '5.4' ? <Toolbar controls={ controls } /> : <ToolbarGroup controls={ controls } />