add popup forms

2 files changed, 51 insertions, 1 deletions

diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 49b34b1..7d0780d 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -65,10 +65,14 @@ const CURSORS = [
 
 const NO_LINK = 0
 const EXTERNAL_LINK = -1
+const OPEN_POPUP_LINK = -2
+const CLOSE_POPUP_LINK = -2
 const PAGE_LIST_TOP_OPTIONS = [
   { name: NO_LINK, label: 'No link' },
   { name: EXTERNAL_LINK, label: 'External link' },
-  { name: -2, label: '──────────', disabled: true },
+  { name: OPEN_POPUP_LINK, label: 'Open popup' },
+  { name: CLOSE_POPUP_LINK, label: 'Close popup' },
+  { name: -3, label: '──────────', disabled: true },
 ]
 
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
@@ -754,6 +758,10 @@ class TileForm extends Component {
     const { temporaryTile } = this.props
     const { pageList } = this.state
     const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
+    const isPopupLink = (
+      temporaryTile.target_page_id === OPEN_POPUP_LINK ||
+      temporaryTile.target_page_id === CLOSE_POPUP_LINK
+    )
     return (
       <div>
         <div className={'row selects'}>
@@ -860,6 +868,40 @@ class TileForm extends Component {
           step={1}
           type='int'
         />
+        <Checkbox
+          label="Element is a Popup"
+          name="is_popup"
+          checked={temporaryTile.settings.is_popup}
+          onChange={this.handleSettingsSelect}
+          autoComplete="off"
+        />
+        {temporaryTile.settings.is_popup && (
+          <TextInput
+            title="Popup group"
+            name="popup_group"
+            data={temporaryTile.settings}
+            error={errorFields.has('popup_group')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        )}
+        <Checkbox
+          label="Wait to appear"
+          name="wait_to_appear"
+          checked={temporaryTile.settings.wait_to_appear}
+          onChange={this.handleSettingsSelect}
+          autoComplete="off"
+        />
+        {temporaryTile.settings.wait_to_appear && (
+          <TextInput
+            title="Appear after"
+            name="appear_after"
+            data={temporaryTile.settings}
+            error={errorFields.has('appear_after')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        )}
       </div>
     )
   }
diff --git a/frontend/app/views/tile/components/tile.list.js b/frontend/app/views/tile/components/tile.list.js
index c455489..9ceb999 100644
--- a/frontend/app/views/tile/components/tile.list.js
+++ b/frontend/app/views/tile/components/tile.list.js
@@ -123,6 +123,14 @@ const TileListLink = ({ tile, pageTitles }) => (
   </div>
 )
 
+const TileListVideo = ({ tile }) => {
+  return (
+    <div className='row' data-id={tile.id}>
+      <span className='snippet'>{"Vido: "}{tile.settings.url}</span>
+    </div>
+  )
+}
+
 const TileListMisc = ({ tile }) => (
   <div className='row' data-id={tile.id}>
     <span className='snippet'>{"Tile: "}{tile.type}</span>