diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 21d7627c..ec796cd4 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -277,5 +277,6 @@ "user already exist": "user already exists", "view": "view", "zine": "zine", + "Unnamed draft": "Unnamed draft", "Publish Settings": "Publish Settings" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 49180f3e..850bd9c9 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -298,5 +298,6 @@ "user already exist": "пользователь уже существует", "view": "просмотр", "zine": "журнал", - "Publish Settings": "Настройки публикации" + "Publish Settings": "Настройки публикации", + "Unnamed draft": "Unnamed draft" } diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index 46e10caa..40f186bd 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -368,6 +368,10 @@ img { } } +[data-float] { + max-width: 50%; +} + [data-float='left'] { float: left; } diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 4ec547c9..bca37f77 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -124,14 +124,16 @@ export const FullArticle = (props: ArticleProps) => {
-
- - {mainTopic().title} - -
+ +
+ + {mainTopic().title} + +
+

{props.article.title}

@@ -237,7 +239,7 @@ export const FullArticle = (props: ArticleProps) => {
diff --git a/src/components/Draft/Draft.module.scss b/src/components/Draft/Draft.module.scss new file mode 100644 index 00000000..96b207ca --- /dev/null +++ b/src/components/Draft/Draft.module.scss @@ -0,0 +1,44 @@ +.created { + @include font-size(1.2rem); + + line-height: 1.5rem; + margin-bottom: 20px; + + .icon { + height: 1.2rem; + display: inline-block; + vertical-align: middle; + } +} + +.titleContainer { + @include font-size(2.6rem); + + line-height: 3.2rem; + margin-bottom: 28px; +} + +.title { + font-weight: 700; +} + +.actions { + @include font-size(1.2rem); + + a { + border: 0; + display: inline-block; + } + + a + a { + margin-left: 12px; + } + + .deleteLink { + color: #d00820; + } + + .publishLink { + color: #2bb452; + } +} diff --git a/src/components/Draft/Draft.tsx b/src/components/Draft/Draft.tsx new file mode 100644 index 00000000..c259d627 --- /dev/null +++ b/src/components/Draft/Draft.tsx @@ -0,0 +1,52 @@ +import { clsx } from 'clsx' +import styles from './Draft.module.scss' +import type { Shout } from '../../graphql/types.gen' +import { Icon } from '../_shared/Icon' +import { formatDate } from '../../utils' +import formatDateTime from '../../utils/formatDateTime' +import { useLocalize } from '../../context/localize' +import { getPagePath, openPage } from '@nanostores/router' +import { router } from '../../stores/router' +import { useEditorContext } from '../../context/editor' + +type Props = { + class?: string + shout: Shout + onPublish: (shout: Shout) => void + onDelete: (shout: Shout) => void +} + +export const Draft = (props: Props) => { + const { t } = useLocalize() + + const handlePublishLinkClick = (e) => { + e.preventDefault() + props.onPublish(props.shout) + } + + const handleDeleteLinkClick = (e) => { + e.preventDefault() + props.onDelete(props.shout) + } + + return ( +
+
+ {formatDate(new Date(props.shout.createdAt))} +  {formatDateTime(props.shout.createdAt)()} +
+
+ {props.shout.title || t('Unnamed draft')} {props.shout.subtitle} +
+
+ {t('Edit')} + + {t('Publish')} + + + {t('Delete')} + +
+
+ ) +} diff --git a/src/components/Draft/index.ts b/src/components/Draft/index.ts new file mode 100644 index 00000000..5cab3dab --- /dev/null +++ b/src/components/Draft/index.ts @@ -0,0 +1 @@ +export { Draft } from './Draft' diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 18f59bb1..ee4cf24a 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -42,6 +42,7 @@ import { useEditorContext } from '../../context/editor' import { isTextSelection } from '@tiptap/core' import type { Doc } from 'yjs/dist/src/utils/Doc' import './Prosemirror.scss' +import { TrailingNode } from './extensions/TrailingNode' type EditorProps = { shoutId: number @@ -176,7 +177,8 @@ export const Editor = (props: EditorProps) => { placement: 'left' }, element: floatingMenuRef.current - }) + }), + TrailingNode ] })) diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss index 30f4f763..03fddc7b 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss +++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss @@ -2,10 +2,10 @@ left: 0; position: relative; vertical-align: middle; + padding-top: 5px; button { opacity: 0.3; - vertical-align: text-bottom; transition: opacity 0.3s ease-in-out; &:hover { @@ -21,3 +21,7 @@ min-width: 64vw; } } + +:global(.tippy-box) { + line-height: 1.3; +} diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx index a5ed3f81..efb9221b 100644 --- a/src/components/Editor/Panel/Panel.tsx +++ b/src/components/Editor/Panel/Panel.tsx @@ -10,7 +10,7 @@ import { getPagePath } from '@nanostores/router' import { router } from '../../../stores/router' type Props = { - shoutSlug: string + shoutId: number } export const Panel = (props: Props) => { @@ -18,7 +18,7 @@ export const Panel = (props: Props) => { const { isEditorPanelVisible, wordCounter, - actions: { toggleEditorPanel } + actions: { toggleEditorPanel, saveShout, publishShout } } = useEditorContext() const containerRef: { current: HTMLElement } = { @@ -37,6 +37,16 @@ export const Panel = (props: Props) => { } }) + const handleSaveLinkClick = (e) => { + e.preventDefault() + saveShout() + } + + const handlePublishLinkClick = (e) => { + e.preventDefault() + publishShout() + } + return (