inline image styles

3 files changed, 32 insertions, 16 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index db7034c..b4fb9c5 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -101,10 +101,16 @@ export const CURTAIN_COLOR_LOOKUP = CURTAIN_COLORS.reduce((a,b) => {
 }, {})
 
 export const IMAGE_BACKGROUND_SIZE_OPTIONS = [
-  { label: 'cover', name: 'cover' },
-  { label: 'contain', name: 'contain' },
-  { label: '90% width', name: '90% auto' },
-  { label: '90% height', name: 'auto 90%' },
+  { label: 'Cover', name: 'cover' },
+  { label: 'Contain', name: 'contain' },
+  { label: '90% Width', name: '90% auto' },
+  { label: '90% Height', name: 'auto 90%' },
+]
+
+export const IMAGE_INLINE_SIZE_OPTIONS = [
+  { label: 'Fullscreen', name: 'fullscreen' },
+  { label: 'Wide', name: 'wide' },
+  { label: 'Column width', name: 'column-width' },
 ]
 
 export const DISPLAY_SIZE = 2000
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}
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 24723a8..df30da1 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -20,7 +20,10 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
       return <div />
     }
     url = frame.url
-    captionItem = item.settings.caption_lookup[frame_id] || item
+    captionItem = item.settings.caption_lookup[frame_id]
+    if (!captionItem.short_caption) {
+      captionItem = item
+    }
     colorName = annotation.settings.inline_color || annotation.settings.color || 'white'
   } else {
     url = item.settings.display.url
@@ -51,9 +54,9 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
     <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
       <div className="image-container" style={style}>
         <img src={url} />
-        <div className="speaker-icon">{SpeakerIcon}</div>
+        {!annotation.settings.hide_speaker_icon && <div className="speaker-icon">{SpeakerIcon}</div>}
       </div>
-      <MediaCitation media={captionItem} />
+      {captionItem && <MediaCitation media={captionItem} />}
     </div>
   )
   // }