add popup forms

1 files changed, 43 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>
     )
   }