From 39c99091f9d5f2721a6f972b33db61fbbbee96f4 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Mon, 8 May 2023 21:23:51 +0300 Subject: [PATCH 1/5] [WIP] init --- public/locales/en/translation.json | 6 +++- public/locales/ru/translation.json | 8 ++++-- src/components/Editor/TopicSelect/index.ts | 1 + src/components/Editor/index.ts | 3 ++ src/components/Views/Edit.module.scss | 31 +++++++++++++++++++- src/components/Views/Edit.tsx | 33 ++++++++++++++-------- 6 files changed, 66 insertions(+), 16 deletions(-) create mode 100644 src/components/Editor/TopicSelect/index.ts create mode 100644 src/components/Editor/index.ts diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 5d9b89ff..056ac76e 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -3,6 +3,7 @@ "About myself": "About myself", "About the project": "About the project", "Add comment": "Comment", + "Add image": "Add image", "Address on Discourse": "Address on Discourse", "All": "All", "All authors": "All authors", @@ -32,6 +33,7 @@ "By views": "By views", "Characters": "Знаков", "Chat Title": "Chat Title", + "Choose a title image for the article. You can immediately see how the publication card will look like.": "Choose a title image for the article. You can immediately see how the publication card will look like.", "Choose who you want to write to": "Choose who you want to write to", "Collaborate": "Help Edit", "Comments": "Comments", @@ -119,6 +121,7 @@ "Logout": "Logout", "Manifest": "Manifest", "Many files, choose only one": "Many files, choose only one", + "Material card": "Material card", "More": "More", "Most commented": "Commented", "Most read": "Readable", @@ -162,6 +165,7 @@ "Recent": "Fresh", "Reply": "Reply", "Report": "Complain", + "Required": "Required", "Resend code": "Send confirmation", "Restore password": "Restore password", "Save draft": "Save draft", @@ -272,5 +276,5 @@ "user already exist": "user already exists", "view": "view", "zine": "zine", - "Required": "Required" + "Publish Settings": "Publish Settings" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 0d00d8eb..f4839adf 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -4,6 +4,7 @@ "About myself": "О себе", "About the project": "О проекте", "Add comment": "Комментировать", + "Add image": "Добавить изображение", "Add to bookmarks": "Добавить в закладки", "Address on Discourse": "Адрес на Дискурсе", "All": "Все", @@ -34,6 +35,7 @@ "By views": "По просмотрам", "Characters": "Знаков", "Chat Title": "Тема дискурса", + "Choose a title image for the article. You can immediately see how the publication card will look like.": "Выберите заглавное изображение для статьи. Тут же сразу можно увидеть как будет выглядеть карточка публикации.", "Choose who you want to write to": "Выберите кому хотите написать", "Collaborate": "Помочь редактировать", "Comments": "Комментарии", @@ -126,6 +128,7 @@ "Logout": "Выход", "Manifest": "Манифест", "Many files, choose only one": "Много файлов, выберете один", + "Material card": "Карточка материала", "More": "Ещё", "Most commented": "Комментируемое", "Most read": "Читаемое", @@ -173,11 +176,13 @@ "Recent": "Свежее", "Reply": "Ответить", "Report": "Пожаловаться", + "Required": "Поле обязательно для заполнения", "Resend code": "Выслать подтверждение", "Restore password": "Восстановить пароль", "Save": "Сохранить", "Save draft": "Сохранить черновик", "Save settings": "Сохранить настройки", + "Scroll up": "Наверх", "Search": "Поиск", "Search author": "Поиск автора", "Search topic": "Поиск темы", @@ -187,7 +192,6 @@ "Send": "Отправить", "Send link again": "Прислать ссылку ещё раз", "Settings": "Настройки", - "Scroll up": "Наверх", "Share": "Поделиться", "Short opening": "Небольшое вступление, чтобы заинтересовать читателя", "Show": "Показать", @@ -293,5 +297,5 @@ "user already exist": "пользователь уже существует", "view": "просмотр", "zine": "журнал", - "Required": "Поле обязательно для заполнения" + "Publish Settings": "Настройки публикации" } diff --git a/src/components/Editor/TopicSelect/index.ts b/src/components/Editor/TopicSelect/index.ts new file mode 100644 index 00000000..e2250eef --- /dev/null +++ b/src/components/Editor/TopicSelect/index.ts @@ -0,0 +1 @@ +export { TopicSelect } from './TopicSelect' diff --git a/src/components/Editor/index.ts b/src/components/Editor/index.ts new file mode 100644 index 00000000..dc91dc70 --- /dev/null +++ b/src/components/Editor/index.ts @@ -0,0 +1,3 @@ +export { Editor } from './Editor' +export { Panel } from './Panel' +export { TopicSelect } from './TopicSelect' diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index 37c78486..80091c8f 100644 --- a/src/components/Views/Edit.module.scss +++ b/src/components/Views/Edit.module.scss @@ -4,8 +4,37 @@ .articlePreview { border: 2px solid #e8e8e8; - min-height: 10em; padding: 1rem 1.2rem; + display: flex; + flex-direction: column; + min-height: 300px; + align-items: flex-start; + box-sizing: border-box; + + .shoutCardTitle { + @include font-size(2.2rem); + + font-weight: 700; + line-height: 1.25; + margin: auto 0 0.8rem; + } + + .shoutCardSubtitle { + @include font-size(1.7rem); + + color: #696969; + font-weight: 400; + line-height: 1.3; + margin-bottom: 0.8rem; + transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; + } + + .shoutAuthor { + @include font-size(1.2rem); + + margin-right: 1.6rem; + color: rgb(0 0 0 / 70%); + } } .formHolder { diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index a492dd29..a5ac1ab8 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -1,16 +1,16 @@ import { createSignal, onCleanup, onMount, Show } from 'solid-js' import { useLocalize } from '../../context/localize' import { clsx } from 'clsx' -import styles from './Edit.module.scss' import { Title } from '@solidjs/meta' import type { Shout, Topic } from '../../graphql/types.gen' import { apiClient } from '../../utils/apiClient' -import { TopicSelect } from '../Editor/TopicSelect/TopicSelect' import { useRouter } from '../../stores/router' -import { Editor } from '../Editor/Editor' -import { Panel } from '../Editor/Panel' import { useEditorContext } from '../../context/editor' +import { Editor, Panel, TopicSelect } from '../Editor' import { Icon } from '../_shared/Icon' +import { Button } from '../_shared/Button' +import styles from './Edit.module.scss' +import { useSession } from '../../context/session' type EditViewProps = { shout: Shout @@ -18,6 +18,7 @@ type EditViewProps = { export const EditView = (props: EditViewProps) => { const { t } = useLocalize() + const { user } = useSession() const [isScrolled, setIsScrolled] = createSignal(false) const [topics, setTopics] = createSignal(null) @@ -87,7 +88,7 @@ export const EditView = (props: EditViewProps) => { behavior: 'smooth' }) } - + console.log('!!! :') return ( <>
+

ЙФЙФЙФЙФЙЫЙ  

{t('Write an article')}
@@ -117,7 +119,7 @@ export const EditView = (props: EditViewProps) => { type="text" name="title" id="title" - placeholder="Заголовок" + placeholder={t('Header')} autocomplete="off" value={form.title} onInput={handleTitleInputChange} @@ -133,7 +135,7 @@ export const EditView = (props: EditViewProps) => { name="subtitle" id="subtitle" autocomplete="off" - placeholder="Подзаголовок" + placeholder={t('Subheader')} value={form.subtitle} onChange={(e) => setForm('subtitle', e.currentTarget.value)} /> @@ -148,7 +150,7 @@ export const EditView = (props: EditViewProps) => { [styles.visible]: page().route === 'editSettings' })} > -

Настройки публикации

+

{t('Publish Settings')}

Slug

@@ -214,12 +216,19 @@ export const EditView = (props: EditViewProps) => { {/*
*/} {/*
*/} -

Карточка материала на главной

+

{t('Material card')}

- Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет - выглядеть на главной странице + {t( + 'Choose a title image for the article. You can immediately see how the publication card will look like.' + )}

-
+
+
From 2ea3216bff663a5cb39677e8b54507c513c7c42f Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Tue, 9 May 2023 07:58:00 +0300 Subject: [PATCH 2/5] 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 ( <>
-

ЙФЙФЙФЙФЙЫЙ  

{t('Write an article')}
From 28e0e4e33a0881ec955472e5b4762c4173544972 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Tue, 9 May 2023 08:09:09 +0300 Subject: [PATCH 4/5] styles minifix --- src/components/Views/Edit.module.scss | 35 +++++++++++++-------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index ca4e150e..0d31ff56 100644 --- a/src/components/Views/Edit.module.scss +++ b/src/components/Views/Edit.module.scss @@ -14,26 +14,25 @@ .shoutCardCoverContainer { position: relative; width: 100%; - } + .shoutCardCover { + height: 0; + overflow: hidden; + position: relative; + margin: 1.6rem 0; + padding-bottom: 56.2%; - .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%; + } - 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); + &:hover img { + transform: scale(1.1); + } } } From 21f84f229282546d6d396cd3f5844867ebfeb956 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Tue, 9 May 2023 14:25:40 +0300 Subject: [PATCH 5/5] resolve conversation --- .../Editor/EditorFloatingMenu/EditorFloatingMenu.tsx | 2 +- .../Editor/UploadModalContent/UploadModalContent.tsx | 10 ++++------ src/components/Views/Edit.tsx | 5 ++--- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx index 7552d18f..bb90fc93 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx +++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx @@ -110,7 +110,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
{ + onClose={(value) => { renderImage(value) setSelectedMenuItem() }} diff --git a/src/components/Editor/UploadModalContent/UploadModalContent.tsx b/src/components/Editor/UploadModalContent/UploadModalContent.tsx index 839b6440..4f6bbc34 100644 --- a/src/components/Editor/UploadModalContent/UploadModalContent.tsx +++ b/src/components/Editor/UploadModalContent/UploadModalContent.tsx @@ -8,13 +8,11 @@ import { hideModal } from '../../../stores/ui' import { createDropzone, createFileUploader, UploadFile } from '@solid-primitives/upload' import { handleFileUpload } from '../../../utils/handleFileUpload' import { useLocalize } from '../../../context/localize' -import { Editor } from '@tiptap/core' import { Loading } from '../../_shared/Loading' import { verifyImg } from '../../../utils/verifyImg' -import { imageProxy } from '../../../utils/imageProxy' type Props = { - closeCallback: (imgUrl?: string) => void + onClose: (imgUrl?: string) => void } export const UploadModalContent = (props: Props) => { @@ -30,7 +28,7 @@ export const UploadModalContent = (props: Props) => { setIsUploading(true) const fileUrl = await handleFileUpload(file) setIsUploading(false) - props.closeCallback(fileUrl) + props.onClose(fileUrl) } catch (error) { setIsUploading(false) setUploadError(t('Error')) @@ -113,9 +111,9 @@ export const UploadModalContent = (props: Props) => { showInput={true} onClose={() => { hideModal() - props.closeCallback() + props.onClose() }} - // validate={(value) => verifyImg(value)} + validate={(value) => verifyImg(value)} onSubmit={handleImageFormSubmit} errorMessage={t('Invalid image link')} /> diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index f4c276c0..b40ee5c8 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -90,9 +90,8 @@ export const EditView = (props: EditViewProps) => { setForm('slug', slug) } - const handleSetCover = (imgUrl: string) => { + const handleUploadModalContentCloseSetCover = (imgUrl: string) => { hideModal() - console.log('!!! imgUrl:', imgUrl) setCoverImage(imgUrl) setForm('coverImageUrl', imgUrl) } @@ -253,7 +252,7 @@ export const EditView = (props: EditViewProps) => {
- handleSetCover(value)} /> + handleUploadModalContentCloseSetCover(value)} />