adding vitrine

5 files changed, 117 insertions, 9 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
new file mode 100644
index 0000000..e85c6f3
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
+import { TextInput, Select, Checkbox } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
+
+export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  if (!media.lookup) return <div />
+  const { lookup, order } = media
+  const image_list_items = order.filter(id => lookup[id].type === 'gallery').map(id => {
+    const image = lookup[id]
+    return {
+      name: image.id,
+      label: image.author + ' - ' + image.title
+    }
+  })
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Title"
+        name="title"
+        placeholder="Enter title or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Inline"
+        name="inline"
+        checked={annotation.settings.inline}
+        onChange={handleSettingsSelect}
+      />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <AnnotationFormFullscreen
+          annotation={annotation}
+          handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 9ca5295..285dbcc 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { Select, Checkbox } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
 
@@ -23,18 +24,30 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         defaultOption='Choose an image'
         onChange={handleSettingsSelect}
       />
+      
       <Checkbox
         label="Fullscreen"
         name="fullscreen"
         checked={annotation.settings.fullscreen}
         onChange={handleSettingsSelect}
       />
+
       <Checkbox
         label="Inline"
         name="inline"
         checked={annotation.settings.inline}
         onChange={handleSettingsSelect}
       />
+
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
         <AnnotationFormFullscreen
           annotation={annotation}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index 750c3a7..4220eff 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -44,6 +44,15 @@ export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, h
         autoComplete="off"
       />
 
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       <AnnotationFormFullscreen
         annotation={annotation}
         handleSettingsChange={handleSettingsChange}
@@ -65,6 +74,15 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         autoComplete="off"
       />
 
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       <AnnotationFormFullscreen
         alwaysAccessible
         annotation={annotation}
@@ -82,15 +100,6 @@ export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, han
   } = annotationFadeTimings(annotation)
   return (
     <div>
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
       <TextInput
         title="Total duration"
         name="duration"
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 6f58d60..9d15b44 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { Select, Checkbox } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
 
@@ -41,6 +42,15 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         checked={annotation.settings.inline}
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
         <AnnotationFormFullscreen
           annotation={annotation}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index dd601bc..f8b3698 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -11,6 +11,10 @@ import {
 } from './annotationForm.image'
 
 import {
+  AnnotationFormGallery,
+} from './annotationForm.gallery'
+
+import {
   AnnotationFormCurtain,
   AnnotationFormIntro,
 } from './annotationForm.utility'
@@ -21,4 +25,7 @@ export const annotationFormLookup = {
   video: AnnotationFormVideo,
   intro: AnnotationFormIntro,
   curtain: AnnotationFormCurtain,
+  gallery: AnnotationFormGallery,
+  grid: AnnotationFormGallery,
+  vitrine: AnnotationFormGallery,
 }