1 files changed, 166 insertions, 0 deletions
diff --git a/frontend/app/views/tile/forms/tile.form.element.text.js b/frontend/app/views/tile/forms/tile.form.element.text.js
new file mode 100644
index 0000000..425a605
--- /dev/null
+++ b/frontend/app/views/tile/forms/tile.form.element.text.js
@@ -0,0 +1,166 @@
+import React from 'react'
+
+import {
+  NumberInput, ColorInput, 
+  Select, TextArea, Checkbox
+} from 'app/common'
+
+import { TEXT_FONT_FAMILIES, TEXT_FONT_STYLES, MARQUEE_DIRECTIONS } from './tile.constants'
+
+export default function TileTextForm({ tile, errorFields, parent }) {
+  return (
+    <div>
+      <TextArea
+        title=""
+        name="content"
+        required
+        data={tile.settings}
+        error={errorFields.has('content')}
+        onChange={parent.handleSettingsChange}
+        autoComplete="off"
+      />
+      <div className='row font'>
+        <Select
+          title="Font"
+          name='font_family'
+          selected={tile.settings.font_family || 'sans-serif'}
+          options={TEXT_FONT_FAMILIES}
+          onChange={parent.handleSettingsSelect}
+        />
+        <NumberInput
+          title=''
+          name='font_size'
+          data={tile.settings}
+          min={1}
+          max={1200}
+          error={errorFields.has('font_size')}
+          onChange={parent.handleSettingsChange}
+          autoComplete="off"
+        />
+        <Select
+          name='font_style'
+          selected={tile.settings.font_style || 'normal'}
+          options={TEXT_FONT_STYLES}
+          title=''
+          onChange={parent.handleSettingsSelect}
+        />
+      </div>
+      <ColorInput
+        title='Text'
+        name='font_color'
+        data={tile.settings}
+        error={errorFields.has('font_color')}
+        onChange={parent.handleSettingsChange}
+        autoComplete="off"
+      />
+      <ColorInput
+        title='BG'
+        name='background_color'
+        data={tile.settings}
+        error={errorFields.has('background_color')}
+        onChange={parent.handleSettingsChange}
+        autoComplete="off"
+      />
+      <div className='row pair'>
+        <NumberInput
+          title="Width"
+          name="width"
+          data={tile.settings}
+          min={0}
+          max={1200}
+          error={errorFields.has('width')}
+          onChange={parent.handleSettingsChange}
+          autoComplete="off"
+        />
+        <NumberInput
+          title="Height"
+          name="height"
+          data={tile.settings}
+          min={0}
+          max={1200}
+          error={errorFields.has('height')}
+          onChange={parent.handleSettingsChange}
+          autoComplete="off"
+        />
+      </div>
+
+      <Checkbox
+        label="Marquee"
+        name="is_marquee"
+        className='short'
+        checked={tile.settings.is_marquee}
+        onChange={parent.handleSettingsSelect}
+        autoComplete="off"
+      />
+      {tile.settings.is_marquee && (
+        <div>
+          <div className='row single'>
+            <Select
+              title="Direction"
+              name='marquee_direction'
+              selected={tile.settings.marquee_direction || 'left'}
+              options={MARQUEE_DIRECTIONS}
+              onChange={parent.handleSettingsSelect}
+            />
+          </div>
+          <div className="row single_text">
+            <NumberInput
+              title="Speed"
+              name="marquee_speed"
+              data={tile.settings}
+              step={1}
+              min={0}
+              max={1000}
+              defaultValue={20}
+              onChange={parent.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
+          <div className="row single_text">
+            <NumberInput
+              title="Content width"
+              name="marquee_content_width"
+              data={tile.settings}
+              step={1}
+              min={0}
+              max={5000}
+              defaultValue={200}
+              onChange={parent.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
+          <div className="row single_text">
+            <NumberInput
+              title="Content height"
+              name="marquee_content_height"
+              data={tile.settings}
+              step={1}
+              min={0}
+              max={2000}
+              defaultValue={parseInt(tile.settings.font_size) + 10}
+              onChange={parent.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
+          <Checkbox
+            label="Marquee gradient"
+            name="marquee_gradient"
+            className='short'
+            checked={tile.settings.marquee_gradient}
+            onChange={parent.handleSettingsSelect}
+            autoComplete="off"
+          />
+          {tile.settings.marquee_gradient && (
+            <ColorInput
+              title='Color'
+              name='marquee_gradient_color'
+              data={tile.settings}
+              onChange={parent.handleSettingsChange}
+              autoComplete="off"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}