From c8fae843cf466b7df93fb8a8edf12c5d92762208 Mon Sep 17 00:00:00 2001 From: kwajiehao Date: Thu, 26 Dec 2019 15:03:11 +0800 Subject: [PATCH 1/8] style: linting and props validation --- src/components/ImagesModal.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/ImagesModal.jsx b/src/components/ImagesModal.jsx index 8d826484f..02f85ca85 100644 --- a/src/components/ImagesModal.jsx +++ b/src/components/ImagesModal.jsx @@ -27,7 +27,13 @@ export const ImageCard = ({ image, siteName, onClick }) => ( export default class ImagesModal extends PureComponent { render() { - const { siteName, images, onClose, onImageSelect, readImageToUpload } = this.props; + const { + siteName, + images, + onClose, + onImageSelect, + readImageToUpload, + } = this.props; return (!!images.length && (
@@ -64,7 +70,7 @@ export default class ImagesModal extends PureComponent {
) ); - }; + } } ImageCard.propTypes = { @@ -77,7 +83,12 @@ ImageCard.propTypes = { }; ImagesModal.propTypes = { + images: PropTypes.arrayOf(PropTypes.shape({ + fileName: PropTypes.string, + path: PropTypes.string, + })).isRequired, onClose: PropTypes.func.isRequired, siteName: PropTypes.string.isRequired, onImageSelect: PropTypes.func.isRequired, + readImageToUpload: PropTypes.func.isRequired, }; From 09e5a9f8ffbb67d65bd8ecfb013e6308edcc49e5 Mon Sep 17 00:00:00 2001 From: kwajiehao Date: Thu, 26 Dec 2019 17:39:17 +0800 Subject: [PATCH 2/8] fix: allow same file to be uploaded consecutively Currently in the ImagesModal or Images tab, if you click on Add New Image and select a file, then click exit on the ImageSettingsModal, you will not be able to select that image again - the file reader simply doesn't pop up. By clearing the target value on click, the onChange event will be triggered, whereas before, it does not get triggered since there is no change in target value --- src/components/ImagesModal.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ImagesModal.jsx b/src/components/ImagesModal.jsx index 02f85ca85..ab4197fdc 100644 --- a/src/components/ImagesModal.jsx +++ b/src/components/ImagesModal.jsx @@ -51,6 +51,10 @@ export default class ImagesModal extends PureComponent { /> { + // eslint-disable-next-line no-param-reassign + event.target.value = ''; + }} type="file" id="file-upload" accept="image/png, image/jpeg, image/gif" From 4eae8abc13ea8de4649d520f9ed7512eb88b0e97 Mon Sep 17 00:00:00 2001 From: kwajiehao Date: Thu, 26 Dec 2019 19:22:13 +0800 Subject: [PATCH 3/8] fix: remove edit icon from media card --- src/components/ImagesModal.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ImagesModal.jsx b/src/components/ImagesModal.jsx index ab4197fdc..715737015 100644 --- a/src/components/ImagesModal.jsx +++ b/src/components/ImagesModal.jsx @@ -18,7 +18,6 @@ export const ImageCard = ({ image, siteName, onClick }) => (
{image.fileName}
-
From f396fdffee91d6f119c36bcd78ffd9216f8db2ea Mon Sep 17 00:00:00 2001 From: kwajiehao Date: Thu, 26 Dec 2019 19:23:13 +0800 Subject: [PATCH 4/8] style: lint EditPAge --- src/layouts/EditPage.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/layouts/EditPage.jsx b/src/layouts/EditPage.jsx index 1e03c2d1a..ee0d7a29c 100644 --- a/src/layouts/EditPage.jsx +++ b/src/layouts/EditPage.jsx @@ -210,7 +210,7 @@ export default class EditPage extends Component { name: 'image', action: async () => { await this.getImages(siteName); - this.setState({ isSelectingImage: true }) + this.setState({ isSelectingImage: true }); }, className: 'fa fa-picture-o', title: 'Insert Image', @@ -224,7 +224,10 @@ export default class EditPage extends Component { />
- +
From 596883c074ef500bfe89c8564fc745243cc47ae6 Mon Sep 17 00:00:00 2001 From: kwajiehao Date: Thu, 26 Dec 2019 20:08:26 +0800 Subject: [PATCH 5/8] style: lint --- src/components/ImageSettingsModal.jsx | 50 +++++++++++++++------------ 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/src/components/ImageSettingsModal.jsx b/src/components/ImageSettingsModal.jsx index faa3e5e16..ed86f7240 100644 --- a/src/components/ImageSettingsModal.jsx +++ b/src/components/ImageSettingsModal.jsx @@ -39,7 +39,13 @@ export default class ImageSettingsModal extends Component { } renameImage = async () => { - const { match, image, isPendingUpload, toReload, onClose } = this.props; + const { + match, + image, + isPendingUpload, + toReload, + onClose, + } = this.props; const { siteName } = match.params; const { newFileName, @@ -143,31 +149,31 @@ export default class ImageSettingsModal extends Component {
{isPendingUpload - ? ( - - ) : ( - <> + ? ( - - - )} + ) : ( + <> + + + + )}
@@ -194,4 +200,4 @@ ImageSettingsModal.propTypes = { ImageSettingsModal.defaultProps = { toReload: true, -} +}; From 55f0cfeb1dfb27d1a404352f9292cc68f8b2e377 Mon Sep 17 00:00:00 2001 From: kwajiehao Date: Thu, 26 Dec 2019 20:14:53 +0800 Subject: [PATCH 6/8] feat: introduce image highlight and selection functionality This commit changes the flow for image selection in EditPage. Instead of selecting the image on click, when a user clicks on an image in the ImagesModal, the image is first highlighted and the image must be selected using a Select button on the top right side --- src/components/ImagesModal.jsx | 28 +++++++++++++++--- src/layouts/EditPage.jsx | 29 +++++++++++++++---- src/styles/isomer-cms/pages/Media.module.scss | 4 +++ 3 files changed, 51 insertions(+), 10 deletions(-) diff --git a/src/components/ImagesModal.jsx b/src/components/ImagesModal.jsx index 715737015..e83eded33 100644 --- a/src/components/ImagesModal.jsx +++ b/src/components/ImagesModal.jsx @@ -1,12 +1,20 @@ import React, { PureComponent } from 'react'; -import axios from 'axios'; import PropTypes from 'prop-types'; import mediaStyles from '../styles/isomer-cms/pages/Media.module.scss'; import elementStyles from '../styles/isomer-cms/Elements.module.scss'; import { UploadImageCard } from '../layouts/Images'; +import LoadingButton from './LoadingButton'; -export const ImageCard = ({ image, siteName, onClick }) => ( -
+export const ImageCard = ({ + image, + siteName, + onClick, + isSelected, +}) => ( +
{ e.preventDefault(); onClick(image.path); }}>

Select Image

+ @@ -64,8 +80,9 @@ export default class ImagesModal extends PureComponent { ))}
@@ -83,6 +100,7 @@ ImageCard.propTypes = { }).isRequired, siteName: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, + isSelected: PropTypes.bool.isRequired, }; ImagesModal.propTypes = { @@ -94,4 +112,6 @@ ImagesModal.propTypes = { siteName: PropTypes.string.isRequired, onImageSelect: PropTypes.func.isRequired, readImageToUpload: PropTypes.func.isRequired, + selectedImage: PropTypes.string.isRequired, + setSelectedImage: PropTypes.func.isRequired, }; diff --git a/src/layouts/EditPage.jsx b/src/layouts/EditPage.jsx index ee0d7a29c..216e82298 100644 --- a/src/layouts/EditPage.jsx +++ b/src/layouts/EditPage.jsx @@ -40,7 +40,8 @@ export default class EditPage extends Component { frontMatter: '', images: [], isSelectingImage: false, - pendingImageUpload: null + pendingImageUpload: null, + selectedImage: '', }; this.mdeRef = React.createRef(); } @@ -126,8 +127,9 @@ export default class EditPage extends Component { })); } - onImageClick = (filePath) => { - const path = `/${filePath}`; + onImageClick = () => { + const { selectedImage } = this.state; + const path = `/${selectedImage}`; const cm = this.mdeRef.current.simpleMde.codemirror; cm.replaceSelection(`![](${path})`); // set state so that rerender is triggered and image is shown @@ -167,10 +169,20 @@ export default class EditPage extends Component { imgReader.readAsDataURL(event.target.files[0]); } + setSelectedImage = async (filePath) => { + this.setState({ selectedImage: filePath }); + } + render() { const { match } = this.props; const { siteName, fileName } = match.params; - const { editorValue, images, isSelectingImage, pendingImageUpload } = this.state; + const { + editorValue, + images, + isSelectingImage, + pendingImageUpload, + selectedImage, + } = this.state; return ( <>
this.setState({ isSelectingImage: false })} + onClose={() => this.setState({ isSelectingImage: false, selectedImage: '' })} images={images} - onImageSelect={this.onImageClick} + onImageSelect={() => { + this.onImageClick(); + this.setState({ selectedImage: '' }); + }} readImageToUpload={this.readImageToUpload} + selectedImage={selectedImage} + setSelectedImage={this.setSelectedImage} /> )}
diff --git a/src/styles/isomer-cms/pages/Media.module.scss b/src/styles/isomer-cms/pages/Media.module.scss index f524cbac9..39680748d 100644 --- a/src/styles/isomer-cms/pages/Media.module.scss +++ b/src/styles/isomer-cms/pages/Media.module.scss @@ -35,6 +35,10 @@ overflow-y: scroll; padding-bottom: 50px; + .selectedMediaCard{ + outline: 2px solid $isomer-blue; + @extend .mediaCard; + } .mediaCard{ @include single-site; From 07e67c19845ef67569942e1be5d5cbe46add26ad Mon Sep 17 00:00:00 2001 From: kwajiehao Date: Thu, 26 Dec 2019 15:10:32 +0100 Subject: [PATCH 7/8] style: position select button --- src/components/ImagesModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ImagesModal.jsx b/src/components/ImagesModal.jsx index e83eded33..0ac4d89de 100644 --- a/src/components/ImagesModal.jsx +++ b/src/components/ImagesModal.jsx @@ -48,7 +48,7 @@ export default class ImagesModal extends PureComponent {
-

Select Image

+

Select Image

Date: Wed, 19 Feb 2020 09:48:43 +0100 Subject: [PATCH 8/8] fix: apply fix to #125 for Images component --- src/layouts/Images.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/layouts/Images.jsx b/src/layouts/Images.jsx index 451628443..a49b0f6f5 100644 --- a/src/layouts/Images.jsx +++ b/src/layouts/Images.jsx @@ -122,6 +122,10 @@ export default class Images extends Component { /> { + // eslint-disable-next-line no-param-reassign + event.target.value = ''; + }} type="file" id="file-upload" accept="image/png, image/jpeg, image/gif"