-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
83 changed files
with
10,936 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.gutengeek-alignment-control{ | ||
> .components-base-control__field { | ||
> .components-base-control__label{ | ||
width: 100%; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
import Devices from '../Devices'; | ||
import classnames from 'classnames'; | ||
import './editor.scss'; | ||
|
||
const { __ } = wp.i18n; | ||
const { Component } = wp.element; | ||
const { ButtonGroup, Button, Tooltip } = wp.components; | ||
|
||
const Left = props => { | ||
return ( | ||
<svg viewBox="0 0 28 28"> | ||
<g> | ||
<path d="M5 13h2v2H5zM5 21h2v2H5zM5 17h2v2H5zM5 9h2v2H5zM5 5h2v2H5z" /> | ||
<path d="M7.339 13.25a1 1 0 0 0 0 1.501l4.642 4.09a.6.6 0 0 0 1.007-.442V16h9a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-9V9.602a.601.601 0 0 0-1.002-.446L7.339 13.25z" /> | ||
</g> | ||
</svg> | ||
) | ||
} | ||
|
||
const Right = props => { | ||
return ( | ||
<svg viewBox="0 0 28 28"> | ||
<g> | ||
<path d="M21 21h2v2h-2zM21 17h2v2h-2zM21 9h2v2h-2zM21 5h2v2h-2zM21 13h2v2h-2z" /> | ||
<path d="M20.649 13.249l-4.642-4.09A.6.6 0 0 0 15 9.602V12H6a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h9v2.398a.601.601 0 0 0 1.002.446l4.647-4.094a1 1 0 0 0 0-1.501z" /> | ||
</g> | ||
</svg> | ||
) | ||
} | ||
|
||
const Center = props => { | ||
return ( | ||
<svg viewBox="0 0 28 28"> | ||
<g> | ||
<path d="M5 13h2v2H5zM5 9h2v2H5zM5 17h2v2H5zM5 5h2v2H5zM5 21h2v2H5zM21 9h2v2h-2zM21 5h2v2h-2zM21 13h2v2h-2zM15 8h-2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zM21 17h2v2h-2zM21 21h2v2h-2z" /> | ||
</g> | ||
</svg> | ||
) | ||
} | ||
|
||
class Alignment extends Component { | ||
|
||
constructor( props ) { | ||
super( props ); | ||
|
||
this.state = { | ||
options: [ | ||
{ label: <Left />, value: 'left', text: __( 'Left' ) }, | ||
{ label: <Center />, value: 'center', text: __( 'Center' ) }, | ||
{ label: <Right />, value: 'right', text: __( 'Right' ) }, | ||
], | ||
}; | ||
} | ||
|
||
changeValue( val ) { | ||
const { value, device, onChange } = this.props; | ||
let newValue = { ...value }; | ||
newValue[device] = val; | ||
onChange( newValue ); | ||
} | ||
|
||
render() { | ||
const { value, label, options, device, onChangeDevice, className, toggle } = this.props; | ||
|
||
let selectionOptions = options; | ||
if (options === undefined) { | ||
selectionOptions = this.state.options; | ||
} | ||
|
||
const alignment = value !== undefined && value[device] !== undefined ? value[device] : ''; | ||
return ( | ||
<Devices label={ label } className={ classnames( 'gutengeek-mb-10', 'gutengeek-alignment-control', 'gutengeek-w-100', className || '' ) } | ||
value={ device } | ||
onClick={ ( value ) => onChangeDevice( value ) }> | ||
{ | ||
( deviceMode ) => { | ||
return ( | ||
<div className="gutengeek-field gutengeek-flex gutengeek-field-alignments gutengeek-align-center gutengeek-mt-10"> | ||
<ButtonGroup className={ classnames( 'gutengeek-field-button-list', 'gutengeek-no-border', 'gutengeek-w-100' ) }> | ||
{ selectionOptions.map( ( data, index ) => { | ||
return ( | ||
<Tooltip text={ data.text } key={index}> | ||
<Button | ||
className={ classnames( 'gutengeek-button-field', data.value === alignment ? 'active' : '' ) } | ||
onClick={ () => this.changeValue( toggle && data.value === alignment ? '' : data.value ) } | ||
isSmall | ||
isPrimary={ data.value === alignment }> | ||
{ data.label } | ||
</Button> | ||
</Tooltip> | ||
); | ||
} ) } | ||
</ButtonGroup> | ||
</div> | ||
); | ||
} | ||
} | ||
</Devices> | ||
); | ||
} | ||
|
||
} | ||
|
||
Alignment.defaultProps = { | ||
label: '', | ||
value: { | ||
desktop: '', | ||
tablet: '', | ||
mobile: '', | ||
}, | ||
onChangeDevice: () => { | ||
console.log( __( 'Alignment device was changed' ) ); | ||
}, | ||
onChange: () => { | ||
console.log( __( 'Alignment value was changed' ) ); | ||
}, | ||
device: 'desktop', | ||
toggle: true, | ||
}; | ||
|
||
export default Alignment; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
.gutengeek-background-control{ | ||
> .components-base-control{ | ||
margin-bottom: 0px; | ||
} | ||
.components-base-control__field{ | ||
input{ | ||
max-width: 100%; | ||
} | ||
|
||
.components-base-control__label{ | ||
width: 100%; | ||
} | ||
} | ||
|
||
.gutengeek-background-control-wrap{ | ||
.gutengeek-button-clear{ | ||
svg{ | ||
width: 10px; | ||
height: 10px; | ||
} | ||
} | ||
} | ||
|
||
> .gutengeek-device-tabs-wrap{ | ||
> .components-base-control__field { | ||
> .components-base-control__field{ | ||
width: 100%; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
export const ColorIcon = <svg width="15" height="15" viewBox="0 0 15 18" xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M.964 15.047c0 1.091.835 1.983 1.856 1.983 1.021 0 1.856-.892 1.856-1.983 0-1.091-1.856-3.966-1.856-3.966s-1.856 2.875-1.856 3.966zm14.909-7.84l-4.362-4.371c-.291-.292-.639-.489-1.009-.593l.683-.683c.234-.235.233-.611.001-.843-.234-.234-.609-.231-.842.002l-2.831 2.836-.03.033-3.613 3.619c-.906.908-.905 2.378 0 3.284l4.362 4.371c.906.908 2.373.907 3.278 0l4.362-4.371c.906-.908.905-2.378 0-3.284zm-11.494 1.664c0-.289.111-.579.332-.801l4.362-4.37c.442-.443 1.156-.443 1.599 0l4.362 4.37c.221.222.332.511.332.801h-10.986z" | ||
/> | ||
</svg>; | ||
|
||
export const GradientIcon = <svg width="15" height="15" viewBox="0 0 18 15" xmlns="http://www.w3.org/2000/svg"> | ||
<g transform="translate(.735 .263)" fill="none"> | ||
<rect stroke="currentColor" x=".5" y=".5" width="16.072" height="13.474" rx="1"/> | ||
<path fill="currentColor" d="M.836.763l15.759 13.158h-15.759z"/> | ||
</g> | ||
</svg>; |
Oops, something went wrong.