Blur range

src/components/blur-range/index.js

@@ -0,0 +1,37 @@
+import { h, Component } from 'preact';
+
+export default class BlurRange extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            blurValue: 0
+        }
+    }
+
+    onRangeChange(value) {
+        this.setState(prevState => {
+            return {
+                ...prevState,
+                blurValue: value
+            }
+        });
+        this.props.onChange(value);
+    }
+
+    render() {
+        return (
+            <div>
+                <p class="controlPanelTitle">Blur</p>
+                <input
+                    type="range"
+                    min="0"
+                    max="20"
+                    step="1"
+                    value={this.state.blurValue}
+                    onChange={(e) => this.onRangeChange(e.srcElement.value)}
+                />
+            </div>
+        )
+    }
+}

src/components/generator-container/index.js

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import ImagePreview from '../../components/image-preview';
 import GradientPicker from '../../components/gradient-picker';
+import BlurRange from '../../components/blur-range';
 import style from './style';
 
 export default class GeneratorContainer extends Component {
@@ -9,7 +10,8 @@ export default class GeneratorContainer extends Component {
         super();
         this.state = {
             imageUrl: '',
-            gradientUrl: ''
+            gradientUrl: '',
+            blurValue: 0
         };
     }
 
@@ -31,6 +33,15 @@ export default class GeneratorContainer extends Component {
         });
     }
 
+    onBlurChange(blurValue) {
+        this.setState(prevState => {
+            return {
+                ...prevState,
+                blurValue: blurValue
+            }
+        });
+    }
+
     render() {
 
         return (
@@ -43,13 +54,14 @@ export default class GeneratorContainer extends Component {
                         value={this.state.imageUrl}
                         onChange={e => this.updateImageUrl(e)}
                     />
-                    <div style="position: relative">
-                        <ImagePreview imageUrl={this.state.imageUrl} />
+                    <div class={style.imagePreviewContainer}>
+                        <ImagePreview imageUrl={this.state.imageUrl} blurValue={this.state.blurValue} />
                         <img src={this.state.gradientUrl} style="position: absolute; top: 0" />
                     </div>
                 </div>
                 <div class={style.controlPanel}>
                     <GradientPicker onChange={this.onGradientChange.bind(this)} />
+                    <BlurRange onChange={this.onBlurChange.bind(this)} />
                 </div>
             </div>
         )

src/components/generator-container/style.css

@@ -15,4 +15,9 @@
     width: 100%;
     margin-top: 10px;
     padding: 0 5px;
+}
+
+.imagePreviewContainer {
+    position: relative;
+    overflow: hidden;
 }

src/components/gradient-picker/index.js

@@ -3,7 +3,8 @@ import style from './style';
 
 export default (props) => {
     return (
-        <div>
+        <div class={style.gradientPickerContainer}>
+            <p class="controlPanelTitle">Gradient</p>
             <select class={style.gradientSelect} onChange={(e) => props.onChange(e.srcElement.value)}>
                 <option value="">Pick gradient style</option>
                 <option value="/assets/gradients/1.png">Style 1</option>

src/components/gradient-picker/style.css

@@ -1,3 +1,7 @@
 .gradientSelect {
     width: 100%;
+}
+
+.gradientPickerContainer {
+    margin-bottom: 20px;
 }

src/components/image-preview/index.js

@@ -1,5 +1,4 @@
 import { h, Component } from 'preact';
-import appConfig from '../../common/appConfig';
 
 export default class GeneratorContainer extends Component {
 
@@ -15,7 +14,8 @@ export default class GeneratorContainer extends Component {
 
     render(props, state) {
         const previewStyle = Object.assign({}, this.imgPreviewStyle, {
-            'background-image': `url('${this.props.imageUrl}')`
+            'background-image': `url('${this.props.imageUrl}')`,
+            'filter': `blur(${this.props.blurValue}px)`
         });
 
         return (

src/style/index.css

@@ -17,4 +17,10 @@ html, body {
 
 #app {
 	height: 100%;
+}
+
+.controlPanelTitle {
+	font-size: 10px;
+	margin: 0 0 10px 0;
+	padding: 0;
 }