From 2ea3216bff663a5cb39677e8b54507c513c7c42f Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Tue, 9 May 2023 07:58:00 +0300 Subject: [PATCH] Card upload --- public/locales/en/translation.json | 1 + public/locales/ru/translation.json | 1 + .../EditorFloatingMenu/EditorFloatingMenu.tsx | 24 +++++++++++--- .../Editor/InlineForm/InlineForm.tsx | 3 ++ .../UploadModalContent.module.scss | 0 .../UploadModalContent.tsx | 21 +++--------- .../index.ts | 0 src/components/Editor/index.ts | 1 + src/components/Views/Edit.module.scss | 28 +++++++++++++++- src/components/Views/Edit.tsx | 33 +++++++++++++++---- 10 files changed, 84 insertions(+), 28 deletions(-) rename src/components/Editor/{UploadModal => UploadModalContent}/UploadModalContent.module.scss (100%) rename src/components/Editor/{UploadModal => UploadModalContent}/UploadModalContent.tsx (89%) rename src/components/Editor/{UploadModal => UploadModalContent}/index.ts (100%) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 056ac76e..21d7627c 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -4,6 +4,7 @@ "About the project": "About the project", "Add comment": "Comment", "Add image": "Add image", + "Add another image": "Add another image", "Address on Discourse": "Address on Discourse", "All": "All", "All authors": "All authors", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index f4839adf..49180f3e 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -5,6 +5,7 @@ "About the project": "О проекте", "Add comment": "Комментировать", "Add image": "Добавить изображение", + "Add another image": "Добавить другое изображение", "Add to bookmarks": "Добавить в закладки", "Address on Discourse": "Адрес на Дискурсе", "All": "Все", diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx index d74c637d..7552d18f 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx +++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx @@ -8,9 +8,10 @@ import { useLocalize } from '../../../context/localize' import { Modal } from '../../Nav/Modal' import { Menu } from './Menu' import type { MenuItem } from './Menu/Menu' -import { showModal } from '../../../stores/ui' -import { UploadModalContent } from '../UploadModal' +import { hideModal, showModal } from '../../../stores/ui' +import { UploadModalContent } from '../UploadModalContent' import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler' +import { imageProxy } from '../../../utils/imageProxy' type FloatingMenuProps = { editor: Editor @@ -35,6 +36,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => { const { t } = useLocalize() const [selectedMenuItem, setSelectedMenuItem] = createSignal() const [menuOpen, setMenuOpen] = createSignal(false) + const menuRef: { current: HTMLDivElement } = { current: null } const handleEmbedFormSubmit = async (value: string) => { // TODO: add support instagram embed (blockquote) const emb = await embedData(value) @@ -58,8 +60,6 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => { setMenuOpen(false) } - const menuRef: { current: HTMLDivElement } = { current: null } - useOutsideClickHandler({ containerRef: menuRef, handler: () => { @@ -69,6 +69,15 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => { } }) + const renderImage = (src: string) => { + props.editor + .chain() + .focus() + .setImage({ src: imageProxy(src) }) + .run() + hideModal() + } + return ( <>
@@ -100,7 +109,12 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
- setSelectedMenuItem()} editor={props.editor} /> + { + renderImage(value) + setSelectedMenuItem() + }} + /> ) diff --git a/src/components/Editor/InlineForm/InlineForm.tsx b/src/components/Editor/InlineForm/InlineForm.tsx index 3a5ea88d..486999f9 100644 --- a/src/components/Editor/InlineForm/InlineForm.tsx +++ b/src/components/Editor/InlineForm/InlineForm.tsx @@ -33,6 +33,9 @@ export const InlineForm = (props: Props) => { } else { setFormValueError(props.errorMessage) } + } else { + props.onSubmit(formValue()) + props.onClose() } } diff --git a/src/components/Editor/UploadModal/UploadModalContent.module.scss b/src/components/Editor/UploadModalContent/UploadModalContent.module.scss similarity index 100% rename from src/components/Editor/UploadModal/UploadModalContent.module.scss rename to src/components/Editor/UploadModalContent/UploadModalContent.module.scss diff --git a/src/components/Editor/UploadModal/UploadModalContent.tsx b/src/components/Editor/UploadModalContent/UploadModalContent.tsx similarity index 89% rename from src/components/Editor/UploadModal/UploadModalContent.tsx rename to src/components/Editor/UploadModalContent/UploadModalContent.tsx index 47009e03..839b6440 100644 --- a/src/components/Editor/UploadModal/UploadModalContent.tsx +++ b/src/components/Editor/UploadModalContent/UploadModalContent.tsx @@ -14,8 +14,7 @@ import { verifyImg } from '../../../utils/verifyImg' import { imageProxy } from '../../../utils/imageProxy' type Props = { - editor: Editor - closeCallback: () => void + closeCallback: (imgUrl?: string) => void } export const UploadModalContent = (props: Props) => { @@ -25,27 +24,17 @@ export const UploadModalContent = (props: Props) => { const [dragActive, setDragActive] = createSignal(false) const [dragError, setDragError] = createSignal() - const renderImage = (src: string) => { - props.editor - .chain() - .focus() - .setImage({ src: imageProxy(src) }) - .run() - hideModal() - } - const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' }) const runUpload = async (file) => { try { setIsUploading(true) const fileUrl = await handleFileUpload(file) setIsUploading(false) - props.closeCallback() - renderImage(fileUrl) + props.closeCallback(fileUrl) } catch (error) { - console.error('[upload image] error', error) setIsUploading(false) setUploadError(t('Error')) + console.error('[runUpload]', error) } } @@ -53,7 +42,7 @@ export const UploadModalContent = (props: Props) => { try { const data = await fetch(value) const blob = await data.blob() - const file = new File([blob], 'convertedFromUrl', { type: data.headers.get('Content-Type') }) + const file = await new File([blob], 'convertedFromUrl', { type: data.headers.get('Content-Type') }) const fileToUpload: UploadFile = { source: blob.toString(), name: file.name, @@ -126,7 +115,7 @@ export const UploadModalContent = (props: Props) => { hideModal() props.closeCallback() }} - validate={(value) => verifyImg(value)} + // validate={(value) => verifyImg(value)} onSubmit={handleImageFormSubmit} errorMessage={t('Invalid image link')} /> diff --git a/src/components/Editor/UploadModal/index.ts b/src/components/Editor/UploadModalContent/index.ts similarity index 100% rename from src/components/Editor/UploadModal/index.ts rename to src/components/Editor/UploadModalContent/index.ts diff --git a/src/components/Editor/index.ts b/src/components/Editor/index.ts index dc91dc70..a9541268 100644 --- a/src/components/Editor/index.ts +++ b/src/components/Editor/index.ts @@ -1,3 +1,4 @@ export { Editor } from './Editor' export { Panel } from './Panel' export { TopicSelect } from './TopicSelect' +export { UploadModalContent } from './UploadModalContent' diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index 80091c8f..ca4e150e 100644 --- a/src/components/Views/Edit.module.scss +++ b/src/components/Views/Edit.module.scss @@ -11,6 +11,32 @@ align-items: flex-start; box-sizing: border-box; + .shoutCardCoverContainer { + position: relative; + width: 100%; + } + + .shoutCardCover { + height: 0; + margin-bottom: 1.6rem; + overflow: hidden; + padding-bottom: 56.2%; + position: relative; + + img { + height: 100%; + object-fit: cover; + position: absolute; + transform-origin: 50% 50%; + transition: transform 1s ease-in-out; + width: 100%; + } + + &:hover img { + transform: scale(1.1); + } + } + .shoutCardTitle { @include font-size(2.2rem); @@ -89,7 +115,7 @@ .close { filter: invert(1); - margin: -1.6rem 0 0 -1.6rem; + margin: -1.6rem 0 0 -2.8rem; } section { diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index a5ac1ab8..caaf6503 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -6,11 +6,13 @@ import type { Shout, Topic } from '../../graphql/types.gen' import { apiClient } from '../../utils/apiClient' import { useRouter } from '../../stores/router' import { useEditorContext } from '../../context/editor' -import { Editor, Panel, TopicSelect } from '../Editor' +import { Editor, Panel, TopicSelect, UploadModalContent } from '../Editor' import { Icon } from '../_shared/Icon' import { Button } from '../_shared/Button' import styles from './Edit.module.scss' import { useSession } from '../../context/session' +import { Modal } from '../Nav/Modal' +import { hideModal, showModal } from '../../stores/ui' type EditViewProps = { shout: Shout @@ -22,14 +24,13 @@ export const EditView = (props: EditViewProps) => { const [isScrolled, setIsScrolled] = createSignal(false) const [topics, setTopics] = createSignal(null) + const [coverImage, setCoverImage] = createSignal(null) const { page } = useRouter() - const { form, formErrors, actions: { setForm, setFormErrors } } = useEditorContext() - const [isSlugChanged, setIsSlugChanged] = createSignal(false) setForm({ @@ -88,7 +89,14 @@ export const EditView = (props: EditViewProps) => { behavior: 'smooth' }) } - console.log('!!! :') + + const handleSetCover = (imgUrl: string) => { + hideModal() + console.log('!!! imgUrl:', imgUrl) + setCoverImage(imgUrl) + setForm('coverImageUrl', imgUrl) + } + return ( <>