2 files changed, 59 insertions, 31 deletions

diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index eca895f..6011b0a 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -47,6 +47,13 @@ const TEXT_FONT_STYLES = [
   'normal', 'bold', 'italic', 'bold-italic',
 ].map(style => ({ name: style, label: style }))
 
+const CURSORS = [
+  { name: 'hand_up', label: 'Up', },
+  { name: 'hand_down', label: 'Down', },
+  { name: 'hand_left', label: 'Left', },
+  { name: 'hand_right', label: 'Right', },
+]
+
 const NO_LINK = 0
 const EXTERNAL_LINK = -1
 const PAGE_LIST_TOP_OPTIONS = [
@@ -64,10 +71,11 @@ const newImage = (data) => ({
     is_tiled: false,
     tile_style: 'tile',
     url: "",
+    external_link_url: "",
+    cursor: 'hand_up',
   },
   type: 'image',
   target_page_id: null,
-  external_link_url: "",
   ...data,
 })
 
@@ -82,20 +90,22 @@ const newText = (data) => ({
     background_color: 'transparent',
     width: 0,
     height: 0,
+    external_link_url: "",
+    cursor: 'hand_up',
   },
   type: 'text',
   target_page_id: null,
-  external_link_url: "",
   ...data,
 })
 
 const newLink = (data) => ({
   settings: {
     ...newPosition({ width: 100, height: 100, }),
+    external_link_url: "",
+    cursor: 'hand_up',
   },
   type: 'link',
   target_page_id: null,
-  external_link_url: "",
   ...data,
 })
 
@@ -389,33 +399,6 @@ class TileForm extends Component {
     )
   }
 
-  renderHyperlinkForm() {
-    const { temporaryTile } = this.props
-    const { pageList } = this.state
-    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
-    return (
-      <div className={isExternalLink ? 'row selects' : 'row'}>
-        <Select
-          title=''
-          name='target_page_id'
-          selected={temporaryTile.target_page_id || NO_LINK}
-          options={pageList}
-          onChange={this.handleSelect.bind(this)}
-        />
-        {isExternalLink &&
-          <TextInput
-            title=""
-            placeholder='http://'
-            name="external_link_url"
-            data={temporaryTile.settings}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
-          />
-        }
-      </div>
-    )
-  }
-
   renderImageForm() {
     // const { isNew } = this.props
     const { temporaryTile } = this.props
@@ -572,6 +555,45 @@ class TileForm extends Component {
     )
   }
 
+  renderHyperlinkForm() {
+    const { temporaryTile } = this.props
+    const { pageList } = this.state
+    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
+    return (
+      <div>
+        <div className={'row selects'}>
+          <Select
+            title=''
+            name='target_page_id'
+            selected={temporaryTile.target_page_id || NO_LINK}
+            options={pageList}
+            onChange={this.handleSelect.bind(this)}
+          />
+          <Select
+            title=''
+            name='cursor'
+            selected={temporaryTile.settings.cursor}
+            options={CURSORS}
+            defaultOption="Cursor"
+            onChange={this.handleSettingsSelect.bind(this)}
+          />
+        </div>
+        <div>
+          {isExternalLink &&
+            <TextInput
+              title=""
+              placeholder='http://'
+              name="external_link_url"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange.bind(this)}
+              autoComplete="off"
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
   renderMiscForm() {
     const { temporaryTile } = this.props
     return (
diff --git a/frontend/views/page/components/tile.handle.js b/frontend/views/page/components/tile.handle.js
index b997d13..b6aec82 100644
--- a/frontend/views/page/components/tile.handle.js
+++ b/frontend/views/page/components/tile.handle.js
@@ -9,7 +9,7 @@ const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
   }
   // console.log(generateTransform(tile))
   let content;
-  let className = 'tile ' + tile.type
+  let className = ['tile', tile.type, tile.settings.cursor || 'hand_up'].join(' ')
   // console.log(tile.settings)
   switch (tile.type) {
     case 'image':
@@ -56,6 +56,12 @@ const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
       style.backgroundColor = tile.settings.background_color || 'transparent'
       style.color = tile.settings.font_color || '#dddddd!important'
       break
+    case 'link':
+      content = ""
+      className += ' ' + tile.settings.align
+      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+      break
   }
   return (
     <div