+
+
{repoName}
-
diff --git a/frontend/src/pages/wiki2/top-nav/index.css b/frontend/src/pages/wiki2/top-nav/index.css
new file mode 100644
index 0000000000..6ee1e51879
--- /dev/null
+++ b/frontend/src/pages/wiki2/top-nav/index.css
@@ -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;
+}
diff --git a/frontend/src/pages/wiki2/top-nav/index.jsx b/frontend/src/pages/wiki2/top-nav/index.jsx
new file mode 100644
index 0000000000..a2c5a10e07
--- /dev/null
+++ b/frontend/src/pages/wiki2/top-nav/index.jsx
@@ -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 (
+
+ {folder &&
+ <>
+
+
+ {folder.name}
+
+
/
+
+ }
+ {page &&
+
+
+ {page.name}
+
+ }
+
+ );
+}
+
+WikiTopNav.propTypes = {
+ config: PropTypes.object,
+ currentPageId: PropTypes.string,
+};
+
+export default WikiTopNav;
diff --git a/frontend/src/pages/wiki2/view-structure/folders/folder-item.js b/frontend/src/pages/wiki2/view-structure/folders/folder-item.js
index 9d0a018cd5..b60c224a6f 100644
--- a/frontend/src/pages/wiki2/view-structure/folders/folder-item.js
+++ b/frontend/src/pages/wiki2/view-structure/folders/folder-item.js
@@ -5,9 +5,8 @@ import FolderOperationDropdownMenu from './folder-operation-dropdownmenu';
import ViewItem from '../views/view-item';
import DraggedFolderItem from './dragged-folder-item';
import ViewEditPopover from '../../view-structure/views/view-edit-popover';
-import Icon from '../../../../components/icon';
-
-const FOLDER = 'folder';
+import { FOLDER } from '../../constant';
+import NavItemIcon from '../nav-item-icon';
class FolderItem extends Component {
@@ -18,6 +17,7 @@ class FolderItem extends Component {
isEditing: false,
icon: icon || '',
name: name || '',
+ isMouseEnter: false,
};
}
@@ -178,43 +178,49 @@ class FolderItem extends Component {
return height;
};
+ onMouseEnter = () => {
+ this.setState({ isMouseEnter: true });
+ };
+
+ onMouseLeave = () => {
+ this.setState({ isMouseEnter: false });
+ };
+
render() {
const {
connectDropTarget, connectDragPreview, connectDragSource, isOver, canDrop,
isEditMode, folder, tableGridsLength, id_view_map, isOnlyOneView, layerDragProps,
} = this.props;
const { isEditing } = this.state;
- const { id: folderId, name, children, icon } = folder;
+ const { id: folderId, name, children } = folder;
const folded = this.props.getFolderState(folderId);
let viewEditorId = `folder-item-${folderId}`;
+ let fn = isEditMode ? connectDragSource : (argu) => {argu;};
return (
this.foldRef = ref}
onClick={this.onToggleExpandFolder}
>
- {connectDropTarget(
+ {fn(connectDropTarget(
connectDragPreview(
this.foldWrapprRef = ref}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.onMouseLeave}
>
- {isEditMode ?
- connectDragSource(
-
-
-
- )
- :
-
- }
- {icon && }
+ {this.state.isMouseEnter ?
+
+ :
+
+ }
{name}
{isEditing &&
}
-
)
- )}
+ ))
+ }
+
+
+ );
+}
+
+NavItemIcon.propTypes = {
+ symbol: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ disable: PropTypes.bool,
+};
+
+export default NavItemIcon;
diff --git a/frontend/src/pages/wiki2/view-structure/page-utils.js b/frontend/src/pages/wiki2/view-structure/page-utils.js
index 0182f06c7a..a4d3b8aeb5 100644
--- a/frontend/src/pages/wiki2/view-structure/page-utils.js
+++ b/frontend/src/pages/wiki2/view-structure/page-utils.js
@@ -1,5 +1,4 @@
-const FOLDER = 'folder';
-const PAGE = 'page';
+import { FOLDER, PAGE } from '../constant';
export default class PageUtils {
diff --git a/frontend/src/pages/wiki2/view-structure/view-structure.js b/frontend/src/pages/wiki2/view-structure/view-structure.js
index 729eab9411..3fc0ef2c8b 100644
--- a/frontend/src/pages/wiki2/view-structure/view-structure.js
+++ b/frontend/src/pages/wiki2/view-structure/view-structure.js
@@ -11,9 +11,6 @@ import { repoID } from '../../../utils/constants';
import '../css/view-structure.css';
-export const FOLDER = 'folder';
-export const PAGE = 'page';
-
class ViewStructure extends Component {
static propTypes = {
diff --git a/frontend/src/pages/wiki2/view-structure/views/view-item.js b/frontend/src/pages/wiki2/view-structure/views/view-item.js
index d04ce89d98..d5a773870c 100644
--- a/frontend/src/pages/wiki2/view-structure/views/view-item.js
+++ b/frontend/src/pages/wiki2/view-structure/views/view-item.js
@@ -7,6 +7,7 @@ import PageDropdownMenu from './page-dropdownmenu';
import DeleteDialog from './delete-dialog';
import { DRAGGED_FOLDER_MODE, DRAGGED_VIEW_MODE } from '../constant';
import Icon from '../../../../components/icon';
+import NavItemIcon from '../nav-item-icon';
const dragSource = {
beginDrag: props => {
@@ -217,8 +218,9 @@ class ViewItem extends Component {
viewCanDrop = isOverView && !isDragging;
}
let viewEditorId = `view-editor-${view.id}`;
+ let fn = isEditMode ? connectDragSource : (argu) => {argu;};
- return connectDropTarget(
+ return fn(connectDropTarget(
connectDragPreview(
{} : this.props.onSelectView}>
- {(isEditMode && !isSpecialInstance) ?
- connectDragSource(
-
-
-
- )
- :
-
- }
- {this.renderIcon(view.icon)}
+
+ {/* {this.renderIcon(view.icon)} */}
{view.name}
{isShowViewEditor && (
)
- );
+ ));
}
}
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css b/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css
index 619f3b5bf5..924fffd8ef 100644
--- a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css
+++ b/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css
@@ -1,4 +1,4 @@
-.seatable-app-universal-left-bar {
+.wiki-left-bar {
flex: 0 0 4%;
width: 50px;
background: #f5f5f5;
@@ -6,24 +6,24 @@
z-index: 101;
}
-.seatable-app-universal-left-bar .left-bar-button {
+.wiki-left-bar .left-bar-button {
height: 50px;
line-height: 50px;
text-align: center;
}
-.seatable-app-universal-left-bar .left-bar-button:hover {
+.wiki-left-bar .left-bar-button:hover {
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;
}
-.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);
}
-.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);
}
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js b/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js
index e2773eebba..714c5c5a22 100644
--- a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js
+++ b/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js
@@ -35,7 +35,7 @@ export default class WikiLeftBar extends React.Component {
render() {
return (
-
+
{this.state.isShowSettingsDialog &&
diff --git a/frontend/src/pages/wiki2/wiki.css b/frontend/src/pages/wiki2/wiki.css
index 59d0fda691..731f47ac43 100644
--- a/frontend/src/pages/wiki2/wiki.css
+++ b/frontend/src/pages/wiki2/wiki.css
@@ -2,33 +2,6 @@ body {
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 {
position: absolute;
right: 1rem;
@@ -37,49 +10,25 @@ body {
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=""] {
opacity: 0;
}
-.wiki-side-panel {
- flex: 0 0 20%;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-
-@media (max-width: 767px) {
- .wiki-side-panel {
- z-index: 1051;
- }
-}
-
-.wiki-main-panel {
- flex: 1 0 80%;
+.wiki2-main-panel {
+ width: calc(100% - 300px);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
-.wiki-main-panel .main-panel-north {
- background-color: #fff;
+.wiki2-main-panel .wiki2-main-panel-north {
+ height: 44px;
+ position: relative;
+ padding: 0.5rem 1rem;
+ display: flex;
+ z-index: 100;
+ justify-content: space-between;
}
.cur-view-content .wiki-page-container {
@@ -114,7 +63,7 @@ img[src=""] {
/* reset article h1 */
-.wiki-main-panel .article h1 {
+.wiki2-main-panel .article h1 {
margin-top: 0;
}
@@ -278,4 +227,5 @@ img[src=""] {
width: 100%;
box-shadow: none;
border: none;
+ padding: 52px 142px 0;
}