From 0a40e67e4f9c184410c391fcd1e180e370acdcaf Mon Sep 17 00:00:00 2001 From: Kilu Date: Tue, 2 Jul 2024 10:46:26 +0800 Subject: [PATCH] fix: support copy button --- frontend/appflowy_web_app/src/assets/copy.svg | 6 ++ .../src/assets/space_icon/space_icon_1.svg | 11 ++++ .../src/assets/space_icon/space_icon_10.svg | 4 ++ .../src/assets/space_icon/space_icon_11.svg | 4 ++ .../src/assets/space_icon/space_icon_12.svg | 6 ++ .../src/assets/space_icon/space_icon_13.svg | 5 ++ .../src/assets/space_icon/space_icon_14.svg | 4 ++ .../src/assets/space_icon/space_icon_15.svg | 5 ++ .../src/assets/space_icon/space_icon_2.svg | 4 ++ .../src/assets/space_icon/space_icon_3.svg | 4 ++ .../src/assets/space_icon/space_icon_4.svg | 5 ++ .../src/assets/space_icon/space_icon_5.svg | 6 ++ .../src/assets/space_icon/space_icon_6.svg | 5 ++ .../src/assets/space_icon/space_icon_7.svg | 5 ++ .../src/assets/space_icon/space_icon_8.svg | 6 ++ .../src/assets/space_icon/space_icon_9.svg | 9 +++ .../src/components/app/App.tsx | 2 + .../src/components/editor/Editable.tsx | 24 ++++---- .../block-actions/RightTopActions.tsx | 20 ++++++ .../block-actions/RightTopActionsToolbar.tsx | 14 +++++ .../editor/components/blocks/code/Code.tsx | 40 ++++++++++-- .../components/blocks/divider/DividerNode.tsx | 9 +-- .../components/blocks/image/ImageBlock.tsx | 29 ++++++--- .../blocks/math-equation/MathEquation.tsx | 51 +++++++++------- .../editor/components/element/Element.tsx | 2 +- .../components/leaf/formula/Formula.tsx | 6 +- .../components/leaf/mention/Mention.tsx | 2 +- .../src/components/editor/editor.scss | 2 +- .../publish/header/BreadcrumbItem.tsx | 34 ++++++++++- .../publish/header/PublishViewHeader.tsx | 1 + .../components/publish/header/SpaceIcon.tsx | 61 +++++++++++++++++++ .../src/pages/PublishPage.tsx | 3 +- frontend/resources/translations/en.json | 7 ++- 33 files changed, 332 insertions(+), 64 deletions(-) create mode 100644 frontend/appflowy_web_app/src/assets/copy.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_1.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_10.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_11.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_12.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_13.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_14.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_15.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_2.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_3.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_4.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_5.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_6.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_7.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_8.svg create mode 100644 frontend/appflowy_web_app/src/assets/space_icon/space_icon_9.svg create mode 100644 frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActions.tsx create mode 100644 frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActionsToolbar.tsx create mode 100644 frontend/appflowy_web_app/src/components/publish/header/SpaceIcon.tsx diff --git a/frontend/appflowy_web_app/src/assets/copy.svg b/frontend/appflowy_web_app/src/assets/copy.svg new file mode 100644 index 0000000000..e31580d7f2 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/copy.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_1.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_1.svg new file mode 100644 index 0000000000..bfb045fedc --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_10.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_10.svg new file mode 100644 index 0000000000..4b9d51a6b0 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_10.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_11.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_11.svg new file mode 100644 index 0000000000..bb6ec9dea9 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_11.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_12.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_12.svg new file mode 100644 index 0000000000..a10232d2f0 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_12.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_13.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_13.svg new file mode 100644 index 0000000000..da0007d043 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_13.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_14.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_14.svg new file mode 100644 index 0000000000..80e00912bd --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_14.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_15.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_15.svg new file mode 100644 index 0000000000..dcd06dc4b4 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_15.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_2.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_2.svg new file mode 100644 index 0000000000..ecfd797076 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_3.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_3.svg new file mode 100644 index 0000000000..cef3794152 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_4.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_4.svg new file mode 100644 index 0000000000..244db0745e --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_4.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_5.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_5.svg new file mode 100644 index 0000000000..0ee1709993 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_5.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_6.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_6.svg new file mode 100644 index 0000000000..66dafd1e7f --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_6.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_7.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_7.svg new file mode 100644 index 0000000000..4d7910296b --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_7.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_8.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_8.svg new file mode 100644 index 0000000000..275bb3ae07 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_8.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/appflowy_web_app/src/assets/space_icon/space_icon_9.svg b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_9.svg new file mode 100644 index 0000000000..c2cc63c35a --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/space_icon/space_icon_9.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/appflowy_web_app/src/components/app/App.tsx b/frontend/appflowy_web_app/src/components/app/App.tsx index beb95f80f8..75acb09842 100644 --- a/frontend/appflowy_web_app/src/components/app/App.tsx +++ b/frontend/appflowy_web_app/src/components/app/App.tsx @@ -1,3 +1,4 @@ +import NotFound from '@/components/error/NotFound'; import PublishPage from '@/pages/PublishPage'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import withAppWrapper from '@/components/app/withAppWrapper'; @@ -7,6 +8,7 @@ const AppMain = withAppWrapper(() => { return ( } /> + } /> ); }); diff --git a/frontend/appflowy_web_app/src/components/editor/Editable.tsx b/frontend/appflowy_web_app/src/components/editor/Editable.tsx index 2ba4e83e3a..3c46314f38 100644 --- a/frontend/appflowy_web_app/src/components/editor/Editable.tsx +++ b/frontend/appflowy_web_app/src/components/editor/Editable.tsx @@ -20,17 +20,19 @@ const EditorEditable = ({ editor }: { editor: ReactEditor }) => { const renderElement = useCallback((props: RenderElementProps) => , []); return ( - + <> + + ); }; diff --git a/frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActions.tsx b/frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActions.tsx new file mode 100644 index 0000000000..b9681f2f55 --- /dev/null +++ b/frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActions.tsx @@ -0,0 +1,20 @@ +import { IconButton, Tooltip } from '@mui/material'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { ReactComponent as CopyIcon } from '@/assets/copy.svg'; + +function RightTopActions({ onCopy }: { onCopy: () => void }) { + const { t } = useTranslation(); + + return ( +
+ + + + + +
+ ); +} + +export default RightTopActions; diff --git a/frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActionsToolbar.tsx b/frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActionsToolbar.tsx new file mode 100644 index 0000000000..e953d8c87e --- /dev/null +++ b/frontend/appflowy_web_app/src/components/editor/components/block-actions/RightTopActionsToolbar.tsx @@ -0,0 +1,14 @@ +import RightTopActions from '@/components/editor/components/block-actions/RightTopActions'; +import React, { useRef } from 'react'; + +function RightTopActionsToolbar({ onCopy, style }: { onCopy: () => void; style?: React.CSSProperties }) { + const ref = useRef(null); + + return ( +
+ +
+ ); +} + +export default RightTopActionsToolbar; diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.tsx index 5ef2279da3..4c4b8cb16e 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.tsx @@ -1,15 +1,29 @@ +import { notify } from '@/components/_shared/notify'; +import RightTopActionsToolbar from '@/components/editor/components/block-actions/RightTopActionsToolbar'; import { useCodeBlock } from '@/components/editor/components/blocks/code/Code.hooks'; import { CodeNode, EditorElementProps } from '@/components/editor/editor.type'; -import { forwardRef, memo } from 'react'; +import { copyTextToClipboard } from '@/utils/copy'; +import React, { forwardRef, memo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { ReactEditor, useSlateStatic } from 'slate-react'; import LanguageSelect from './SelectLanguage'; export const CodeBlock = memo( forwardRef>(({ node, children, ...attributes }, ref) => { const { language, handleChangeLanguage } = useCodeBlock(node); + const [showToolbar, setShowToolbar] = useState(false); + const { t } = useTranslation(); + const editor = useSlateStatic(); return ( - <> -
+
{ + setShowToolbar(true); + }} + onMouseLeave={() => setShowToolbar(false)} + > +
@@ -20,7 +34,25 @@ export const CodeBlock = memo( {children}
- + {showToolbar && ( + { + try { + const at = ReactEditor.findPath(editor, node); + const text = editor.string(at); + + await copyTextToClipboard(text); + notify.success(t('publish.copy.codeBlock')); + } catch (_) { + // do nothing + } + }} + /> + )} +
); }), (prevProps, nextProps) => JSON.stringify(prevProps.node) === JSON.stringify(nextProps.node) diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/divider/DividerNode.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/divider/DividerNode.tsx index 450f865b79..f3dff23aeb 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/divider/DividerNode.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/divider/DividerNode.tsx @@ -1,17 +1,12 @@ import { EditorElementProps, DividerNode as DividerBlock } from '@/components/editor/editor.type'; import React, { forwardRef, memo, useMemo } from 'react'; -import { useSelected } from 'slate-react'; export const DividerNode = memo( forwardRef>( ({ node: _node, children: children, ...attributes }, ref) => { - const selected = useSelected(); - const className = useMemo(() => { - return `${attributes.className ?? ''} divider-node relative w-full rounded ${ - selected ? 'bg-content-blue-100' : '' - }`; - }, [attributes.className, selected]); + return `${attributes.className ?? ''} divider-node relative w-full rounded`; + }, [attributes.className]); return (
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx index fe4bbb3317..a021a9ddc9 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx @@ -1,8 +1,9 @@ import { AlignType } from '@/application/collab.type'; import { notify } from '@/components/_shared/notify'; +import RightTopActionsToolbar from '@/components/editor/components/block-actions/RightTopActionsToolbar'; import { EditorElementProps, ImageBlockNode } from '@/components/editor/editor.type'; import { copyTextToClipboard } from '@/utils/copy'; -import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react'; +import React, { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ReactEditor, useSelected, useSlateStatic } from 'slate-react'; import ImageEmpty from './ImageEmpty'; @@ -28,21 +29,18 @@ export const ImageBlock = memo( }, [align]); const { t } = useTranslation(); + const [showToolbar, setShowToolbar] = useState(false); return (
{ + onMouseEnter={() => { if (!url) return; - try { - await copyTextToClipboard(url); - notify.success(t('document.plugins.image.copiedToPasteBoard')); - } catch (_) { - // do nothing - } + setShowToolbar(true); }} - className={`${className || ''} image-block relative w-full py-1 ${url ? 'cursor-pointer' : 'cursor-default'}`} + onMouseLeave={() => setShowToolbar(false)} + className={`${className || ''} image-block cursor-default} relative w-full py-1`} >
{children} @@ -54,6 +52,19 @@ export const ImageBlock = memo( )}
+ {showToolbar && ( + { + if (!url) return; + try { + await copyTextToClipboard(url); + notify.success(t('publish.copy.imageBlock')); + } catch (_) { + // do nothing + } + }} + /> + )}
); }) diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx index 5580f76fdc..824bf33a4c 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx @@ -1,9 +1,10 @@ import KatexMath from '@/components/_shared/katex-math/KatexMath'; import { notify } from '@/components/_shared/notify'; +import RightTopActionsToolbar from '@/components/editor/components/block-actions/RightTopActionsToolbar'; import { EditorElementProps, MathEquationNode } from '@/components/editor/editor.type'; import { copyTextToClipboard } from '@/utils/copy'; import { FunctionsOutlined } from '@mui/icons-material'; -import { forwardRef, memo, useRef } from 'react'; +import React, { forwardRef, memo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; export const MathEquation = memo( @@ -12,41 +13,47 @@ export const MathEquation = memo( const formula = node.data.formula; const { t } = useTranslation(); const containerRef = useRef(null); + const [showToolbar, setShowToolbar] = useState(false); return ( <>
{ + contentEditable={false} + onMouseEnter={() => { if (!formula) return; - try { - await copyTextToClipboard(formula); - notify.success(t('document.plugins.math.copiedToPasteBoard')); - } catch (_) { - // do nothing - } + setShowToolbar(true); }} + onMouseLeave={() => setShowToolbar(false)} className={`${className} math-equation-block relative w-full ${ formula ? 'cursor-pointer' : 'cursor-default' - } py-2`} + } container-bg w-full select-none rounded border border-transparent py-2 px-3 hover:border-line-divider hover:bg-fill-list-active`} > -
- {formula ? ( - - ) : ( -
- - {t('document.plugins.mathEquation.addMathEquation')} -
- )} -
+ {formula ? ( + + ) : ( +
+ + {t('document.plugins.mathEquation.addMathEquation')} +
+ )}
{children}
+ {showToolbar && ( + { + if (!formula) return; + try { + await copyTextToClipboard(formula); + notify.success(t('publish.copy.mathBlock')); + } catch (_) { + // do nothing + } + }} + /> + )}
); diff --git a/frontend/appflowy_web_app/src/components/editor/components/element/Element.tsx b/frontend/appflowy_web_app/src/components/editor/components/element/Element.tsx index d9eead9618..1041490dbe 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/element/Element.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/element/Element.tsx @@ -97,7 +97,7 @@ export const Element = memo( const data = (node.data as BlockData) || {}; const align = data.align; - return `block-element flex rounded ${align ? `block-align-${align}` : ''}`; + return `block-element relative flex rounded ${align ? `block-align-${align}` : ''}`; }, [node.data]); const style = useMemo(() => { diff --git a/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/Formula.tsx b/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/Formula.tsx index 3731fc7216..8efd1b0345 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/Formula.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/Formula.tsx @@ -12,12 +12,12 @@ export const Formula = memo( - + diff --git a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/Mention.tsx b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/Mention.tsx index eba846b9c1..540a7ce17e 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/Mention.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/Mention.tsx @@ -11,7 +11,7 @@ export const Mention = memo( return ( diff --git a/frontend/appflowy_web_app/src/components/editor/editor.scss b/frontend/appflowy_web_app/src/components/editor/editor.scss index b3f1d42f84..69924d1f36 100644 --- a/frontend/appflowy_web_app/src/components/editor/editor.scss +++ b/frontend/appflowy_web_app/src/components/editor/editor.scss @@ -258,7 +258,7 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) { .mention-inline { height: inherit; overflow: hidden; - @apply inline-flex select-none gap-1 relative; + @apply inline-flex gap-1 relative; .mention-icon { @apply absolute top-1/2 transform -translate-y-1/2; diff --git a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx b/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx index ca357e9916..56e61a3235 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx @@ -2,7 +2,9 @@ import { ViewLayout } from '@/application/collab.type'; import { usePublishContext } from '@/application/publish'; import { notify } from '@/components/_shared/notify'; import { ViewIcon } from '@/components/_shared/view-icon'; -import React from 'react'; +import SpaceIcon from '@/components/publish/header/SpaceIcon'; +import { renderColor } from '@/utils/color'; +import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; export interface Crumb { @@ -11,10 +13,23 @@ export interface Crumb { name: string; icon: string; layout: ViewLayout; + extra?: string; } function BreadcrumbItem({ crumb, disableClick = false }: { crumb: Crumb; disableClick?: boolean }) { - const { viewId, icon, name, layout } = crumb; + const { viewId, icon, name, layout, extra } = crumb; + + const extraObj: { + is_space?: boolean; + space_icon?: string; + space_icon_color?: string; + } = useMemo(() => { + try { + return extra ? JSON.parse(extra) : {}; + } catch (e) { + return {}; + } + }, [extra]); const { t } = useTranslation(); const onNavigateToView = usePublishContext()?.toView; @@ -31,7 +46,20 @@ function BreadcrumbItem({ crumb, disableClick = false }: { crumb: Crumb; disable } }} > - {icon || } + {extraObj && extraObj.is_space ? ( + + + + ) : ( + {icon || } + )} + diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx index 6c6ca82b4d..9e9ffb5c9d 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx @@ -34,6 +34,7 @@ export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer: name: ancestor.name, icon: icon, layout: ancestor.layout, + extra: ancestor.extra, }; }); }, [viewMeta]); diff --git a/frontend/appflowy_web_app/src/components/publish/header/SpaceIcon.tsx b/frontend/appflowy_web_app/src/components/publish/header/SpaceIcon.tsx new file mode 100644 index 0000000000..de4baba493 --- /dev/null +++ b/frontend/appflowy_web_app/src/components/publish/header/SpaceIcon.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { ReactComponent as SpaceIcon1 } from '@/assets/space_icon/space_icon_1.svg'; +import { ReactComponent as SpaceIcon2 } from '@/assets/space_icon/space_icon_2.svg'; +import { ReactComponent as SpaceIcon3 } from '@/assets/space_icon/space_icon_3.svg'; +import { ReactComponent as SpaceIcon4 } from '@/assets/space_icon/space_icon_4.svg'; +import { ReactComponent as SpaceIcon5 } from '@/assets/space_icon/space_icon_5.svg'; +import { ReactComponent as SpaceIcon6 } from '@/assets/space_icon/space_icon_6.svg'; +import { ReactComponent as SpaceIcon7 } from '@/assets/space_icon/space_icon_7.svg'; +import { ReactComponent as SpaceIcon8 } from '@/assets/space_icon/space_icon_8.svg'; +import { ReactComponent as SpaceIcon9 } from '@/assets/space_icon/space_icon_9.svg'; +import { ReactComponent as SpaceIcon10 } from '@/assets/space_icon/space_icon_10.svg'; +import { ReactComponent as SpaceIcon11 } from '@/assets/space_icon/space_icon_11.svg'; +import { ReactComponent as SpaceIcon12 } from '@/assets/space_icon/space_icon_12.svg'; +import { ReactComponent as SpaceIcon13 } from '@/assets/space_icon/space_icon_13.svg'; +import { ReactComponent as SpaceIcon14 } from '@/assets/space_icon/space_icon_14.svg'; +import { ReactComponent as SpaceIcon15 } from '@/assets/space_icon/space_icon_15.svg'; + +export const getIconComponent = (icon: string) => { + switch (icon) { + case 'space_icon_1': + return SpaceIcon1; + case 'space_icon_2': + return SpaceIcon2; + case 'space_icon_3': + return SpaceIcon3; + case 'space_icon_4': + return SpaceIcon4; + case 'space_icon_5': + return SpaceIcon5; + case 'space_icon_6': + return SpaceIcon6; + case 'space_icon_7': + return SpaceIcon7; + case 'space_icon_8': + return SpaceIcon8; + case 'space_icon_9': + return SpaceIcon9; + case 'space_icon_10': + return SpaceIcon10; + case 'space_icon_11': + return SpaceIcon11; + case 'space_icon_12': + return SpaceIcon12; + case 'space_icon_13': + return SpaceIcon13; + case 'space_icon_14': + return SpaceIcon14; + case 'space_icon_15': + return SpaceIcon15; + default: + return SpaceIcon1; + } +}; + +function SpaceIcon({ value }: { value: string }) { + const IconComponent = getIconComponent(value); + + return ; +} + +export default SpaceIcon; diff --git a/frontend/appflowy_web_app/src/pages/PublishPage.tsx b/frontend/appflowy_web_app/src/pages/PublishPage.tsx index f5323d8c01..b3b1ce3978 100644 --- a/frontend/appflowy_web_app/src/pages/PublishPage.tsx +++ b/frontend/appflowy_web_app/src/pages/PublishPage.tsx @@ -1,3 +1,4 @@ +import NotFound from '@/components/error/NotFound'; import React from 'react'; import { useParams } from 'react-router-dom'; import { PublishView } from '@/components/publish'; @@ -5,7 +6,7 @@ import { PublishView } from '@/components/publish'; function PublishPage() { const { namespace, publishName } = useParams(); - if (!namespace || !publishName) return null; + if (!namespace || !publishName) return ; return ; } diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json index 7e80954b73..145e22f6c1 100644 --- a/frontend/resources/translations/en.json +++ b/frontend/resources/translations/en.json @@ -2042,6 +2042,11 @@ "reportPage": "Report page", "databaseHasNotBeenPublished": "Publishing a database is not supported yet.", "createdWith": "Created with", - "downloadApp": "Download AppFlowy" + "downloadApp": "Download AppFlowy", + "copy": { + "codeBlock": "The content of code block has been copied to the clipboard", + "imageBlock": "The image link has been copied to the clipboard", + "mathBlock": "The math equation has been copied to the clipboard" + } } }