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

12.0 change edit wiki page style (#6109)

Browse Source 
* 00 change className from app

* change wiki2 side panel style
This commit is contained in:
Michael An
2024-05-24 11:06:54 +08:00
committed by GitHub
parent 6c2af87eac
commit 34582dbf51
19 changed files with 258 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/assets/icons/drag.svg
View File

@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#949494;}
</style>
<title>drag</title>
<desc>Created with Sketch.</desc>
<g id="drag">
<g id="形状结合" transform="translate(8.000000, 3.000000)">
<path class="st0" d="M0,0h6v6H0V0z M10,0h6v6h-6V0z M10,10h6v6h-6V10z M0,10h6v6H0V10z M0,20h6v6H0V20z M10,20h6v6h-6V20z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 675 B

24
frontend/src/assets/icons/wiki-folder.svg Normal file
View File

@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#949494;}
</style>
<g>
<path id="path-1" class="st0" d="M28.8,12.8H3.2v-8c0-0.9,0.5-1.6,1.4-1.6H10c0.6,0,1.2,0.3,1.4,0.9l1.8,3.7
c0.5,1.1,1.7,1.8,2.9,1.8H27c0.9,0,1.8,0.7,1.8,1.6V12.8z M28.8,27.2c0,0.9-0.9,1.6-1.8,1.6H4.6c-0.9,0-1.4-0.7-1.4-1.6V16h25.6
V27.2z M28.6,6.4H17.8c-1.2,0-2.3-0.7-2.9-1.8l-1.4-2.9C13,0.7,11.9,0,10.6,0H3C1.3,0,0,1.4,0,3.2v25.6C0,30.6,1.3,32,3,32h25.6
c1.8,0,3.4-1.4,3.4-3.2V9.6C32,7.8,30.4,6.4,28.6,6.4L28.6,6.4z"/>
</g>
<title>folder</title>
<g id="folder">
<g>
<path id="path-1_1_" class="st1" d="M28.8,12.8H3.2v-8c0-0.9,0.5-1.6,1.4-1.6H10c0.6,0,1.2,0.3,1.4,0.9l1.8,3.7
c0.5,1.1,1.7,1.8,2.9,1.8H27c0.9,0,1.8,0.7,1.8,1.6V12.8z M28.8,27.2c0,0.9-0.9,1.6-1.8,1.6H4.6c-0.9,0-1.4-0.7-1.4-1.6V16h25.6
V27.2z M28.6,6.4H17.8c-1.2,0-2.3-0.7-2.9-1.8l-1.4-2.9C13,0.7,11.9,0,10.6,0H3C1.3,0,0,1.4,0,3.2v25.6C0,30.6,1.3,32,3,32h25.6
c1.8,0,3.4-1.4,3.4-3.2V9.6C32,7.8,30.4,6.4,28.6,6.4L28.6,6.4z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
frontend/src/pages/wiki2/constant.js Normal file
View File

@@ -0,0 +1,4 @@
const FOLDER = 'folder';
const PAGE = 'page';
export { FOLDER, PAGE };

45
frontend/src/pages/wiki2/css/view-structure.css
View File

@@ -1,5 +1,5 @@
.view-structure { .view-structure {
height: calc(100% - 50px); height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -12,7 +12,6 @@
} }
.view-structure-body { .view-structure-body {
margin-top: 10px;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
overflow: auto; overflow: auto;
user-select: none; user-select: none;
@@ -65,13 +64,21 @@
font-weight: 500; font-weight: 500;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #fff; border-radius: 3px;
background-color: #F7F7F5;
}
.view-structure .view-item.selected-view {
background-color: #EDEDEA;
} }
.view-structure .view-item.selected-view,
.view-structure .view-folder-wrapper:hover, .view-structure .view-folder-wrapper:hover,
.view-structure .view-item:hover { .view-structure .view-item:hover {
background-color: #f5f5f5; background-color: #EFEFED;
}
.view-structure .view-item.selected-view:hover {
background-color: #E6E6E4;
} }
.view-structure .folder-main, .view-structure .folder-main,
@@ -87,24 +94,6 @@
padding-left: 20px; padding-left: 20px;
} }
.view-structure .rdg-drag-handle {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
.view-structure .rdg-drag-handle:hover {
cursor: move;
cursor: grab;
}
.view-structure .view-folder-wrapper:hover .rdg-drag-handle,
.view-structure .view-item:hover .rdg-drag-handle {
visibility: visible;
}
.view-structure .view-folder-wrapper .icon-expand-folder { .view-structure .view-folder-wrapper .icon-expand-folder {
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
@@ -185,6 +174,10 @@
user-select: none; user-select: none;
} }
.view-structure-footer:hover {
background-color: #EFEFED;
}
.view-structure-footer.return-to-app { .view-structure-footer.return-to-app {
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -222,9 +215,10 @@
} }
.view-structure-footer .add-view-btn { .view-structure-footer .add-view-btn {
padding-left: 20px; padding: 0 12px;
border-top: none;
height: 40px; height: 40px;
border-top: none;
background-color: transparent;
} }
.view-structure-footer .add-view-btn .dtable-icon-add-table { .view-structure-footer .add-view-btn .dtable-icon-add-table {
@@ -380,7 +374,6 @@
.view-structure-light.view-structure .view-folder .seafile-multicolor-icon-more-level, .view-structure-light.view-structure .view-folder .seafile-multicolor-icon-more-level,
.view-structure-light.view-structure .view-folder .icon-expand-folder { .view-structure-light.view-structure .view-folder .icon-expand-folder {
color: #666; color: #666;
margin-left: 4px;
} }
.view-structure .view-folder-wrapper.can-drop-top::before { .view-structure .view-folder-wrapper.can-drop-top::before {

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

@@ -214,7 +214,6 @@ class Wiki extends Component {
this.removePythonWrapper(); this.removePythonWrapper();
wikiAPI.getWiki2FileContent(wikiId, filePath).then(res => { wikiAPI.getWiki2FileContent(wikiId, filePath).then(res => {
let data = res.data; let data = res.data;
this.setState({ this.setState({
isDataLoading: false, isDataLoading: false,
content: data.content, content: data.content,
@@ -605,6 +604,8 @@ class Wiki extends Component {
/> />
<MainPanel <MainPanel
path={this.state.path} path={this.state.path}
config={this.state.config}
currentPageId={this.state.currentPageId}
pathExist={this.state.pathExist} pathExist={this.state.pathExist}
isViewFile={this.state.isViewFile} isViewFile={this.state.isViewFile}
isDataLoading={this.state.isDataLoading} isDataLoading={this.state.isDataLoading}

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

@@ -1,15 +1,11 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { SdocWikiViewer } from '@seafile/sdoc-editor'; import { SdocWikiViewer } from '@seafile/sdoc-editor';
import { gettext, repoID, siteRoot, username, isWiki2 } from '../../utils/constants'; import { gettext, repoID, siteRoot, username } from '../../utils/constants';
import SeafileMarkdownViewer from '../../components/seafile-markdown-viewer';
import Loading from '../../components/loading'; import Loading from '../../components/loading';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
// import Search from '../../components/search/search';
import Notification from '../../components/common/notification';
import Account from '../../components/common/account'; import Account from '../../components/common/account';
import WikiTopNav from './top-nav';
import './wiki.css';
const propTypes = { const propTypes = {
path: PropTypes.string.isRequired, path: PropTypes.string.isRequired,
@@ -26,6 +22,8 @@ const propTypes = {
onLinkClick: PropTypes.func.isRequired, onLinkClick: PropTypes.func.isRequired,
seadoc_access_token: PropTypes.string, seadoc_access_token: PropTypes.string,
assets_url: PropTypes.string, assets_url: PropTypes.string,
config: PropTypes.object,
currentPageId: PropTypes.string,
}; };
class MainPanel extends Component { class MainPanel extends Component {
@@ -110,57 +108,21 @@ class MainPanel extends Component {
const editorContent = content && JSON.parse(content); const editorContent = content && JSON.parse(content);
const isReadOnly = !(permission === 'rw'); const isReadOnly = !(permission === 'rw');
return ( return (
<div className="main-panel wiki-main-panel" style={{ flex: isWiki2 ? '1 0 76%' : '1 0 80%' }}> <div className="wiki2-main-panel">
<div className="main-panel-hide hide">{this.props.content}</div> <div className="main-panel-hide hide">{this.props.content}</div>
<div className={`main-panel-north panel-top ${this.props.permission === 'rw' ? 'border-left-show' : ''}`}> <div className='wiki2-main-panel-north'>
{!username && <WikiTopNav
<Fragment> config={this.props.config}
<div className="cur-view-toolbar"> currentPageId={this.props.currentPageId}
<span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span> />
{this.props.permission == 'rw' && ( {username &&
Utils.isDesktop() ? <Account />
<button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
<span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{ 'fontSize': '1.1rem' }}></span>
)}
</div>
<div className="common-toolbar">
{/* {isPro && (
<Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={gettext('Search files')}/>
)} */}
</div>
</Fragment>
} }
{username && (
<Fragment>
<div className="cur-view-toolbar">
<span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
</div>
<div className="common-toolbar">
{/* {isPro && (
<Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={gettext('Search files')}/>
)} */}
<Notification />
<Account />
</div>
</Fragment>
)}
</div> </div>
<div className="main-panel-center"> <div className="main-panel-center">
<div className={`cur-view-content ${isViewingFile ? 'o-hidden' : ''}`}> <div className={`cur-view-content ${isViewingFile ? 'o-hidden' : ''}`}>
{!this.props.pathExist && errMessage} {!this.props.pathExist && errMessage}
{this.props.pathExist && this.props.isDataLoading && <Loading />} {this.props.pathExist && this.props.isDataLoading && <Loading />}
{/* {isViewingFile && Utils.isMarkdownFile(this.props.path) && (
<SeafileMarkdownViewer
isWiki={true}
path={this.props.path}
repoID={repoID}
markdownContent={content}
isFileLoading={this.props.isDataLoading}
lastModified={this.props.lastModified}
latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick}
/>
)} */}
{isViewingFile && Utils.isSdocFile(this.props.path) && ( {isViewingFile && Utils.isSdocFile(this.props.path) && (
<SdocWikiViewer <SdocWikiViewer
document={editorContent} document={editorContent}

46
frontend/src/pages/wiki2/side-panel.css Normal file
View File

@@ -0,0 +1,46 @@
.wiki2-side-panel {
width: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #F7F7F5;;
border-right: 1px solid #F1F1EF;
}
.wiki2-side-panel .wiki2-side-panel-top {
padding: 8px 20px;
display: flex;
align-items: center;
flex-shrink: 0;
height: 44px;
}
.wiki2-side-panel .wiki2-side-nav {
flex: auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wiki2-side-panel .wiki2-side-nav .wiki2-pages-container {
flex: 1;
overflow: hidden;
padding: 8px;
padding-top: 10px;
}
.wiki2-side-panel .wiki2-side-nav .wiki2-pages-container:hover {
overflow: auto;
}
.wiki2-side-panel .wiki2-side-nav .wiki2-pages-container .tree-view {
margin-left: -10px;
margin-top: 14px;
padding-left: 0;
}
@media (max-width: 767px) {
.wiki2-side-panel {
z-index: 1051;
}
}

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

@@ -15,9 +15,9 @@ import { generateUniqueId, isObjectNotEmpty } from './utils';
import Folder from './models/folder'; import Folder from './models/folder';
import Page from './models/page'; import Page from './models/page';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { FOLDER } from './constant';
export const FOLDER = 'folder'; import './side-panel.css';
export const PAGE = 'page';
const { repoName } = window.wiki.config; const { repoName } = window.wiki.config;
@@ -52,7 +52,7 @@ class SidePanel extends Component {
renderIndexView = () => { renderIndexView = () => {
return ( return (
<div className="wiki-pages-container"> <div className="wiki2-pages-container">
<div style={{ marginTop: '2px' }}></div> <div style={{ marginTop: '2px' }}></div>
<IndexMdViewer <IndexMdViewer
indexContent={this.props.indexContent} indexContent={this.props.indexContent}
@@ -64,7 +64,7 @@ class SidePanel extends Component {
renderTreeView = () => { renderTreeView = () => {
return ( return (
<div className="wiki-pages-container"> <div className="wiki2-pages-container">
{/* {this.props.treeData && ( {/* {this.props.treeData && (
<TreeView <TreeView
treeData={this.props.treeData} treeData={this.props.treeData}
@@ -339,7 +339,7 @@ class SidePanel extends Component {
const { config } = this.props; const { config } = this.props;
const { pages, navigation } = config; const { pages, navigation } = config;
return ( return (
<div className="wiki-pages-container"> <div className="wiki2-pages-container">
<ViewStructure <ViewStructure
isEditMode={isWiki2} isEditMode={isWiki2}
navigation={navigation} navigation={navigation}
@@ -392,11 +392,11 @@ class SidePanel extends Component {
render() { render() {
return ( return (
<div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '' : 'left-zero'}`}> <div className={`wiki2-side-panel${this.props.closeSideBar ? '' : ' left-zero'}`}>
<div className="side-panel-top panel-top"> <div className="wiki2-side-panel-top">
<h4 className="ml-0 mb-0 text-truncate" title={repoName}>{repoName}</h4> <h4 className="text-truncate ml-0 mb-0" title={repoName}>{repoName}</h4>
</div> </div>
<div id="side-nav" className="wiki-side-nav" role="navigation"> <div className="wiki2-side-nav">
{this.renderContent()} {this.renderContent()}
</div> </div>
</div> </div>

21
frontend/src/pages/wiki2/top-nav/index.css Normal file
View File

@@ -0,0 +1,21 @@
.wiki2-top-nav .wiki2-top-nav-item {
align-items: center;
padding: 2px 6px;
}
.wiki2-top-nav>div:not(.wiki2-top-nav-item) {
margin: 2px 2px 0 2px;
}
.wiki2-top-nav .wiki2-top-nav-item:hover {
background-color: #EFEFEF;
border-radius: 3px;
cursor: pointer;
}
.wiki2-top-nav .wiki2-top-nav-item .nav-item-icon {
width: 16px;
height: 16px;
margin-left: 0;
margin-right: 4px;
}

38
frontend/src/pages/wiki2/top-nav/index.jsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import PropTypes from 'prop-types';
import NavItemIcon from '../view-structure/nav-item-icon';
import './index.css';
function WikiTopNav({ config, currentPageId }) {
const { navigation, pages } = config;
const folder = navigation.find(item => {
return item.type === 'folder' && item.children && item.children.find(item => item.id === currentPageId);
});
const page = pages.find(page => page.id === currentPageId);
return (
<div className="wiki2-top-nav d-flex">
{folder &&
<>
<div className='wiki2-top-nav-item d-flex'>
<NavItemIcon symbol={'wiki-folder'} disable={true} />
{folder.name}
</div>
<div>/</div>
</>
}
{page &&
<div className='wiki2-top-nav-item d-flex'>
<NavItemIcon symbol={'file'} disable={true} />
{page.name}
</div>
}
</div>
);
}
WikiTopNav.propTypes = {
config: PropTypes.object,
currentPageId: PropTypes.string,
};
export default WikiTopNav;

40
frontend/src/pages/wiki2/view-structure/folders/folder-item.js
View File

@@ -5,9 +5,8 @@ import FolderOperationDropdownMenu from './folder-operation-dropdownmenu';
import ViewItem from '../views/view-item'; import ViewItem from '../views/view-item';
import DraggedFolderItem from './dragged-folder-item'; import DraggedFolderItem from './dragged-folder-item';
import ViewEditPopover from '../../view-structure/views/view-edit-popover'; import ViewEditPopover from '../../view-structure/views/view-edit-popover';
import Icon from '../../../../components/icon'; import { FOLDER } from '../../constant';
import NavItemIcon from '../nav-item-icon';
const FOLDER = 'folder';
class FolderItem extends Component { class FolderItem extends Component {
@@ -18,6 +17,7 @@ class FolderItem extends Component {
isEditing: false, isEditing: false,
icon: icon || '', icon: icon || '',
name: name || '', name: name || '',
isMouseEnter: false,
}; };
} }
@@ -178,43 +178,49 @@ class FolderItem extends Component {
return height; return height;
}; };
onMouseEnter = () => {
this.setState({ isMouseEnter: true });
};
onMouseLeave = () => {
this.setState({ isMouseEnter: false });
};
render() { render() {
const { const {
connectDropTarget, connectDragPreview, connectDragSource, isOver, canDrop, connectDropTarget, connectDragPreview, connectDragSource, isOver, canDrop,
isEditMode, folder, tableGridsLength, id_view_map, isOnlyOneView, layerDragProps, isEditMode, folder, tableGridsLength, id_view_map, isOnlyOneView, layerDragProps,
} = this.props; } = this.props;
const { isEditing } = this.state; const { isEditing } = this.state;
const { id: folderId, name, children, icon } = folder; const { id: folderId, name, children } = folder;
const folded = this.props.getFolderState(folderId); const folded = this.props.getFolderState(folderId);
let viewEditorId = `folder-item-${folderId}`; let viewEditorId = `folder-item-${folderId}`;
let fn = isEditMode ? connectDragSource : (argu) => {argu;};
return ( return (
<div <div
className={classnames('view-folder', { 'readonly': !isEditMode })} className={classnames('view-folder', { 'readonly': !isEditMode })}
ref={ref => this.foldRef = ref} ref={ref => this.foldRef = ref}
onClick={this.onToggleExpandFolder} onClick={this.onToggleExpandFolder}
> >
{connectDropTarget( {fn(connectDropTarget(
connectDragPreview( connectDragPreview(
<div <div
className={this.getFolderClassName(layerDragProps, isOver && canDrop)} className={this.getFolderClassName(layerDragProps, isOver && canDrop)}
ref={ref => this.foldWrapprRef = ref} ref={ref => this.foldWrapprRef = ref}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
> >
<div className='folder-main'> <div className='folder-main'>
{isEditMode ?
connectDragSource(
<div className="rdg-drag-handle">
<Icon symbol={'drag'}/>
</div>
)
:
<div className="rdg-drag-handle"></div>
}
<div <div
className='folder-content' className='folder-content'
style={{ marginLeft: `${(this.props.foldersStr.split('-').length - 1) * 16}px` }} style={{ marginLeft: `${(this.props.foldersStr.split('-').length - 1) * 16}px` }}
id={viewEditorId} id={viewEditorId}
> >
{icon && <svg className="mr-2 svg-item"><use xlinkHref={`#${icon}`}/></svg>} {this.state.isMouseEnter ?
<NavItemIcon className="icon-expand-folder" symbol={folded ? 'right-slide' : 'drop-down'}/>
:
<NavItemIcon symbol={'wiki-folder'} disable={true} />
}
<span className='folder-name text-truncate' title={name}>{name}</span> <span className='folder-name text-truncate' title={name}>{name}</span>
{isEditing && {isEditing &&
<ViewEditPopover <ViewEditPopover
@@ -237,10 +243,10 @@ class FolderItem extends Component {
folderId={folderId} folderId={folderId}
/> />
} }
<Icon className="icon-expand-folder" symbol={folded ? 'left-slide' : 'drop-down'}/>
</div> </div>
) )
)} ))
}
<div <div
className="view-folder-children" className="view-folder-children"
style={{ height: this.getFolderChildrenHeight() }} style={{ height: this.getFolderChildrenHeight() }}

14
frontend/src/pages/wiki2/view-structure/nav-item-icon.css Normal file
View File

@@ -0,0 +1,14 @@
.nav-item-icon {
width: 20px;
height: 20px;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 8px;
margin-right: 8px;
}
.nav-item-icon:hover:not(.nav-item-icon-disable) {
background-color: #DFDFDD;
}

21
frontend/src/pages/wiki2/view-structure/nav-item-icon.jsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../../../components/icon';
import classNames from 'classnames';
import './nav-item-icon.css';
function NavItemIcon({ symbol, className, disable }) {
return (
<div className={classNames('nav-item-icon', {'nav-item-icon-disable': disable})}>
<Icon symbol={symbol} className={className} />
</div>
);
}
NavItemIcon.propTypes = {
symbol: PropTypes.string.isRequired,
className: PropTypes.string,
disable: PropTypes.bool,
};
export default NavItemIcon;

3
frontend/src/pages/wiki2/view-structure/page-utils.js
View File

@@ -1,5 +1,4 @@
const FOLDER = 'folder'; import { FOLDER, PAGE } from '../constant';
const PAGE = 'page';
export default class PageUtils { export default class PageUtils {

3
frontend/src/pages/wiki2/view-structure/view-structure.js
View File

@@ -11,9 +11,6 @@ import { repoID } from '../../../utils/constants';
import '../css/view-structure.css'; import '../css/view-structure.css';
export const FOLDER = 'folder';
export const PAGE = 'page';
class ViewStructure extends Component { class ViewStructure extends Component {
static propTypes = { static propTypes = {

18
frontend/src/pages/wiki2/view-structure/views/view-item.js
View File

@@ -7,6 +7,7 @@ import PageDropdownMenu from './page-dropdownmenu';
import DeleteDialog from './delete-dialog'; import DeleteDialog from './delete-dialog';
import { DRAGGED_FOLDER_MODE, DRAGGED_VIEW_MODE } from '../constant'; import { DRAGGED_FOLDER_MODE, DRAGGED_VIEW_MODE } from '../constant';
import Icon from '../../../../components/icon'; import Icon from '../../../../components/icon';
import NavItemIcon from '../nav-item-icon';
const dragSource = { const dragSource = {
beginDrag: props => { beginDrag: props => {
@@ -217,8 +218,9 @@ class ViewItem extends Component {
viewCanDrop = isOverView && !isDragging; viewCanDrop = isOverView && !isDragging;
} }
let viewEditorId = `view-editor-${view.id}`; let viewEditorId = `view-editor-${view.id}`;
let fn = isEditMode ? connectDragSource : (argu) => {argu;};
return connectDropTarget( return fn(connectDropTarget(
connectDragPreview( connectDragPreview(
<div <div
className={classnames('view-item', 'view', className={classnames('view-item', 'view',
@@ -233,17 +235,9 @@ class ViewItem extends Component {
id={viewEditorId} id={viewEditorId}
> >
<div className="view-item-main" onClick={isShowViewEditor ? () => {} : this.props.onSelectView}> <div className="view-item-main" onClick={isShowViewEditor ? () => {} : this.props.onSelectView}>
{(isEditMode && !isSpecialInstance) ?
connectDragSource(
<div className="rdg-drag-handle">
<Icon symbol={'drag'}/>
</div>
)
:
<div className="rdg-drag-handle"></div>
}
<div className='view-content' style={foldersStr ? { marginLeft: `${(foldersStr.split('-').length) * 24}px` } : {}}> <div className='view-content' style={foldersStr ? { marginLeft: `${(foldersStr.split('-').length) * 24}px` } : {}}>
{this.renderIcon(view.icon)} <NavItemIcon symbol={'file'} disable={true} />
{/* {this.renderIcon(view.icon)} */}
<span className="view-title text-truncate" title={view.name}>{view.name}</span> <span className="view-title text-truncate" title={view.name}>{view.name}</span>
{isShowViewEditor && ( {isShowViewEditor && (
<ViewEditPopover <ViewEditPopover
@@ -290,7 +284,7 @@ class ViewItem extends Component {
} }
</div> </div>
) )
); ));
} }
} }

12
frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css
View File

@@ -1,4 +1,4 @@
.seatable-app-universal-left-bar { .wiki-left-bar {
flex: 0 0 4%; flex: 0 0 4%;
width: 50px; width: 50px;
background: #f5f5f5; background: #f5f5f5;
@@ -6,24 +6,24 @@
z-index: 101; z-index: 101;
} }
.seatable-app-universal-left-bar .left-bar-button { .wiki-left-bar .left-bar-button {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
} }
.seatable-app-universal-left-bar .left-bar-button:hover { .wiki-left-bar .left-bar-button:hover {
cursor: pointer; cursor: pointer;
} }
.seatable-app-universal-left-bar .left-bar-button .seafile-multicolor-icon { .wiki-left-bar .left-bar-button .seafile-multicolor-icon {
font-size: 22px; font-size: 22px;
} }
.seatable-app-universal-left-bar .left-bar-button .seafile-multicolor-icon { .wiki-left-bar .left-bar-button .seafile-multicolor-icon {
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }
.seatable-app-universal-left-bar .left-bar-button:hover .seafile-multicolor-icon { .wiki-left-bar .left-bar-button:hover .seafile-multicolor-icon {
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9);
} }

2
frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js
View File

@@ -35,7 +35,7 @@ export default class WikiLeftBar extends React.Component {
render() { render() {
return ( return (
<div className="seatable-app-universal-left-bar"> <div className="wiki-left-bar">
<Icon onClick={this.openAppSettingsDialog} iconClass="wiki-settings" tipText={gettext('Settings')}/> <Icon onClick={this.openAppSettingsDialog} iconClass="wiki-settings" tipText={gettext('Settings')}/>
<Icon onClick={this.openPreviewApp} iconClass="wiki-preview" tipText={gettext('Go to wiki page to preview')}/> <Icon onClick={this.openPreviewApp} iconClass="wiki-preview" tipText={gettext('Go to wiki page to preview')}/>
{this.state.isShowSettingsDialog && {this.state.isShowSettingsDialog &&

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

@@ -2,33 +2,6 @@ body {
overflow: hidden; overflow: hidden;
} }
.wiki-side-panel .panel-top {
background: #fff;
display: flex;
align-items: center;
}
.wiki-side-nav {
flex: auto;
display: flex;
flex-direction: column;
overflow: hidden;
/* for ff */
border-right: 1px solid #eee;
}
.wiki-pages-heading {
position: relative;
font-size: 1rem;
font-weight: normal;
padding: 0.5rem 0 0.5rem 2rem;
border-bottom: 1px solid #e8e8e8;
line-height: 1.5;
height: 40px;
background-color: #f9f9f9;
margin-bottom: 0;
}
.heading-icon { .heading-icon {
position: absolute; position: absolute;
right: 1rem; right: 1rem;
@@ -37,49 +10,25 @@ body {
font-size: 0.8125rem; font-size: 0.8125rem;
} }
.wiki-pages-container {
flex: 1;
overflow: hidden;
padding-bottom: 10px;
}
.wiki-pages-container:hover {
overflow: auto;
}
.wiki-pages-container .tree-view {
margin-left: -10px;
margin-top: 14px;
padding-left: 0;
}
img[src=""] { img[src=""] {
opacity: 0; opacity: 0;
} }
.wiki-side-panel { .wiki2-main-panel {
flex: 0 0 20%; width: calc(100% - 300px);
display: flex;
flex-direction: column;
overflow: hidden;
}
@media (max-width: 767px) {
.wiki-side-panel {
z-index: 1051;
}
}
.wiki-main-panel {
flex: 1 0 80%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
} }
.wiki-main-panel .main-panel-north { .wiki2-main-panel .wiki2-main-panel-north {
background-color: #fff; height: 44px;
position: relative;
padding: 0.5rem 1rem;
display: flex;
z-index: 100;
justify-content: space-between;
} }
.cur-view-content .wiki-page-container { .cur-view-content .wiki-page-container {
@@ -114,7 +63,7 @@ img[src=""] {
/* reset article h1 */ /* reset article h1 */
.wiki-main-panel .article h1 { .wiki2-main-panel .article h1 {
margin-top: 0; margin-top: 0;
} }
@@ -278,4 +227,5 @@ img[src=""] {
width: 100%; width: 100%;
box-shadow: none; box-shadow: none;
border: none; border: none;
padding: 52px 142px 0;
} }