From 881ec86a9efff0adf934ecf6fd0a478b158e0f93 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 14 Aug 2020 19:07:16 +0200 Subject: form to edit captions --- animism-align/frontend/app/common/modal.css | 6 +- .../views/media/components/media.formGallery.js | 56 ++++++++++--- .../media/components/media.formGalleryImage.js | 96 ++++++++++++++++++++++ animism-align/frontend/app/views/media/media.css | 34 ++++++++ 4 files changed, 178 insertions(+), 14 deletions(-) create mode 100644 animism-align/frontend/app/views/media/components/media.formGalleryImage.js (limited to 'animism-align') diff --git a/animism-align/frontend/app/common/modal.css b/animism-align/frontend/app/common/modal.css index 5e95a09..98e2d05 100644 --- a/animism-align/frontend/app/common/modal.css +++ b/animism-align/frontend/app/common/modal.css @@ -5,7 +5,7 @@ width: 100%; height: 100%; z-index: 100; - background: rgba(0,0,0,0.2); + background: rgba(0,0,0,0.8); display: none; } .modal.visible { @@ -14,7 +14,7 @@ align-items: center; } .modal > div { - background: #fff; + background: #338; padding: 1rem; - box-shadow: 0 2px 4px rgba(0,0,0,0.5); + box-shadow: 0 2px 4px rgba(0,0,0,0.8); } diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js index f785b40..fb4f73a 100644 --- a/animism-align/frontend/app/views/media/components/media.formGallery.js +++ b/animism-align/frontend/app/views/media/components/media.formGallery.js @@ -2,7 +2,6 @@ import React, { Component } from 'react' import { Link } from 'react-router-dom' import { ReactSortable } from "react-sortablejs" -import { session } from 'app/session' import actions from 'app/actions' import { capitalize, preloadImage, simpleArraysEqual } from 'app/utils' import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from 'app/constants' @@ -10,9 +9,12 @@ import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' import { renderThumbnail } from 'app/common/upload.helpers' +import GalleryImageForm from './media.formGalleryImage' + export default class MediaGalleryForm extends Component { state = { loading: false, + edit_image_id: null, } constructor(props) { @@ -22,6 +24,7 @@ export default class MediaGalleryForm extends Component { this.handleSettingsChange = this.handleSettingsChange.bind(this) this.handleUpload = this.handleUpload.bind(this) this.uploadSize = this.uploadSize.bind(this) + this.handleSaveItem = this.handleSaveItem.bind(this) } handleChange(e) { @@ -158,9 +161,17 @@ export default class MediaGalleryForm extends Component { } } + handleSaveItem(id, item) { + const caption_lookup = data.settings.caption_lookup || {} + caption_lookup[id] = item + this.handleSettingsChange('caption_lookup', caption_lookup) + this.setState({ edit_image_id: null }) + } + render() { const { data } = this.props - const { image_order, image_lookup, thumbnail_lookup } = data.settings + const { image_order, image_lookup, thumbnail_lookup, caption_lookup } = data.settings + const { loading, edit_image_id } = this.state // console.log(data) return (
@@ -170,38 +181,61 @@ export default class MediaGalleryForm extends Component { mime="*/*" onChange={this.handleUpload} /> - {this.state.loading && } + {loading && } {image_order && image_order.length && ({ id }))} setList={new_order => this.handleOrderChanged(new_order)} > {image_order.map(image_id => ( - { + e.preventDefault() + e.stopPropagation() + this.setState({ edit_image_id: image_id }) + }} /> ))} } + {edit_image_id && + + }
) } } -const GalleryImageForm = ({ id, key, image, thumbnail }) => { +const initialCaptionData = (caption_lookup, image_id) => { + caption_lookup = caption_lookup || {} + const initialData = caption_lookup[image_id] || {} + return { + ...initialData, + } +} + +const GalleryListItem = ({ id, key, image, thumbnail, onClick }) => { // console.log(image, thumbnail) return ( -
+
{thumbnail - ? - : + ? ( +
+
+ +
+ ) : }
) } - -/* -*/ diff --git a/animism-align/frontend/app/views/media/components/media.formGalleryImage.js b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js new file mode 100644 index 0000000..1dbf1f2 --- /dev/null +++ b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js @@ -0,0 +1,96 @@ +import React, { Component } from 'react' + +import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' + +export default class GalleryImageForm extends Component { + state = { + loaded: false, + data: {}, + } + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + this.handleSelect = this.handleSelect.bind(this) + } + componentDidMount() { + console.log(this.props) + this.setState({ + loaded: true, + data: { ...this.props.initialData }, + }) + } + handleChange(e) { + const { name, value } = e.target + this.handleSelect(name, value) + } + handleSelect(name, value) { + this.setState({ + data: { + ...this.state.data, + [name]: value, + } + }) + } + handleSave() { + this.props.onSave(this.props.id, this.state.data) + } + render() { + const { thumbnail } = this.props + const { loaded, data } = this.state + if (!loaded) return
+ console.log(data) + return ( +
+
+
+ +
+
+ + + +