haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-31 22:54:11 +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 {

18
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,16 +49,14 @@ 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)} />
<div className={classNames('wiki-page-cover__controller', { show: isShowCoverController, 'd-none': !isDesktop })}> {isDesktop && wikiPermission !== 'public' && isShowCoverController && (
{wikiPermission !== 'public' && <>
<div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div> <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>
</div> {gettext('Change cover')}
</div> </button>
{isDesktop && wikiPermission !== 'public' &&
<UncontrolledPopover <UncontrolledPopover
ref={popoverRef} ref={popoverRef}
flip flip
@@ -80,8 +77,9 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
))} ))}
</div> </div>
</UncontrolledPopover> </UncontrolledPopover>
}
</> </>
)}
</div>
); );
} }