From 63904f39ee254c9014df2c158bdae39d41d8cf74 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 10 Jul 2020 16:40:02 +0200
Subject: cursors

---
 frontend/common/slider.component.js           |   7 ++-
 frontend/views/page/components/tile.form.js   |  82 ++++++++++++++++----------
 frontend/views/page/components/tile.handle.js |   8 ++-
 frontend/views/page/page.css                  |  34 ++++++++++-
 static/img/hand_down.png                      | Bin 0 -> 2646 bytes
 static/img/hand_left.png                      | Bin 0 -> 2587 bytes
 static/img/hand_right.png                     | Bin 0 -> 2580 bytes
 static/img/hand_up.png                        | Bin 0 -> 2608 bytes
 8 files changed, 98 insertions(+), 33 deletions(-)
 create mode 100644 static/img/hand_down.png
 create mode 100644 static/img/hand_left.png
 create mode 100644 static/img/hand_right.png
 create mode 100644 static/img/hand_up.png

diff --git a/frontend/common/slider.component.js b/frontend/common/slider.component.js
index 7e42b4d..9d96b1e 100644
--- a/frontend/common/slider.component.js
+++ b/frontend/common/slider.component.js
@@ -13,6 +13,7 @@ export default class Slider extends Component {
     this.timeout = 0
     this.handleInput = this.handleInput.bind(this)
     this.handleRange = this.handleRange.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
     this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME)
   }
   componentDidMount() {
@@ -48,9 +49,12 @@ export default class Slider extends Component {
     }
     if (this.state.value !== new_value) {
       this.setState({ value: new_value })
-      this.props.onChange(new_value)
+      this.props.onChange(this.props.name, new_value)
     }
   }
+  handleKeyDown(e) {
+    console.log(e.keyCode)
+  }
   handleRange(e){
     let { value: new_value } = e.target
     if (this.props.type === 'int') {
@@ -98,6 +102,7 @@ export default class Slider extends Component {
           max={max}
           step={step}
           value={text_value}
+          onKeyDown={this.handleKeyDown}
           onChange={this.handleInput}
           onBlur={this.handleInput}
         />
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
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 0005031..8e7634d 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -7,6 +7,7 @@
   height: 100%;
 }
 
+/* tiles */
 
 .tile {
   position: absolute;
@@ -25,6 +26,14 @@
   user-select: none;
   cursor: arrow;
 }
+.tile.link {
+  display: block;
+  cursor: pointer;
+  border: 1px solid #31f;
+  background-color: rgba(48,16,255,0.1);
+}
+
+/* tile orientations */
 
 .tile.top_left { top: 0; left: 0; }
 .tile.center_left { top: 50%; left: 0; }
@@ -36,6 +45,8 @@
 .tile.center_right { top: 50%; right: 0; }
 .tile.bottom_right { bottom: 0; right: 0; }
 
+/* sortable tile list */
+
 .tileList .row {
   justify-content: flex-start;
   align-items: center;
@@ -76,6 +87,8 @@
   opacity: 0.6;
 }
 
+/* tile form */
+
 .row.imageUrl label {
   width: 13rem;
 }
@@ -101,6 +114,8 @@
   margin-right: 0;
 }
 
+/* tile font form */
+
 .box .font {
   justify-content: space-between;
 }
@@ -127,6 +142,8 @@
 .box form .font label {
 }
 
+/* tile color form */
+
 .box form label.color span {
   min-width: 4rem;
   width: 4rem;
@@ -143,4 +160,19 @@
 .box label.color input[type='text'] {
   width: 6rem;
   max-width: 6rem;
-}
\ No newline at end of file
+}
+
+/* cursors */
+
+.tile.hand_up {
+  cursor: url(/static/img/hand_up.png) 40 10, pointer;
+}
+.tile.hand_right {
+  cursor: url(/static/img/hand_right.png) 90 40, pointer;
+}
+.tile.hand_down {
+  cursor: url(/static/img/hand_down.png) 10 60, pointer;
+}
+.tile.hand_left {
+  cursor: url(/static/img/hand_left.png) 60 90, pointer;
+}
diff --git a/static/img/hand_down.png b/static/img/hand_down.png
new file mode 100644
index 0000000..9676255
Binary files /dev/null and b/static/img/hand_down.png differ
diff --git a/static/img/hand_left.png b/static/img/hand_left.png
new file mode 100644
index 0000000..956ea83
Binary files /dev/null and b/static/img/hand_left.png differ
diff --git a/static/img/hand_right.png b/static/img/hand_right.png
new file mode 100644
index 0000000..e30ed97
Binary files /dev/null and b/static/img/hand_right.png differ
diff --git a/static/img/hand_up.png b/static/img/hand_up.png
new file mode 100644
index 0000000..d9d6b2e
Binary files /dev/null and b/static/img/hand_up.png differ
-- 
cgit v1.2.3-70-g09d2