Adds background and text color selection to collection header block.
This commit is contained in:
Mateus Machado Luna
parent
8780b61b39
commit
6eef01eda9
|
|
@ -454,7 +454,7 @@
|
|||
flex-shrink: 0;
|
||||
position: relative;
|
||||
margin-left: -155px;
|
||||
left: 84px;
|
||||
left: 82px;
|
||||
background-color: #dbdbdb; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header-image {
|
||||
width: auto;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
order: 'asc',
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: false,
|
||||
collectionBackgroundColor: '#454647',
|
||||
collectionTextColor: '#ffffff',
|
||||
tainacanApiRoot: '',
|
||||
tainacanBaseUrl: '',
|
||||
className: ''
|
||||
|
|
@ -34,6 +36,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
order: this.order,
|
||||
showSearchBar: this.showSearchBar,
|
||||
showCollectionHeader: this.showCollectionHeader,
|
||||
collectionBackgroundColor: this.collectionBackgroundColor,
|
||||
collectionTextColor: this.collectionTextColor,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
className: this.className
|
||||
|
|
@ -52,6 +56,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
|
||||
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
|
||||
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
|
||||
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
class="dynamic-items-collection-header">
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1rem' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3>
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span class="label">{{ $root.__('Collection', 'tainacan') }}</span><br>
|
||||
{{ collection && collection.name ? collection.name : '' }}
|
||||
</h3>
|
||||
|
|
@ -224,6 +225,8 @@ export default {
|
|||
order: String,
|
||||
showSearchBar: Boolean,
|
||||
showCollectionHeader: Boolean,
|
||||
collectionBackgroundColor: String,
|
||||
collectionTextColor: String,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
className: String
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
|
|||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const { RangeControl, Spinner, Button, ToggleControl, Placeholder, Toolbar } = wp.components;
|
||||
const { RangeControl, Spinner, Button, ToggleControl, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = wp.editor;
|
||||
|
||||
|
|
@ -100,6 +100,14 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
blockId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
collectionBackgroundColor: {
|
||||
type: String,
|
||||
default: "#454647"
|
||||
},
|
||||
collectionTextColor: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
|
|
@ -125,7 +133,9 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
isLoadingCollection,
|
||||
collection
|
||||
collection,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor
|
||||
} = attributes;
|
||||
|
||||
// Obtains block's client id to render it on save function
|
||||
|
|
@ -245,10 +255,18 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
collection = response.data;
|
||||
isLoadingCollection = false;
|
||||
|
||||
if (collection.tainacan_theme_collection_background_color)
|
||||
collectionBackgroundColor = collection.tainacan_theme_collection_background_color;
|
||||
|
||||
if (collection.tainacan_theme_collection_color)
|
||||
collectionTextColor = collection.tainacan_theme_collection_color;
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
collection: collection,
|
||||
isLoadingCollection: isLoadingCollection,
|
||||
collectionBackgroundColor: collectionBackgroundColor,
|
||||
collectionTextColor: collectionTextColor
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -376,9 +394,10 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
/>
|
||||
</div>
|
||||
<div style={{ marginTop: '20px'}}>
|
||||
<hr></hr>
|
||||
<ToggleControl
|
||||
label={__('Collection header', 'tainacan')}
|
||||
help={ showCollectionHeader ? __('Toggle to show collection header above items', 'tainacan') : __('Do not show collection header', 'tainacan')}
|
||||
help={ showCollectionHeader ? __('Toggle to show collection header', 'tainacan') : __('Do not show collection header', 'tainacan')}
|
||||
checked={ showCollectionHeader }
|
||||
onChange={ ( isChecked ) => {
|
||||
showCollectionHeader = isChecked;
|
||||
|
|
@ -387,8 +406,39 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
}
|
||||
}
|
||||
/>
|
||||
{ showCollectionHeader ?
|
||||
<div style={{ margin: '6px' }}>
|
||||
<BaseControl
|
||||
id="colorpicker"
|
||||
label={ __('Background color', 'tainacan')}>
|
||||
<ColorPicker
|
||||
color={ collectionBackgroundColor }
|
||||
onChangeComplete={ ( value ) => {
|
||||
collectionBackgroundColor = value.hex;
|
||||
setAttributes({ collectionBackgroundColor: collectionBackgroundColor })
|
||||
}}
|
||||
disableAlpha
|
||||
/>
|
||||
</BaseControl>
|
||||
|
||||
<BaseControl
|
||||
id="colorpallete"
|
||||
label={ __('Collection name color', 'tainacan')}>
|
||||
<ColorPalette
|
||||
colors={ [{ name: __('Black', 'tainacan'), color: '#000000'}, { name: __('White', 'tainacan'), color: '#ffffff'} ] }
|
||||
value={ collectionTextColor }
|
||||
onChange={ ( color ) => {
|
||||
collectionTextColor = color;
|
||||
setAttributes({ collectionTextColor: collectionTextColor })
|
||||
}}
|
||||
/>
|
||||
</BaseControl>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
<div style={{ marginTop: '20px'}}>
|
||||
<hr></hr>
|
||||
<ToggleControl
|
||||
label={__('Search bar', 'tainacan')}
|
||||
help={ showSearchBar ? __('Toggle to show search bar on block', 'tainacan') : __('Do not show search bar', 'tainacan')}
|
||||
|
|
@ -467,6 +517,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
class="dynamic-items-collection-header">
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1rem' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
|
|
@ -475,7 +526,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
}>
|
||||
<h3>
|
||||
<h3 style={{ color: collectionTextColor ? collectionTextColor : '' }}>
|
||||
<span class="label">{ __('Collection', 'tainacan') }</span><br/>
|
||||
{ collection && collection.name ? collection.name : '' }
|
||||
</h3>
|
||||
|
|
@ -613,7 +664,9 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
maxItemsNumber,
|
||||
order,
|
||||
showSearchBar,
|
||||
showCollectionHeader
|
||||
showCollectionHeader,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor
|
||||
} = attributes;
|
||||
|
||||
return <div
|
||||
|
|
@ -625,6 +678,8 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
layout={ layout }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
|
|
|
|||
Loading…
Reference in New Issue