inline image styles

1 files changed, 16 insertions, 9 deletions

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 3d52db8..3de2ac5 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,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
+import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_INLINE_SIZE_OPTIONS } from 'app/constants'
 import { Select, Checkbox, TextInput } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
 import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
@@ -42,13 +42,6 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         onChange={handleSettingsSelect}
       />
 
-      <Checkbox
-        label="Inline"
-        name="inline"
-        checked={annotation.settings.inline}
-        onChange={handleSettingsSelect}
-      />
-
       <Select
         title='Color'
         name='color'
@@ -58,7 +51,7 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         onChange={handleSettingsSelect}
       />
 
-      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+      {(annotation.settings.fullscreen) && (
         <div>
           <Checkbox
             label="Hide inline image"
@@ -67,6 +60,20 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
             onChange={handleSettingsSelect}
           />
           <Select
+            title='Inline size'
+            name='inline_size'
+            selected={annotation.settings.inline_size}
+            options={IMAGE_INLINE_SIZE_OPTIONS}
+            defaultOption='Pick a size'
+            onChange={handleSettingsSelect}
+          />
+          <Checkbox
+            label="Hide speaker icon"
+            name="hide_speaker_icon"
+            checked={annotation.settings.hide_speaker_icon}
+            onChange={handleSettingsSelect}
+          />
+          <Select
             title='Inline background color'
             name='inline_color'
             selected={annotation.settings.inline_color}