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

---
 .../components/annotations/annotation.form.js      | 17 +++----------
 .../annotationForms/annotationForm.text.js         | 29 ++++++++++++++++++++--
 2 files changed, 30 insertions(+), 16 deletions(-)

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

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index e0a66e4..7b1918a 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -5,24 +5,13 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
-import { MEDIA_ANNOTATION_TYPES } from 'app/constants'
-import { clamp, timestamp, capitalize } from 'app/utils'
+import { ANNOTATION_SELECT_OPTIONS, MEDIA_ANNOTATION_TYPES } from 'app/constants'
+import { timestamp } from 'app/utils'
 import { timeToPosition } from 'app/utils/align.utils'
 import { Select } from 'app/common'
 
 import { annotationFormLookup } from './annotationForms'
 
-const ANNOTATION_TYPES = [
-  'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end',
-  'footnote',
-  'text_plate',
-  'video', 'subtitle',
-  'image',
-  'gallery', 'carousel', 'grid', 'vitrine',
-  'gallery_advance',
-  'curtain', 'intro', 'schedule',
-].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
-
 const annotationTextTypes = new Set([
   'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate',
 ])
@@ -148,7 +137,7 @@ class AnnotationForm extends Component {
           <Select
             name='type'
             selected={annotation.type}
-            options={ANNOTATION_TYPES}
+            options={ANNOTATION_SELECT_OPTIONS}
             defaultOption='text'
             onChange={this.handleSelect}
           />
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