diff options
Diffstat (limited to 'animism-align/frontend/app/views/align/components/annotations')
6 files changed, 81 insertions, 5 deletions
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 8ca3c3f..92b5a5f 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 @@ -14,6 +14,8 @@ import { annotationFormLookup } from './annotationForms' const ANNOTATION_TYPES = [ 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end', + 'footnote', + 'text_plate', 'video', 'image', 'gallery', 'carousel', 'grid', 'vitrine', @@ -21,6 +23,10 @@ const ANNOTATION_TYPES = [ 'curtain', 'intro', 'schedule', ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) +const annotationTextTypes = new Set([ + 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate', +]) + class AnnotationForm extends Component { constructor(props){ super(props) @@ -129,10 +135,7 @@ class AnnotationForm extends Component { }} > {this.renderButtons()} - {annotation.type === 'sentence' && this.renderTextarea()} - {annotation.type === 'section_heading' && this.renderTextarea()} - {annotation.type === 'heading_text' && this.renderTextarea()} - {annotation.type === 'pullquote_credit' && this.renderTextarea()} + {annotationTextTypes.has(annotation.type) && this.renderTextarea()} {(annotation.type in annotationFormLookup) && this.renderElementForm()} </div> ) 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 7c28b43..5547408 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 @@ -47,6 +47,13 @@ .annotationIndex .annotation.utility { left: calc(405px + 0.5rem); } +.annotationIndex .annotation.footnote { + left: calc(405px + 0.5rem); + width: 200px; +} +.annotationIndex .annotation.text_plate { + left: calc(405px + 0.5rem); +} .annotation.curtain { background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0)); width: 8rem; 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 07a79a3..aeebc55 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,7 +1,8 @@ import React, { Component } from 'react' import { CURTAIN_COLOR_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants' -import { Select, Checkbox, LabelDescription } from 'app/common' +import { Select, Checkbox, TextInput, LabelDescription } from 'app/common' +import { AnnotationFormFullscreen } from './annotationForm.utility' export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { return ( @@ -61,3 +62,24 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, </div> ) } + +export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { + return ( + <div className='options'> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + </div> + ) +} diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js index 5cbe773..4f91354 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js @@ -1,5 +1,6 @@ import { AnnotationFormSectionHeading, + AnnotationFormTextPlate, } from './annotationForm.text' import { @@ -22,6 +23,7 @@ import { export const annotationFormLookup = { section_heading: AnnotationFormSectionHeading, + text_plate: AnnotationFormTextPlate, image: AnnotationFormImage, video: AnnotationFormVideo, diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js index 19e0eaa..75667fa 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js @@ -62,3 +62,41 @@ export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDou </div> ) } + +export const AnnotationFootnote = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation sentence footnote' + : (paragraph_id % 2) + ? 'annotation sentence footnote odd' + : 'annotation sentence footnote even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} + +export const AnnotationTextPlate = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation text_plate' + : (paragraph_id % 2) + ? 'annotation text_plate odd' + : 'annotation text_plate even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js index bd0bec1..4bcb3ce 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js @@ -5,6 +5,8 @@ import { AnnotationHeadingText, AnnotationSectionHeading, AnnotationParagraphEnd, + AnnotationFootnote, + AnnotationTextPlate, } from './annotationTypes.text' import { @@ -32,6 +34,8 @@ export const AnnotationElementLookup = { heading_text: React.memo(AnnotationHeadingText), section_heading: React.memo(AnnotationSectionHeading), paragraph_end: React.memo(AnnotationParagraphEnd), + footnote: React.memo(AnnotationFootnote), + text_plate: React.memo(AnnotationTextPlate), video: React.memo(AnnotationVideo), |