From 416f26437ff6ed516de577c7ec1e0192245ff830 Mon Sep 17 00:00:00 2001 From: liuhongbo <916196375@qq.com> Date: Thu, 20 Jun 2024 11:37:11 +0800 Subject: [PATCH] icon and cover --- .../wiki2/editor-component/page-header.jsx | 104 ++++++++++++++++-- frontend/src/pages/wiki2/wiki.css | 73 ++++++++++-- 2 files changed, 155 insertions(+), 22 deletions(-) diff --git a/frontend/src/pages/wiki2/editor-component/page-header.jsx b/frontend/src/pages/wiki2/editor-component/page-header.jsx index 8382a7562e..0258e2f7eb 100644 --- a/frontend/src/pages/wiki2/editor-component/page-header.jsx +++ b/frontend/src/pages/wiki2/editor-component/page-header.jsx @@ -17,7 +17,13 @@ const propTypes = { const PageHeader = ({ currentPageConfig, onUpdatePage }) => { const [isShowController, setIsShowController] = useState(false); const [isShowIconPanel, setIsShowIconPanel] = useState(false); + const [isShowCoverController, setIsShowCoverController] = useState(false); + const [isShowCoverPanel, setIsShowCoverPanel] = useState(false); + const [coverImgUrl, setCoverImgUrl] = useState(''); const iconPanelPopoverRef = useRef(null); + const coverPanelPopoverRef = useRef(null); + + // currentPageConfig.coverImgUrl = 'https://img2.baidu.com/it/u=2061573580,1495285204&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'; console.log('currentPageConfig', currentPageConfig); @@ -50,6 +56,7 @@ const PageHeader = ({ currentPageConfig, onUpdatePage }) => { const handleIconPanelDisplayedChange = useCallback(() => { setIsShowIconPanel(!isShowIconPanel); + setIsShowCoverPanel(false); }, [isShowIconPanel]); const handleClickAddIcon = useCallback(() => { @@ -62,6 +69,16 @@ const PageHeader = ({ currentPageConfig, onUpdatePage }) => { if (!isClickInPopover) handleIconPanelDisplayedChange(); }, [handleIconPanelDisplayedChange]); + const handleCoverPanelDisplayedChange = useCallback(() => { + setIsShowCoverPanel(!isShowCoverPanel); + setIsShowIconPanel(false); + }, [isShowCoverPanel]); + + const handleCoverPanelListener = useCallback((e) => { + const isClickInPopover = coverPanelPopoverRef.current.contains(e.target); + if (!isClickInPopover) handleCoverPanelDisplayedChange(); + }, [handleCoverPanelDisplayedChange]); + // Update current page favicon useEffect(() => { let faviconUrl = ''; @@ -82,35 +99,97 @@ const PageHeader = ({ currentPageConfig, onUpdatePage }) => { }, 0); } if (!isShowIconPanel) removeEventListener('click', handleIconPanelListener); + if (isShowCoverPanel) { + setTimeout(() => { + // Avoid open behavior closing popover + addEventListener('click', handleCoverPanelListener); + }, 0); + } + if (!isShowCoverPanel) removeEventListener('click', handleCoverPanelListener); return () => { removeEventListener('click', handleIconPanelListener); + removeEventListener('click', handleCoverPanelListener); }; - }, [handleIconPanelListener, isShowIconPanel]); + }, [handleCoverPanelListener, handleIconPanelListener, isShowCoverPanel, isShowIconPanel]); const handleIconRemove = () => { handleSetIcon(''); handleIconPanelDisplayedChange(); - }; const handleAddCover = useCallback(() => { }, []); + const showCoverController = useCallback(() => { + setIsShowCoverController(true); + }, []); + const hideCoverController = useCallback(() => { + setIsShowCoverController(false); + }, []); + + + + const handleSetCoverImage = (e) => { + // TODO set cover image + setCoverImgUrl(e.target.src); + handleCoverPanelDisplayedChange(); + }; return (
-
+ {currentPageConfig.coverImgUrl && ( +
+ {gettext('Cover')} + {isShowCoverController && ( +
+
{gettext('Change cover')}
+ void 0} + placement="bottom" + isOpen={isShowCoverPanel && currentPageConfig.coverImgUrl} + innerClassName='wiki-cover-panel' + hideArrow={true} + popperClassName='wiki-cover-popover' + > +
+
+ {gettext('Gallery')} + {gettext('Remove')} +
+ + {gettext('Cover')} + {gettext('Cover')} + {gettext('Cover')} + {gettext('Cover')} + {gettext('Cover')} + {gettext('Cover')} + {gettext('Cover')} + {gettext('Cover')} + {gettext('Cover')} + +
+ +
+ )} + +
+ )}
- -
+
{currentPageConfig.icon}
@@ -120,8 +199,8 @@ const PageHeader = ({ currentPageConfig, onUpdatePage }) => { target="wiki-icon-wrapper" toggle={() => void 0} placement="bottom" - isOpen={currentPageConfig.icon && isShowIconPanel} - innerClassName='wiki-icon-panel' + isOpen={isShowIconPanel && currentPageConfig.icon} + popperClassName='wiki-icon-popover' hideArrow={true} >
@@ -148,13 +227,16 @@ const PageHeader = ({ currentPageConfig, onUpdatePage }) => { {gettext('Add icon')}
)} -
- - {gettext('Add cover')} -
+ {!currentPageConfig.coverImgUrl && ( +
+ + {gettext('Add cover')} +
+ )}
+
); diff --git a/frontend/src/pages/wiki2/wiki.css b/frontend/src/pages/wiki2/wiki.css index 6de7a91e07..5f90a20088 100644 --- a/frontend/src/pages/wiki2/wiki.css +++ b/frontend/src/pages/wiki2/wiki.css @@ -246,12 +246,6 @@ img[src=""] { font-size: 26pt; } -.cur-view-content .wiki-cover { - height: 30vh; - width: 100%; - background-color: aqua; -} - .cur-view-content .wiki-editor-container { display: flex; flex-direction: column; @@ -266,6 +260,7 @@ img[src=""] { position: static; } +/* wiki page header */ .wiki-page-controller { display: flex; visibility: hidden; @@ -288,12 +283,18 @@ img[src=""] { line-height: 78px; } +.wiki-icon-container.gap { + margin-top: 60px; +} + .wiki-icon-wrapper { display: none; margin-top: -48px; + position: relative; width: 78px; height: 78px; font-size: 78px; + z-index: 1; } .wiki-icon-wrapper:hover { @@ -314,9 +315,9 @@ img[src=""] { border-radius: 4px; } -.wiki-icon-panel { - width: 352px; - height: 435px; +/* Icon */ +.wiki-icon-popover { + max-width: max-content; } .wiki-icon-panel-header { @@ -339,10 +340,60 @@ img[src=""] { .wiki-icon-panel-body { padding: 0; - width: 352px; background-color: #fff; } -.wiki-icon-panel-body div { +/* Cover */ +.cur-view-content .wiki-cover { + position: relative; + height: 30vh; width: 100%; } + +.cur-view-content .wiki-cover .wiki-cover-img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.wiki-cover .wiki-cover-controller { + position: absolute; + top: 15px; + right: 20%; +} + +.wiki-cover .wiki-cover-controller .wiki-cover-controller-btn { + padding: 4px 6px; + background-color: #fff; + border-radius: 4px; + font-size: 12px; + color: #6a6767b3; + cursor: pointer; +} + +.wiki-cover .wiki-cover-controller .wiki-cover-controller-btn:hover { + color: #4d5156; +} + +.wiki-cover-popover { + max-width: max-content !important; +} + +.wiki-cover-panel-body { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 10px; + background-color: #fff; + overflow-y: auto; +} + +.wiki-cover-panel .wiki-cover-gallery-img { + width: 120px; + height: 64px; + cursor: pointer; + +} + +.wiki-cover-panel .wiki-cover-gallery-img:hover { + filter: brightness(1.1); +}