haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-01 15:09:14 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
llj
2024-11-28 16:05:28 +08:00
committed by GitHub
parent ab8d16e2f8
commit 1a74f9dabf
2 changed files with 43 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,28 +11,22 @@
object-fit: cover; object-fit: cover;
} }
.wiki-page-cover__controller { .wiki-cover-controller-btn {
display: none; padding: 0 .5rem;
position: absolute; background: rgba(0,0,0, 0.5);
top: 15px; height: 28px;
right: 20%; line-height: 28px;
}
.wiki-page-cover__controller.show {
display: block;
}
.wiki-page-cover__controller .wiki-cover-controller-btn {
padding: 4px 6px;
background-color: #fff;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 14px;
color: #6a6767b3; color: #fff;
cursor: pointer; cursor: pointer;
position: absolute;
top: 16px;
right: 16px;
} }
.wiki-page-cover__controller .wiki-cover-controller-btn:hover { .wiki-cover-controller-btn:hover {
color: #4d5156; background: rgba(0,0,0, 0.7);
} }
.wiki-page-cover-popover { .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 React, { useCallback, useRef, useState } from 'react';
import { UncontrolledPopover } from 'reactstrap'; import { UncontrolledPopover } from 'reactstrap';
import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Utils } from '../../../utils/utils'; import { Utils } from '../../../utils/utils';
import { gettext, wikiPermission } from '../../../utils/constants'; import { gettext, wikiPermission } from '../../../utils/constants';
@@ -50,38 +49,37 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
} }
return ( return (
<> <div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<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)} />
<img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} /> {isDesktop && wikiPermission !== 'public' && isShowCoverController && (
<div className={classNames('wiki-page-cover__controller', { show: isShowCoverController, 'd-none': !isDesktop })}> <>
{wikiPermission !== 'public' && <button className='wiki-cover-controller-btn border-0 d-flex align-items-center' id='wiki-change-cover-btn'>
<div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div> <i className="sf3-font sf3-font-image mr-1"></i>
} {gettext('Change cover')}
</div> </button>
</div> <UncontrolledPopover
{isDesktop && wikiPermission !== 'public' && ref={popoverRef}
<UncontrolledPopover flip
ref={popoverRef} target="wiki-change-cover-btn"
flip placement="bottom"
target="wiki-change-cover-btn" hideArrow={true}
placement="bottom" popperClassName='wiki-page-cover-popover'
hideArrow={true} innerClassName='wiki-page-cover-panel wiki-page-panel'
popperClassName='wiki-page-cover-popover' trigger="legacy"
innerClassName='wiki-page-cover-panel wiki-page-panel' >
trigger="legacy" <div className='wiki-page-cover-panel__header popover-header'>
> <span>{gettext('Gallery')}</span>
<div className='wiki-page-cover-panel__header popover-header'> <span onClick={removeCoverImage} className='wiki-remove-icon-btn'>{gettext('Remove')}</span>
<span>{gettext('Gallery')}</span> </div>
<span onClick={removeCoverImage} className='wiki-remove-icon-btn'>{gettext('Remove')}</span> <div className='wiki-page-cover-panel__body popover-body'>
</div> {WIKI_COVER_LIST.map(imgName => (
<div className='wiki-page-cover-panel__body popover-body'> <img key={imgName} onClick={updateCoverImage.bind(null, imgName)} className='wiki-cover-gallery-img' alt={gettext('Cover')} src={getCoverImgUrl(`${imgName}`)} />
{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> </>
</UncontrolledPopover> )}
} </div>
</>
); );
} }