haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-05-12 18:05:05 +00:00
Code Issues Releases Wiki Activity

['wiki' page] redesigned the 'change cover' button ()

Browse Source
This commit is contained in:
llj 2024-11-28 16:05:28 +08:00 committed by GitHub
parent ab8d16e2f8
commit 1a74f9dabf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 51 deletions
frontend/src/pages/wiki2/wiki-right-header
page-cover.csspage-cover.js

30
frontend/src/pages/wiki2/wiki-right-header/page-cover.css
View File

@ -11,28 +11,22 @@
object-fit: cover;
}
.wiki-page-cover__controller {
display: none;
position: absolute;
top: 15px;
right: 20%;
}
.wiki-page-cover__controller.show {
display: block;
}
.wiki-page-cover__controller .wiki-cover-controller-btn {
padding: 4px 6px;
background-color: #fff;
.wiki-cover-controller-btn {
padding: 0 .5rem;
background: rgba(0,0,0, 0.5);
height: 28px;
line-height: 28px;
border-radius: 4px;
font-size: 12px;
color: #6a6767b3;
font-size: 14px;
color: #fff;
cursor: pointer;
position: absolute;
top: 16px;
right: 16px;
}
.wiki-page-cover__controller .wiki-cover-controller-btn:hover {
color: #4d5156;
.wiki-cover-controller-btn:hover {
background: rgba(0,0,0, 0.7);
}
.wiki-page-cover-popover {

64
frontend/src/pages/wiki2/wiki-right-header/page-cover.js
View File

@ -1,6 +1,5 @@
import React, { useCallback, useRef, useState } from 'react';
import { UncontrolledPopover } from 'reactstrap';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { Utils } from '../../../utils/utils';
import { gettext, wikiPermission } from '../../../utils/constants';
@ -50,38 +49,37 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
}
return (
<>
<div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
<div className={classNames('wiki-page-cover__controller', { show: isShowCoverController, 'd-none': !isDesktop })}>
{wikiPermission !== 'public' &&
<div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div>
}
</div>
</div>
{isDesktop && wikiPermission !== 'public' &&
<UncontrolledPopover
ref={popoverRef}
flip
target="wiki-change-cover-btn"
placement="bottom"
hideArrow={true}
popperClassName='wiki-page-cover-popover'
innerClassName='wiki-page-cover-panel wiki-page-panel'
trigger="legacy"
>
<div className='wiki-page-cover-panel__header popover-header'>
<span>{gettext('Gallery')}</span>
<span onClick={removeCoverImage} className='wiki-remove-icon-btn'>{gettext('Remove')}</span>
</div>
<div className='wiki-page-cover-panel__body popover-body'>
{WIKI_COVER_LIST.map(imgName => (
<img key={imgName} onClick={updateCoverImage.bind(null, imgName)} className='wiki-cover-gallery-img' alt={gettext('Cover')} src={getCoverImgUrl(`${imgName}`)} />
))}
</div>
</UncontrolledPopover>
}
</>
<div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
{isDesktop && wikiPermission !== 'public' && isShowCoverController && (
<>
<button className='wiki-cover-controller-btn border-0 d-flex align-items-center' id='wiki-change-cover-btn'>
<i className="sf3-font sf3-font-image mr-1"></i>
{gettext('Change cover')}
</button>
<UncontrolledPopover
ref={popoverRef}
flip
target="wiki-change-cover-btn"
placement="bottom"
hideArrow={true}
popperClassName='wiki-page-cover-popover'
innerClassName='wiki-page-cover-panel wiki-page-panel'
trigger="legacy"
>
<div className='wiki-page-cover-panel__header popover-header'>
<span>{gettext('Gallery')}</span>
<span onClick={removeCoverImage} className='wiki-remove-icon-btn'>{gettext('Remove')}</span>
</div>
<div className='wiki-page-cover-panel__body popover-body'>
{WIKI_COVER_LIST.map(imgName => (
<img key={imgName} onClick={updateCoverImage.bind(null, imgName)} className='wiki-cover-gallery-img' alt={gettext('Cover')} src={getCoverImgUrl(`${imgName}`)} />
))}
</div>
</UncontrolledPopover>
</>
)}
</div>
);
}