1 files changed, 80 insertions, 0 deletions
diff --git a/frontend/app/views/tile/forms/tile.form.element.gradient.js b/frontend/app/views/tile/forms/tile.form.element.gradient.js
new file mode 100644
index 0000000..3e35cc0
--- /dev/null
+++ b/frontend/app/views/tile/forms/tile.form.element.gradient.js
@@ -0,0 +1,80 @@
+import React from 'react'
+
+import { NumberInput, ColorInput, Slider } from 'app/common'
+
+export default function TileGradientForm({ tile, parent }) {
+  return (
+    <div>
+      <ColorInput
+        title='From'
+        name='from_color'
+        data={tile.settings}
+        onChange={parent.handleSettingsChange}
+        autoComplete="off"
+      />
+      <Slider
+        title='Opacity'
+        name='from_opacity'
+        value={tile.settings.from_opacity}
+        onChange={parent.handleSettingsSelect}
+        min={0.0}
+        max={1.0}
+        step={0.01}
+      />
+      <ColorInput
+        title='To'
+        name='to_color'
+        data={tile.settings}
+        onChange={parent.handleSettingsChange}
+        autoComplete="off"
+      />
+      <Slider
+        title='Opacity'
+        name='to_opacity'
+        value={tile.settings.to_opacity}
+        onChange={parent.handleSettingsSelect}
+        min={0.0}
+        max={1.0}
+        step={0.01}
+      />
+      <Slider
+        title='Angle'
+        name='angle'
+        value={tile.settings.angle}
+        onChange={parent.handleSettingsSelect}
+        min={0.0}
+        max={360.0}
+        step={0.1}
+      />
+      <Slider
+        title='Stop'
+        name='stop'
+        value={tile.settings.stop}
+        onChange={parent.handleSettingsSelect}
+        min={0.0}
+        max={100.0}
+        step={0.1}
+      />
+      <div className='row pair'>
+        <NumberInput
+          title="Width"
+          name="width"
+          data={tile.settings}
+          min={0}
+          max={2400}
+          onChange={parent.handleSettingsChange}
+          autoComplete="off"
+        />
+        <NumberInput
+          title="Height"
+          name="height"
+          data={tile.settings}
+          min={0}
+          max={2400}
+          onChange={parent.handleSettingsChange}
+          autoComplete="off"
+        />
+      </div>
+    </div>
+  )
+}