1 files changed, 52 insertions, 5 deletions

diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index dd8da96..eca895f 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -15,7 +15,7 @@ import { preloadImage } from '../../../util'
 import * as tileActions from '../../tile/tile.actions'
 
 const SELECT_TYPES = [
-  "image", "text"
+  "image", "text", "link"
 ].map(s => ({ name: s, label: s }))
 
 const ALIGNMENTS = [
@@ -32,6 +32,7 @@ const ALIGNMENTS = [
 const REQUIRED_KEYS = {
   image: ['url'],
   text: ['content'],
+  link: [],
 }
 
 const IMAGE_TILE_STYLES = [
@@ -66,6 +67,7 @@ const newImage = (data) => ({
   },
   type: 'image',
   target_page_id: null,
+  external_link_url: "",
   ...data,
 })
 
@@ -83,20 +85,33 @@ const newText = (data) => ({
   },
   type: 'text',
   target_page_id: null,
+  external_link_url: "",
   ...data,
 })
 
-const newPosition = () => ({
+const newLink = (data) => ({
+  settings: {
+    ...newPosition({ width: 100, height: 100, }),
+  },
+  type: 'link',
+  target_page_id: null,
+  external_link_url: "",
+  ...data,
+})
+
+const newPosition = (data) => ({
   x: 0, y: 0,
   width: 0, height: 0,
   rotation: 0, scale: 1,
   opacity: 1,
   align: "center_center",
+  ...data,
 })
 
 const TYPE_CONSTRUCTORS = {
   image: newImage,
   text: newText,
+  link: newLink,
 }
 
 class TileForm extends Component {
@@ -329,9 +344,11 @@ class TileForm extends Component {
             ? this.renderImageForm()
           : temporaryTile.type === 'text'
             ? this.renderTextForm()
+          : temporaryTile.type === 'link'
+            ? this.renderLinkForm()
           : ""}
 
-          {this.renderLinkForm()}
+          {this.renderHyperlinkForm()}
           {this.renderMiscForm()}
 
           <div className='row buttons'>
@@ -372,7 +389,7 @@ class TileForm extends Component {
     )
   }
 
-  renderLinkForm() {
+  renderHyperlinkForm() {
     const { temporaryTile } = this.props
     const { pageList } = this.state
     const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
@@ -439,7 +456,6 @@ class TileForm extends Component {
         </div>
       </div>
     )
-   
   }
 
   renderTextForm() {
@@ -525,6 +541,37 @@ class TileForm extends Component {
     )
   }
 
+  renderLinkForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <div className='row pair'>
+          <NumberInput
+            title="Width"
+            name="width"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('width')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+          <NumberInput
+            title="Height"
+            name="height"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('height')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
   renderMiscForm() {
     const { temporaryTile } = this.props
     return (