diff options
Diffstat (limited to 'animism-align/frontend/app/views/align/components/annotations')
7 files changed, 42 insertions, 66 deletions
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.css b/animism-align/frontend/app/views/align/components/annotations/annotation.form.css index cea5830..fa663c7 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.css +++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.css @@ -33,6 +33,10 @@ .annotationForm div.textarea { margin-bottom: 0.5rem; } +.annotationForm img { + max-width: 100%; + max-height: 6rem; +} .annotationForm .options label span:first-child { display: inline-block; diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css index af44212..5f5fda7 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css +++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css @@ -6,7 +6,7 @@ .annotationIndex .annotation { position: absolute; left: 5px; - max-width: 400px; + max-width: 300px; padding: 0.25rem 0.375rem; box-shadow: 0px 0px 3px rgba(0,0,0,1.0); border: 1px solid transparent; @@ -23,7 +23,7 @@ background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4)); } .annotationIndex .annotation.media { - min-width: 300px; + width: 300px; left: calc(405px + 0.5rem); } .annotation.sentence.even { @@ -41,14 +41,15 @@ .annotation.paragraph_end { background-color: #003; border-top: 1px solid #888; - width: 100%; + width: 300px; padding: 1px; } .annotationIndex .annotation.utility { - left: calc(405px + 0.5rem); + left: calc(505px + 0.5rem); + width: 200px; } .annotationIndex .annotation.footnote { - left: calc(405px + 0.5rem); + left: calc(605px + 0.5rem); width: 200px; } .annotationIndex .annotation.text_plate { @@ -58,6 +59,7 @@ background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0)); width: 8rem; padding: 0; + overflow: hidden; } .annotation.curtain span { position: absolute; 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 index c43d8d5..55bdd86 100644 --- 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 @@ -3,17 +3,11 @@ import React, { Component } from 'react' import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' import { TextInput, Select, Checkbox, LabelDescription } from 'app/common' import { AnnotationFormFullscreen } from './annotationForm.utility' +import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils' 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 - } - }) + const image_list_items = makeMediaItems(media, ['gallery']) return ( <div className='options'> <Select @@ -77,30 +71,8 @@ export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, export const AnnotationFormGalleryAdvance = ({ 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 - } - }) - let item, gallery_items, frame_id, thumbnail - if (annotation.settings.media_id && lookup[annotation.settings.media_id]) { - item = lookup[annotation.settings.media_id] - gallery_items = item.settings.image_order.map((id, index) => { - const caption = item.settings.caption_lookup && item.settings.caption_lookup[id] - console.log(caption) - return { - name: index, - label: (index + 1) + ") " + (caption ? (caption.title || "") : "") - } - }) - if (annotation.settings.frame_index) { - frame_id = item.settings.image_order[annotation.settings.frame_index] - thumbnail = item.settings.thumbnail_lookup[frame_id] - } - } + const image_list_items = makeMediaItems(media, ['gallery']) + const { gallery_items, thumbnail } = makeGalleryItems(annotation, media) return ( <div className='options'> <Select @@ -112,7 +84,7 @@ export const AnnotationFormGalleryAdvance = ({ annotation, media, handleSettings onChange={handleSettingsSelect} /> - {item && ( + {gallery_items && ( <Select name='frame_index' selected={annotation.settings.frame_index} 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 28f7e79..d3e981a 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 @@ -3,17 +3,12 @@ import React, { Component } from 'react' import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' import { Select, Checkbox, TextInput } from 'app/common' import { AnnotationFormFullscreen } from './annotationForm.utility' +import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils' export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { if (!media.lookup) return <div /> - const { lookup, order } = media - const image_list_items = order.filter(id => lookup[id].type === 'image').map(id => { - const image = lookup[id] - return { - name: image.id, - label: image.author + ' - ' + image.title - } - }) + const image_list_items = makeMediaItems(media, ['image', 'gallery']) + const { gallery_items, thumbnail } = makeGalleryItems(annotation, media) return ( <div className='options'> <Select @@ -24,7 +19,21 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h defaultOption='Choose an image' onChange={handleSettingsSelect} /> - + + {gallery_items && ( + <Select + name='frame_index' + selected={annotation.settings.frame_index} + options={gallery_items} + defaultOption='Choose an image' + onChange={handleSettingsSelect} + /> + )} + + {thumbnail && ( + <img src={thumbnail.url} /> + )} + <Checkbox label="Fullscreen" name="fullscreen" 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 ff1de04..d83005e 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 @@ -4,17 +4,11 @@ import { timestamp } from 'app/utils' import { TextInput, LabelDescription, Select, Checkbox } from 'app/common' import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' import { annotationFadeTimings } from 'app/utils/annotation.utils' +import { makeMediaItems } from 'app/utils/annotation.utils' export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, handleSettingsSelect }) => { if (!media.lookup) return <div /> - const { lookup, order } = media - const image_list_items = order.filter(id => lookup[id].type === 'file').map(id => { - const image = lookup[id] - return { - name: image.id, - label: image.title - } - }) + const image_list_items = makeMediaItems(media, 'file') return ( <div className='options'> <Select 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 f4cf4c5..f634faa 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 @@ -3,17 +3,11 @@ import React, { Component } from 'react' import { CURTAIN_COLOR_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 AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => { if (!media.lookup) return <div /> - const { lookup, order } = media - const video_list_items = order.filter(id => lookup[id].type === 'video').map(id => { - const video = lookup[id] - return { - name: video.id, - label: video.author + ' - ' + video.title - } - }) + const video_list_items = makeMediaItems(media, ['video']) return ( <div className='options'> <Select diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js index 8574067..9dcd976 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js @@ -37,9 +37,10 @@ export const AnnotationImage = ({ y, annotation, media, timeline, selected, onCl > <div className='meta center'> <div> - <i>{mediaItem.title}</i><br /> - {mediaItem.author}<br /> - {mediaItem.date} + <i>{mediaItem.title}</i>{' - '}{mediaItem.author} + {mediaItem.type === 'gallery' && ( + ' [Frame ' + (1 + annotation.settings.frame_index) + ']' + )} </div> </div> </div> |