From e9e753640f1c96ffaf91b35cfc46126fcdb15e2f Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 12 Nov 2020 18:44:08 +0100
Subject: better control over cover image

---
 .../annotationForms/annotationForm.text.js         | 29 ++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

(limited to 'animism-align/frontend/app/views/align/components/annotations/annotationForms')

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
index 9c94435..8bc7675 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
@@ -1,10 +1,17 @@
 import React, { Component } from 'react'
 
-import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants'
+import {
+  CURTAIN_COLOR_SELECT_OPTIONS,
+  CURTAIN_STYLE_SELECT_OPTIONS,
+  BLACK_WHITE_SELECT_OPTIONS,
+  IMAGE_BACKGROUND_SIZE_OPTIONS,
+} from 'app/constants'
 import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems } from 'app/utils/annotation.utils'
 
-export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
+export const AnnotationFormSectionHeading = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  const image_list_items = makeMediaItems(media, ['image', 'video', 'gallery'])
   return (
     <div className='options'>
       <Checkbox
@@ -21,6 +28,24 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
         defaultOption='Pick a color'
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Cover image'
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Cover style'
+        name='cover_style'
+        className="cover_style"
+        selected={annotation.settings.cover_style}
+        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
+        defaultOption='Cover image caption style'
+        onChange={handleSettingsSelect}
+      />
       <LabelDescription>
         {'Background color for section'}
       </LabelDescription>
-- 
cgit v1.2.3-70-g09d2