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

Adds color picker for the rest of css variables. #338.

This commit is contained in:
Mateus Machado Luna 2020-02-27 11:05:20 -03:00
parent 4038ca5bea
commit 1b03a39751
4 changed files with 282 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/tainacan-gutenberg-block-faceted-search.css
View File

@ -377,7 +377,8 @@
display: flex;
justify-content: space-evenly; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item {
flex: 1 0 158px;
background-color: var(--tainacan-item-background-color, white);
flex: 1 0 180px;
margin: 12px;
height: 78px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item:hover {
@ -396,14 +397,14 @@
background-color: var(--tainacan-heading-color, rgba(200, 200, 200, 0.35)); }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-thumb {
background-size: cover;
background-color: rgba(59, 159, 180, 0.3);
background-color: var(--tainacan-input-border-color, rgba(200, 200, 200, 0.1));
height: 58px;
width: 58px;
float: left; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-description {
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.15));
height: 0.18em;
width: 55%;
width: 60%;
border-radius: 2px;
margin: 8px 6px 2px 6px;
position: relative;

2
src/assets/css/tainacan-gutenberg-block-faceted-search.css.map
View File

File diff suppressed because one or more lines are too long

7
src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss
View File

@ -195,7 +195,7 @@
background-color: var(--tainacan-input-background-color, rgba(200,200,200, 0.3));
height: 0.8em;
width: 18%;
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
border-radius: 3px;
.fake-advanced-searchbar {
@ -245,6 +245,7 @@
justify-content: space-evenly;
}
.fake-item {
background-color: var(--tainacan-item-background-color, white);
flex: 1 0 180px;
margin: 12px;
height: 78px;
@ -270,7 +271,7 @@
}
.fake-item-thumb {
background-size: cover;
background-color: rgba(random(255), random(255), random(255), 0.3);
background-color: var(--tainacan-input-border-color, rgba(200,200,200, 0.1));
height: 58px;
width: 58px;
float: left;
@ -278,7 +279,7 @@
.fake-item-description {
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.15));
height: 0.18em;
width: 55%;
width: 60%;
border-radius: 2px;
margin: 8px 6px 2px 6px;
position: relative;

285
src/views/gutenberg-blocks/tainacan-facets/faceted-search/index.js
View File

@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { Button, ColorPicker, RangeControl, FontSizePicker, SelectControl, ToggleControl, Placeholder, PanelBody } = wp.components;
const { Button, ColorPicker, BaseControl, RangeControl, FontSizePicker, HorizontalRule, SelectControl, ToggleControl, Placeholder, PanelBody } = wp.components;
const { InspectorControls } = wp.editor;
@ -116,6 +116,54 @@ registerBlockType('tainacan/faceted-search', {
filtersAreaWidth: {
type: Number,
default: 20
},
inputColor: {
type: String,
default: '#1d1d1d'
},
inputBackgroundColor: {
type: String,
default: '#ffffff'
},
inputBorderColor: {
type: String,
default: '#dbdbdb'
},
labelColor: {
type: String,
default: '#454647'
},
infoColor: {
type: String,
default: '#555758'
},
headingColor: {
type: String,
default: '#000000'
},
skeletonColor: {
type: String,
default: '#eeeeee'
},
itemBackgroundColor: {
type: String,
default: '#ffffff'
},
itemHoverBackgroundColor: {
type: String,
default: '#f2f2f2'
},
itemHeadingHoverBackgroundColor: {
type: String,
default: '#dbdbdb'
},
primaryColor: {
type: String,
default: '#d9eced'
},
secondaryColor: {
type: String,
default: '#298596'
}
},
supports: {
@ -147,7 +195,19 @@ registerBlockType('tainacan/faceted-search', {
isTermModalOpen,
backgroundColor,
baseFontSize,
filtersAreaWidth
filtersAreaWidth,
inputColor,
inputBackgroundColor,
inputBorderColor,
labelColor,
infoColor,
headingColor,
skeletonColor,
itemBackgroundColor,
itemHoverBackgroundColor,
itemHeadingHoverBackgroundColor,
primaryColor,
secondaryColor
} = attributes;
const fontSizes = [
@ -340,13 +400,6 @@ registerBlockType('tainacan/faceted-search', {
title={__('Colors and Sizes', 'tainacan')}
initialOpen={ false }
>
<ColorPicker
color={ backgroundColor }
onChangeComplete={ (colorValue ) => {
backgroundColor = colorValue.hex;
setAttributes({ backgroundColor: backgroundColor });
}}
/>
<FontSizePicker
fontSizes={ fontSizes }
value={ baseFontSize }
@ -362,6 +415,177 @@ registerBlockType('tainacan/faceted-search', {
min={ 5 }
max={ 40 }
/>
<HorizontalRule />
<BaseControl
id="backgroundColorPicker"
label={ __('Background color', 'tainacan')}
help={ __('The background color of the entire items list', 'tainacan') }>
<ColorPicker
color={ backgroundColor }
onChangeComplete={ (colorValue ) => {
backgroundColor = colorValue.hex;
setAttributes({ backgroundColor: backgroundColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="secondaryColorPicker"
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') }>
<ColorPicker
color={ secondaryColor }
onChangeComplete={ (colorValue ) => {
secondaryColor = colorValue.hex;
setAttributes({ secondaryColor: secondaryColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="primaryColorPicker"
label={ __('Tooltips background color', 'tainacan')}
help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }>
<ColorPicker
color={ primaryColor }
onChangeComplete={ (colorValue ) => {
primaryColor = colorValue.hex;
setAttributes({ primaryColor: primaryColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="inputBackgroundColorPicker"
label={ __('Input Background color', 'tainacan')}
help={ __('The background color for input fields', 'tainacan') }>
<ColorPicker
color={ inputBackgroundColor }
onChangeComplete={ (colorValue ) => {
inputBackgroundColor = colorValue.hex;
setAttributes({ inputBackgroundColor: inputBackgroundColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="inputColorPicker"
label={ __('Input Text color', 'tainacan')}
help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }>
<ColorPicker
color={ inputColor }
onChangeComplete={ (colorValue ) => {
inputColor = colorValue.hex;
setAttributes({ inputColor: inputColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="inputBorderColorPicker"
label={ __('Input Border color', 'tainacan')}
help={ __('The border color for input fields', 'tainacan') }>
<ColorPicker
color={ inputBorderColor }
onChangeComplete={ (colorValue ) => {
inputBorderColor = colorValue.hex;
setAttributes({ inputBorderColor: inputBorderColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="labelColorPicker"
label={ __('Label Text color', 'tainacan')}
help={ __('The text color for field labels', 'tainacan') }>
<ColorPicker
color={ labelColor }
onChangeComplete={ (colorValue ) => {
labelColor = colorValue.hex;
setAttributes({ labelColor: labelColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="headingColorPicker"
label={ __('Headings Text color', 'tainacan')}
help={ __('The text color for headings such as items title and filters menu header', 'tainacan') }>
<ColorPicker
color={ headingColor }
onChangeComplete={ (colorValue ) => {
headingColor = colorValue.hex;
setAttributes({ headingColor: headingColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="infoColorPicker"
label={ __('General Info Text color', 'tainacan')}
help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }>
<ColorPicker
color={ infoColor }
onChangeComplete={ (colorValue ) => {
infoColor = colorValue.hex;
setAttributes({ infoColor: infoColor });
}}
disableAlpha
/>
</BaseControl>
<BaseControl
id="itemBackgroundColorPicker"
label={ __('Item Background color', 'tainacan')}
help={ __('The background color for an item on the list', 'tainacan') }>
<ColorPicker
color={ itemBackgroundColor }
onChangeComplete={ (colorValue ) => {
itemBackgroundColor = colorValue.hex;
setAttributes({ itemBackgroundColor: itemBackgroundColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="itemHoverBackgroundColorPicker"
label={ __('Item Hover Background color', 'tainacan')}
help={ __('The background color for an item on the list, when hovered', 'tainacan') }>
<ColorPicker
color={ itemHoverBackgroundColor }
onChangeComplete={ (colorValue ) => {
itemHoverBackgroundColor = colorValue.hex;
skeletonColor = colorValue.hex;
setAttributes({
itemHoverBackgroundColor: itemHoverBackgroundColor,
skeletonColor: skeletonColor
});
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="itemHeadingHoverBackgroundColorPicker"
label={ __('Item Heading Hover Background color', 'tainacan')}
help={ __('The background color for the item heading (where the title is), when hovered', 'tainacan') }>
<ColorPicker
color={ itemHeadingHoverBackgroundColor }
onChangeComplete={ (colorValue ) => {
itemHeadingHoverBackgroundColor = colorValue.hex;
setAttributes({ itemHeadingHoverBackgroundColor: itemHeadingHoverBackgroundColor });
}}
disableAlpha
/>
</BaseControl>
</PanelBody>
</InspectorControls>
@ -450,7 +674,20 @@ registerBlockType('tainacan/faceted-search', {
</div>
<div
style={{
'--tainacan-background-color': backgroundColor
'--tainacan-background-color': backgroundColor,
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,
'--tainacan-label-color': labelColor,
'--tainacan-info-color': infoColor,
'--tainacan-heading-color': headingColor,
'--tainacan-skeleton-color': skeletonColor,
'--tainacan-item-background-color': itemBackgroundColor,
'--tainacan-item-hover-background-color': itemHoverBackgroundColor,
'--tainacan-item-heading-hover-background-color': itemHeadingHoverBackgroundColor,
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
class="items-list-placeholder">
<div class="search-control">
@ -603,14 +840,38 @@ registerBlockType('tainacan/faceted-search', {
listType,
backgroundColor,
baseFontSize,
filtersAreaWidth
filtersAreaWidth,
inputColor,
inputBackgroundColor,
inputBorderColor,
labelColor,
infoColor,
headingColor,
skeletonColor,
itemBackgroundColor,
itemHoverBackgroundColor,
itemHeadingHoverBackgroundColor,
primaryColor,
secondaryColor
} = attributes;
return <div
style={{
'font-size': baseFontSize + 'px',
'--tainacan-background-color': backgroundColor,
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%'
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,
'--tainacan-label-color': labelColor,
'--tainacan-info-color': infoColor,
'--tainacan-heading-color': headingColor,
'--tainacan-skeleton-color': skeletonColor,
'--tainacan-item-background-color': itemBackgroundColor,
'--tainacan-item-hover-background-color': itemHoverBackgroundColor,
'--tainacan-item-heading-hover-background-color': itemHeadingHoverBackgroundColor,
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
className={ className }>
<main