--amend

gutengeek · Jun 30, 2020 · 0aca137 · 0aca137
1 parent c9dea39
commit 0aca137
Show file tree

Hide file tree

Showing 83 changed files with 10,936 additions and 0 deletions.
diff --git a/dev/components/Alignments/editor.scss b/dev/components/Alignments/editor.scss
@@ -0,0 +1,7 @@
+.gutengeek-alignment-control{
+	> .components-base-control__field {
+		> .components-base-control__label{
+			width: 100%;
+		}
+	}
+}
diff --git a/dev/components/Alignments/index.js b/dev/components/Alignments/index.js
@@ -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;
diff --git a/dev/components/Background/editor.scss b/dev/components/Background/editor.scss
@@ -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%;
+			}
+		}
+	}
+}
diff --git a/dev/components/Background/icon.js b/dev/components/Background/icon.js
@@ -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>;