haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-20 10:58:33 +00:00
Code Issues Releases Wiki Activity

icon and cover

Browse Source
This commit is contained in:
liuhongbo
2024-06-20 11:37:11 +08:00
parent 9e61268219
commit 416f26437f
2 changed files with 155 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/src/pages/wiki2/editor-component/page-header.jsx
View File

@@ -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 (
<div
className='wiki-page-header-wrapper'
>
<div className='wiki-cover'></div>
{currentPageConfig.coverImgUrl && (
<div
className='wiki-cover'
onMouseMove={showCoverController}
// onMouseLeave={hideCoverController}
>
<img className='wiki-cover-img' alt={gettext('Cover')} src={coverImgUrl} />
{isShowCoverController && (
<div className='wiki-cover-controller'>
<div onClick={handleCoverPanelDisplayedChange} className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div>
<Popover
flip
target="wiki-change-cover-btn"
toggle={() => void 0}
placement="bottom"
isOpen={isShowCoverPanel && currentPageConfig.coverImgUrl}
innerClassName='wiki-cover-panel'
hideArrow={true}
popperClassName='wiki-cover-popover'
>
<div ref={coverPanelPopoverRef}>
<div className='wiki-icon-panel-header popover-header'>
<span>{gettext('Gallery')}</span>
<span onClick={handleIconRemove} className='wiki-remove-icon-btn'>{gettext('Remove')}</span>
</div>
<PopoverBody className='wiki-cover-panel-body'>
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://img0.baidu.com/it/u=1182742047,3628923944&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://www.2008php.com/2015_Website_appreciate/2015-09-10/20150910002714.jpg' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://img1.baidu.com/it/u=3504078124,2689803181&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://img2.baidu.com/it/u=1882437344,2360797937&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://www.2008php.com/2014_Website_appreciate/2015-01-08/20150108181231.jpg' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://img2.baidu.com/it/u=1031726174,3597184508&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://img0.baidu.com/it/u=2265212344,3361529340&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://www.2008php.com/2012_Website_appreciate/2012-06-26/20120626041901.jpg' />
<img onClick={handleSetCoverImage} className='wiki-cover-gallery-img' alt={gettext('Cover')} src='https://img0.baidu.com/it/u=794065552,1847631001&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800' />
</PopoverBody>
</div>
</Popover>
</div>
)}
</div>
)}
<div className='wiki-page-gap-container'>
<div
className='wiki-editor-header'
onMouseEnter={changeControllerDisplayed}
onMouseLeave={changeControllerDisplayed}
>
<div className='wiki-icon-container'>
<div className={classnames('wiki-icon-container', { gap: currentPageConfig.icon && !currentPageConfig.coverImgUrl })}>
<div className={classnames('wiki-icon-wrapper', { show: currentPageConfig.icon })} id='wiki-icon-wrapper' onClick={handleIconPanelDisplayedChange}>
<span>{currentPageConfig.icon}</span>
</div>
@@ -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}
>
<div ref={iconPanelPopoverRef}>
@@ -148,13 +227,16 @@ const PageHeader = ({ currentPageConfig, onUpdatePage }) => {
<span className='text'>{gettext('Add icon')}</span>
</div>
)}
<div className='wiki-page-controller-item'>
<i className='fa fa-save'></i>
<span className='text'>{gettext('Add cover')}</span>
</div>
{!currentPageConfig.coverImgUrl && (
<div className='wiki-page-controller-item'>
<i className='fa fa-save'></i>
<span className='text'>{gettext('Add cover')}</span>
</div>
)}
</div>
<Input className='sf-wiki-title' onCompositionEnd={handleRenameDocument} bsSize="lg" onChange={handleRenameDocument} defaultValue={currentPageConfig.name} />
</div>
</div>
</div>
);

73
frontend/src/pages/wiki2/wiki.css
View File

@@ -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);
}