From 782ecf85499fcbc44d55798c756f512cd8d4470e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 19 Apr 2021 14:32:55 +0200
Subject: show group on hover

---
 frontend/app/views/tile/components/tile.form.js    |  2 +-
 .../app/views/tile/forms/tile.form.hyperlink.js    |  6 ------
 frontend/app/views/tile/forms/tile.form.misc.js    | 25 ++++++++++++++++++++--
 frontend/app/views/tile/handles/tile.gradient.js   |  3 ++-
 frontend/app/views/tile/handles/tile.image.js      |  3 ++-
 frontend/app/views/tile/handles/tile.link.js       |  3 ++-
 frontend/app/views/tile/handles/tile.text.js       |  3 ++-
 frontend/app/views/tile/handles/tile.video.js      |  3 ++-
 8 files changed, 34 insertions(+), 14 deletions(-)

(limited to 'frontend/app/views/tile')

diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 2e6dfef..a3c3131 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -338,7 +338,7 @@ class TileForm extends Component {
             pageList={this.state.pageList} popupList={this.state.popupList}
             cursors={this.state.cursors}
           />
-          <TileMiscForm tile={temporaryTile} errorFields={errorFields} parent={this} />
+          <TileMiscForm tile={temporaryTile} errorFields={errorFields} parent={this} popupList={this.state.popupList} />
           <TileSoundForm tile={temporaryTile} errorFields={errorFields} parent={this} />
 
           <div className='row buttons'>
diff --git a/frontend/app/views/tile/forms/tile.form.hyperlink.js b/frontend/app/views/tile/forms/tile.form.hyperlink.js
index f36077d..1d7f22d 100644
--- a/frontend/app/views/tile/forms/tile.form.hyperlink.js
+++ b/frontend/app/views/tile/forms/tile.form.hyperlink.js
@@ -16,15 +16,9 @@ import { toggleCursorList } from 'app/views/page/page.actions'
 
 export default function TileHyperlinkForm({ tile, pageList, popupList, cursors, parent }) {
   const isExternalLink = tile.target_page_id === EXTERNAL_LINK
-  // const isPopupLink = (
-  //   tile.target_page_id === OPEN_POPUP_LINK ||
-  //   tile.target_page_id === CLOSE_POPUP_LINK
-  // )
   let cursor
-  // console.log(tile.settings.cursor, tile.settings.custom_cursor_id)
   if (tile.settings.cursor === 'custom' && tile.settings.custom_cursor_id) {
     cursor = cursors[tile.settings.custom_cursor_id]
-    // console.log(cursor)
   }
   return (
     <div>
diff --git a/frontend/app/views/tile/forms/tile.form.misc.js b/frontend/app/views/tile/forms/tile.form.misc.js
index fd72ad3..68b659c 100644
--- a/frontend/app/views/tile/forms/tile.form.misc.js
+++ b/frontend/app/views/tile/forms/tile.form.misc.js
@@ -5,9 +5,9 @@ import {
   Select, Checkbox, Slider,
 } from 'app/common'
 
-import { UNITS } from './tile.constants'
+import { UNITS, NO_POPUP } from './tile.constants'
 
-export default function TileMiscForm({ tile, parent }) {
+export default function TileMiscForm({ tile, parent, popupList }) {
   return (
     <div>
       <div className='row single'>
@@ -70,6 +70,7 @@ export default function TileMiscForm({ tile, parent }) {
           <TextInput
             title="Popup group"
             name="popup_group"
+            placeholder="Enter group name"
             data={tile.settings}
             onChange={parent.handleSettingsChange}
             autoComplete="off"
@@ -89,12 +90,32 @@ export default function TileMiscForm({ tile, parent }) {
           <TextInput
             title="Appear after"
             name="appear_after"
+            placeholder="0:00"
             data={tile.settings}
             onChange={parent.handleSettingsChange}
             autoComplete="off"
           />
         </div>
       )}
+      <Checkbox
+        label="Show popup on hover"
+        name="show_popup_on_hover"
+        className='short'
+        checked={tile.settings.show_popup_on_hover}
+        onChange={parent.handleSettingsSelect}
+        autoComplete="off"
+      />
+      {tile.settings.show_popup_on_hover && (
+        <div className='row single'>
+          <Select
+            title="Popup"
+            name='on_hover_popup'
+            selected={tile.settings.on_hover_popup || NO_POPUP}
+            options={popupList}
+            onChange={parent.handleSettingsSelect}
+          />
+        </div>
+      )}
       <Checkbox
         label="Hide on click"
         name="hide_on_click"
diff --git a/frontend/app/views/tile/handles/tile.gradient.js b/frontend/app/views/tile/handles/tile.gradient.js
index 8d7091f..00cbed6 100644
--- a/frontend/app/views/tile/handles/tile.gradient.js
+++ b/frontend/app/views/tile/handles/tile.gradient.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils'
 
-export default function TileGradient({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileGradient({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
   // console.log(tile)
   const style = {
     transform: generateTransform(tile, box, bounds, videoBounds),
@@ -29,6 +29,7 @@ export default function TileGradient({ tile, box, bounds, cursors, videoBounds,
       onMouseDown={onMouseDown}
       onDoubleClick={onDoubleClick}
       onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       style={style}
     />
   )
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index 78b492e..c020b08 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { generateTransform, pickCursor } from 'app/views/tile/tile.utils'
 
-export default function TileImage({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileImage({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
   // console.log(tile)
   const style = {
     transform: generateTransform(tile, box, bounds, videoBounds),
@@ -52,6 +52,7 @@ export default function TileImage({ tile, box, bounds, cursors, videoBounds, vie
       onMouseDown={onMouseDown}
       onDoubleClick={onDoubleClick}
       onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       style={style}
     >
       {content}
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index 2d0e368..bb12179 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { generateTransform, unitsDimension, pickCursor } from 'app/views/tile/tile.utils'
 
-export default function TileLink({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileLink({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
   // console.log(tile)
   const style = {
     transform: generateTransform(tile, box, bounds, videoBounds),
@@ -29,6 +29,7 @@ export default function TileLink({ tile, box, bounds, videoBounds, cursors, view
       onMouseDown={onMouseDown}
       onDoubleClick={onDoubleClick}
       onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       style={style}
     >
       {content}
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 373dca0..46d285d 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -7,7 +7,7 @@ const VERTICAL_MARQUEE_DIRECTION = {
   down: "right",
 }
 
-export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
   if (!tile.settings.content) {
     return null
   }
@@ -79,6 +79,7 @@ export default function TileText({ tile, box, bounds, videoBounds, cursors, view
       onMouseDown={onMouseDown}
       onDoubleClick={onDoubleClick}
       onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       style={style}
     >
       {content}
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 760aabf..ca9286a 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -72,7 +72,7 @@ export default class TileVideo extends Component {
   }
 
   render() {
-    let { tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter } = this.props
+    let { tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave } = this.props
 
     if (!tile.settings.url) {
       return null
@@ -106,6 +106,7 @@ export default class TileVideo extends Component {
         onMouseDown={onMouseDown}
         onDoubleClick={onDoubleClick}
         onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         style={style}
       >
         <video
-- 
cgit v1.2.3-70-g09d2