haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 07:27:04 +00:00
Code Issues Releases Wiki Activity

[wiki] redesigned it for mobile (#6850)

Browse Source
This commit is contained in:
llj
2024-09-26 12:25:59 +08:00
committed by GitHub
parent f1f400499f
commit d309f8f1b0
12 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/pages/wiki2/index.js
View File

@@ -253,7 +253,6 @@ class Wiki extends Component {
<SidePanel
isLoading={this.state.isConfigLoading}
closeSideBar={this.state.closeSideBar}
onCloseSide={this.onCloseSide}
config={this.state.config}
updateWikiConfig={this.updateWikiConfig}
getWikiConfig={this.getWikiConfig}
@@ -262,6 +261,7 @@ class Wiki extends Component {
onUpdatePage={this.onUpdatePage}
/>
<MainPanel
onCloseSide={this.onCloseSide}
path={this.state.path}
config={this.state.config}
currentPageId={this.state.currentPageId}
@@ -275,7 +275,7 @@ class Wiki extends Component {
isUpdateBySide={this.state.isUpdateBySide}
/>
<MediaQuery query="(max-width: 767.8px)">
<Modal isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
<Modal zIndex="1030" isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
</MediaQuery>
</div>
);

4
frontend/src/pages/wiki2/main-panel.js
View File

@@ -22,6 +22,7 @@ const propTypes = {
isUpdateBySide: PropTypes.bool,
onUpdatePage: PropTypes.func,
onAddWikiPage: PropTypes.func,
onCloseSide: PropTypes.func.isRequired
};
class MainPanel extends Component {
@@ -64,11 +65,14 @@ class MainPanel extends Component {
return (
<div className="wiki2-main-panel">
<div className='wiki2-main-panel-north'>
<div className="d-flex align-items-center flex-fill o-hidden">
<i role="button" aria-label={gettext('Side Nav Menu')} onClick={this.props.onCloseSide} className="sf2-icon-menu side-nav-toggle d-md-none"></i>
<WikiTopNav
config={config}
currentPageId={this.props.currentPageId}
currentPageConfig={currentPageConfig}
/>
</div>
{username && wikiPermission !== 'public' && <Account />}
</div>
<div className="main-panel-center">

22
frontend/src/pages/wiki2/side-panel.css
View File

@@ -1,3 +1,18 @@
@media (max-width: 767px) {
.wiki2-side-panel {
position:fixed;
top: 0;
left: -300px;
z-index: 1031;
width: 300px;
max-width: calc(100% - 40px);
height:100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
}
.wiki2-side-panel {
width: 300px;
display: flex;
@@ -21,7 +36,6 @@
}
.wiki2-side-panel .wiki2-side-panel-top .add-new-page {
padding: 0 4px;
cursor: pointer;
border-radius: 4px;
}
@@ -53,9 +67,3 @@
margin-top: 14px;
padding-left: 0;
}
@media (max-width: 767px) {
.wiki2-side-panel {
z-index: 1051;
}
}

12
frontend/src/pages/wiki2/side-panel.js
View File

@@ -157,15 +157,19 @@ class SidePanel extends Component {
render() {
const { isLoading } = this.props;
const isDesktop = Utils.isDesktop();
return (
<div className={`wiki2-side-panel${this.props.closeSideBar ? '' : ' left-zero'}`}>
<div className="wiki2-side-panel-top">
<h4 className="text-truncate ml-0 mb-0" title={repoName}>{repoName}</h4>
{wikiPermission !== 'public' &&
{isDesktop && wikiPermission !== 'public' &&
<div>
<div id='wiki-add-new-page' className='add-new-page' onClick={this.handleAddNewPage.bind(true)}>
<i className='sf3-font sf3-font-new-page'></i>
</div>
<i
id='wiki-add-new-page'
onClick={this.handleAddNewPage.bind(true)}
className='sf3-font sf3-font-new-page add-new-page p-1'
>
</i>
<UncontrolledTooltip className='wiki-new-page-tooltip' target="wiki-add-new-page">
{gettext('New page')}
</UncontrolledTooltip>

10
frontend/src/pages/wiki2/top-nav/index.css
View File

@@ -1,11 +1,15 @@
.wiki2-top-nav .wiki2-top-nav-item {
align-items: center;
padding: 2px 6px;
max-width: 150px;
}
@media (min-width: 768px) {
.wiki2-top-nav .wiki2-top-nav-item {
max-width: 300px;
}
}
.wiki2-top-nav>div:not(.wiki2-top-nav-item) {
margin: 2px 2px 0 2px;
.wiki2-top-nav .item-split {
margin: 0 2px;
}
.wiki2-top-nav .wiki2-top-nav-item:hover {

8
frontend/src/pages/wiki2/top-nav/index.js
View File

@@ -44,15 +44,15 @@ function WikiTopNav({ config, currentPageId }) {
const paths = getPaths(navigation, currentPageId, pages);
return (
<div className="wiki2-top-nav d-flex">
<div className="wiki2-top-nav d-flex align-items-center">
{paths.map((item, index) => {
return (
<Fragment key={item.id}>
<div className='wiki2-top-nav-item d-flex'>
<div className='wiki2-top-nav-item d-flex align-items-center'>
{item.icon ? <CustomIcon icon={item.icon} /> : <NavItemIcon symbol={'file'} disable={true} />}
<span className='text-truncate'>{item.name}</span>
<span className='text-truncate' title={item.name}>{item.name}</span>
</div>
{index !== paths.length - 1 && <div>/</div>}
{index !== paths.length - 1 && <span className="item-split">/</span>}
</Fragment>
);
})}

2
frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
View File

@@ -224,7 +224,7 @@ class PageItem extends Component {
)}
</div>
</div>
<div className="d-flex">
<div className="d-none d-md-flex">
{isEditMode && wikiPermission !== 'public' &&
<>
<div className="more-wiki-page-operation" onClick={this.toggleDropdown}>

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

@@ -2,6 +2,7 @@ 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';
import { WIKI_COVER_LIST } from '../constant';
@@ -11,6 +12,7 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
const [isShowCoverController, setIsShowCoverController] = useState(false);
const popoverRef = useRef(null);
const isDesktop = Utils.isDesktop();
const onMouseEnter = useCallback(() => {
setIsShowCoverController(true);
@@ -51,13 +53,13 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
<>
<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 })}>
<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>
{wikiPermission !== 'public' &&
{isDesktop && wikiPermission !== 'public' &&
<UncontrolledPopover
ref={popoverRef}
flip

4
frontend/src/pages/wiki2/wiki-right-header/page-icon.js
View File

@@ -3,11 +3,13 @@ import { UncontrolledPopover } from 'reactstrap';
import classNames from 'classnames';
import Picker from '@emoji-mart/react';
import PropTypes from 'prop-types';
import { Utils } from '../../../utils/utils';
import { gettext, wikiPermission } from '../../../utils/constants';
import { data } from './../utils/emoji-utils';
const PageIcon = ({ currentPageConfig, onUpdatePage }) => {
const popoverRef = useRef(null);
const isDesktop = Utils.isDesktop();
const handleSetIcon = useCallback((emoji) => {
onUpdatePage(currentPageConfig.id, { name: currentPageConfig.name, icon: emoji });
@@ -27,7 +29,7 @@ const PageIcon = ({ currentPageConfig, onUpdatePage }) => {
<span>{currentPageConfig.icon}</span>
</div>
</div>
{wikiPermission !== 'public' &&
{isDesktop && wikiPermission !== 'public' &&
<UncontrolledPopover
ref={popoverRef}
flip

6
frontend/src/pages/wiki2/wiki-right-header/page-title.css
View File

@@ -1,8 +1,14 @@
.wiki-page-title-wrapper {
position: relative;
width: 100%;
padding: 0 1rem;
}
@media (min-width: 768px) {
.wiki-page-title-wrapper {
padding: 0 142px;
}
}
.wiki-page-icon-wrapper {
margin-top: 12px;

4
frontend/src/pages/wiki2/wiki-right-header/page-title.js
View File

@@ -1,6 +1,7 @@
import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Utils } from '../../../utils/utils';
import { gettext, wikiPermission } from '../../../utils/constants';
import { WIKI_COVER_LIST } from '../constant';
import PageIcon from './page-icon';
@@ -17,6 +18,7 @@ const propTypes = {
const PageTitle = ({ isUpdateBySide, currentPageConfig, onUpdatePage }) => {
const [isShowController, setIsShowController] = useState(false);
const isDesktop = Utils.isDesktop();
const onMouseEnter = useCallback(() => {
setIsShowController(true);
@@ -55,7 +57,7 @@ const PageTitle = ({ isUpdateBySide, currentPageConfig, onUpdatePage }) => {
{currentPageConfig.icon && (
<PageIcon currentPageConfig={currentPageConfig} onUpdatePage={onUpdatePage} />
)}
<div className={classnames('wiki-page-controller', { 'show': isShowController })}>
<div className={classnames('wiki-page-controller', { 'show': isShowController, 'd-none': !isDesktop })}>
{!currentPageConfig.icon && wikiPermission !== 'public' && (
<div className='wiki-page-controller-item' onClick={handleAddIcon}>
<i className='sf3-font sf3-font-icon'></i>

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

@@ -3,7 +3,7 @@ body {
}
.wiki2-main-panel {
width: calc(100% - 300px);
flex: calc(100% - 300px);
display: flex;
flex-direction: column;
min-height: 0;