Skip to content

Commit

Permalink
Merge pull request #1819 from Codeinwp/feat/circle-and-progress-style…
Browse files Browse the repository at this point in the history 
…-tab

Revamp inspector for Progress & Circle
  • Loading branch information
@HardeepAsrani
HardeepAsrani authored Aug 31, 2023
2 parents 10389ec + b8bc734 commit f7394f2
Show file tree
Hide file tree
Showing 2 changed files with 329 additions and 220 deletions.
268 changes: 168 additions & 100 deletions src/blocks/blocks/circle-counter/inspector.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,35 @@
/**
* External dependencies
*/
import { clamp } from 'lodash';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

import { clamp } from 'lodash';

import {
__experimentalColorGradientControl as ColorGradientControl,
InspectorControls
InspectorControls,
PanelColorSettings
} from '@wordpress/block-editor';

import {
PanelBody,
RangeControl,
SelectControl
SelectControl,
TextControl,
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption
} from '@wordpress/components';
import { Fragment, useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import { InspectorHeader } from '../../components';
import { useTabSwitch } from '../../helpers/block-utility';

/**
*
Expand All @@ -25,6 +40,9 @@ const Inspector = ({
attributes,
setAttributes
}) => {

const [ tab, setTab ] = useTabSwitch( attributes.id, 'settings' );

const onPercentageChange = value => {
if ( value === undefined ) {
return;
Expand All @@ -44,102 +62,152 @@ const Inspector = ({

return (
<InspectorControls>
<PanelBody
title={ __( 'Settings', 'otter-blocks' ) }
>
<RangeControl
label={ __( 'Percentage', 'otter-blocks' ) }
help={ __( 'The value of the counter.', 'otter-blocks' ) }
value={ attributes.percentage }
onChange={ onPercentageChange }
min={ 0 }
max={ 100 }
/>

<RangeControl
label={ __( 'Duration', 'otter-blocks' ) }
help={ __( 'The duration of the animation.', 'otter-blocks' ) }
value={ attributes.duration }
onChange={ onDurationChange }
min={ 0 }
max={ 3 }
/>

<SelectControl
label={ __( 'Title Style', 'otter-blocks' ) }
value={ attributes.titleStyle }
options={ [
{ label: __( 'Default', 'otter-blocks' ), value: 'default' },
{ label: __( 'Hide', 'otter-blocks' ), value: 'hide' },
{ label: __( 'Bottom', 'otter-blocks' ), value: 'bottom' }
] }
onChange={ titleStyle => setAttributes({ titleStyle }) }
/>
</PanelBody>

<PanelBody
title={ __( 'Style', 'otter-blocks' ) }
initialOpen={ false }
>
<RangeControl
label={ __( 'Height', 'otter-blocks' ) }
help={ __( 'The height of the circle counter.', 'otter-blocks' ) }
value={ attributes.height }
onChange={ height => setAttributes({ height }) }
min={ 20 }
max={ 240 }
/>

<RangeControl
label={ __( 'Circle Thickness', 'otter-blocks' ) }
help={ __( 'Change the thickness (stroke width) of the circle.', 'otter-blocks' ) }
value={ attributes.strokeWidth }
onChange={ strokeWidth => setAttributes({ strokeWidth }) }
initialPosition={ 10 }
min={ 0 }
max={ 20 }
/>

<RangeControl
label={ __( 'Font Size Title', 'otter-blocks' ) }
help={ __( 'Change the font size of the title.', 'otter-blocks' ) }
value={ attributes.fontSizeTitle }
onChange={ fontSizeTitle => setAttributes({ fontSizeTitle }) }
initialPosition={ 37 }
min={ 0 }
max={ 100 }
/>

<RangeControl
label={ __( 'Font Size Percent', 'otter-blocks' ) }
help={ __( 'Change the font size of the inner text.', 'otter-blocks' ) }
value={ attributes.fontSizePercent }
onChange={ fontSizePercent => setAttributes({ fontSizePercent }) }
initialPosition={ 27 }
min={ 0 }
max={ 80 }
/>

{ ( 'hide' !== attributes.titleStyle ) && (
<ColorGradientControl
label={ __( 'Title Color', 'otter-blocks' ) }
colorValue={ attributes.titleColor }
onColorChange={ titleColor => setAttributes({ titleColor }) }
/>
) }

<ColorGradientControl
label={ __( 'Progress Color', 'otter-blocks' ) }
colorValue={ attributes.progressColor }
onColorChange={ progressColor => setAttributes({ progressColor }) }
/>

<ColorGradientControl
label={ __( 'Background Color', 'otter-blocks' ) }
colorValue={ attributes.backgroundColor }
onColorChange={ backgroundColor => setAttributes({ backgroundColor }) }
/>
</PanelBody>
<InspectorHeader
value={ tab }
options={[
{
label: __( 'Settings', 'otter-blocks' ),
value: 'settings'
},
{
label: __( 'Style', 'otter-blocks' ),
value: 'style'
}
]}
onChange={ setTab }
/>

<div>
{
'settings' === tab && (
<PanelBody
title={ __( 'Options', 'otter-blocks' ) }
>

<TextControl
label={ __( 'Title', 'otter-blocks' ) }
value={ attributes.title }
onChange={ title => setAttributes({ title }) }
/>

<RangeControl
label={ __( 'Percentage', 'otter-blocks' ) }
help={ __( 'The value of the counter.', 'otter-blocks' ) }
value={ attributes.percentage }
onChange={ onPercentageChange }
min={ 0 }
max={ 100 }
/>
</PanelBody>
)
}
{
'style' === tab && (
<Fragment>
<PanelBody
title={ __( 'Title', 'otter-blocks' ) }
initialOpen={ false }
>
<ToggleControl
label={ __( 'Display the Title', 'otter-blocks' ) }
checked={ 'hide' !== attributes.titleStyle }
onChange={ () => setAttributes({ titleStyle: 'hide' !== attributes.titleStyle ? 'hide' : 'default' }) }
/>

{ 'hide' !== attributes.titleStyle && (
<ToggleGroupControl
label={ __( 'Position', 'otter-blocks' ) }
value={ attributes.titleStyle }
onChange={ titleStyle => setAttributes({ titleStyle }) }
isBlock
>
<ToggleGroupControlOption value="default" label={ __( 'Top', 'otter-blocks' ) } />
<ToggleGroupControlOption value="bottom" label={ __( 'Bottom', 'otter-blocks' ) } />
</ToggleGroupControl>
)}
</PanelBody>
<PanelColorSettings
title={ __( 'Color', 'otter-blocks' ) }
colorSettings={ [
{
value: attributes.titleColor,
onChange: titleColor => setAttributes({ titleColor }),
label: __( 'Title Color', 'otter-blocks' )
},
{
value: attributes.progressColor,
onChange: progressColor => setAttributes({ progressColor }),
label: __( 'Progress Color', 'otter-blocks' )
},
{
value: attributes.backgroundColor,
onChange: backgroundColor => setAttributes({ backgroundColor }),
label: __( 'Background Color', 'otter-blocks' )
}
] }
/>
<PanelBody
title={ __( 'Dimensions and Motion', 'otter-blocks' ) }
initialOpen={ false }
>
<RangeControl
label={ __( 'Height', 'otter-blocks' ) }
help={ __( 'The height of the circle counter.', 'otter-blocks' ) }
value={ attributes.height }
onChange={ height => setAttributes({ height }) }
min={ 20 }
max={ 240 }
/>

<RangeControl
label={ __( 'Circle Thickness', 'otter-blocks' ) }
help={ __( 'Change the thickness (stroke width) of the circle.', 'otter-blocks' ) }
value={ attributes.strokeWidth }
onChange={ strokeWidth => setAttributes({ strokeWidth }) }
initialPosition={ 10 }
min={ 0 }
max={ 20 }
/>

<RangeControl
label={ __( 'Duration', 'otter-blocks' ) }
help={ __( 'The duration of the animation.', 'otter-blocks' ) }
value={ attributes.duration }
onChange={ onDurationChange }
min={ 0 }
max={ 3 }
/>
</PanelBody>
<PanelBody
title={ __( 'Typography', 'otter-blocks' ) }
initialOpen={ false }
>
<RangeControl
label={ __( 'Font Size Title', 'otter-blocks' ) }
help={ __( 'Change the font size of the title.', 'otter-blocks' ) }
value={ attributes.fontSizeTitle }
onChange={ fontSizeTitle => setAttributes({ fontSizeTitle }) }
initialPosition={ 37 }
min={ 0 }
max={ 100 }
/>

<RangeControl
label={ __( 'Font Size Percent', 'otter-blocks' ) }
help={ __( 'Change the font size of the inner text.', 'otter-blocks' ) }
value={ attributes.fontSizePercent }
onChange={ fontSizePercent => setAttributes({ fontSizePercent }) }
initialPosition={ 27 }
min={ 0 }
max={ 80 }
/>

</PanelBody>

</Fragment>
)
}
</div>
</InspectorControls>
);
};
Expand Down
Loading

0 comments on commit f7394f2

Please sign in to comment.