Cleanup
This commit is contained in:
Jori Lallo
parent
43a312825b
commit
42e54a3a54
@ -99,7 +99,8 @@ export default class MarkdownEditor extends Component {
|
|||||||
render = () => {
|
render = () => {
|
||||||
return (
|
return (
|
||||||
<span>
|
<span>
|
||||||
<ClickablePadding onClick={this.focusAtStart} />
|
{!this.props.readOnly &&
|
||||||
|
<ClickablePadding onClick={this.focusAtStart} />}
|
||||||
<Toolbar state={this.state.state} onChange={this.onChange} />
|
<Toolbar state={this.state.state} onChange={this.onChange} />
|
||||||
<Editor
|
<Editor
|
||||||
ref={ref => (this.editor = ref)}
|
ref={ref => (this.editor = ref)}
|
||||||
@ -114,7 +115,8 @@ export default class MarkdownEditor extends Component {
|
|||||||
onSave={this.props.onSave}
|
onSave={this.props.onSave}
|
||||||
readOnly={this.props.readOnly}
|
readOnly={this.props.readOnly}
|
||||||
/>
|
/>
|
||||||
<ClickablePadding onClick={this.focusAtEnd} grow />
|
{!this.props.readOnly &&
|
||||||
|
<ClickablePadding onClick={this.focusAtEnd} grow />}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -72,9 +72,6 @@ type Props = {
|
|||||||
<Header>
|
<Header>
|
||||||
<Flex align="center">
|
<Flex align="center">
|
||||||
<LogoLink to="/">Atlas</LogoLink>
|
<LogoLink to="/">Atlas</LogoLink>
|
||||||
<Title>
|
|
||||||
{this.props.title}
|
|
||||||
</Title>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
<Flex>
|
<Flex>
|
||||||
<Flex>
|
<Flex>
|
||||||
@ -120,21 +117,23 @@ type Props = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Container = styled(Flex)`
|
const Container = styled(Flex)`
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Header = styled(Flex)`
|
const Header = styled(Flex)`
|
||||||
display: flex;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: #fff;
|
|
||||||
height: ${headerHeight};
|
height: ${headerHeight};
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@ -148,18 +147,6 @@ const LogoLink = styled(Link)`
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Title = styled.span`
|
|
||||||
color: #ccc;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: ${textColor};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Search = styled(Flex)`
|
const Search = styled(Flex)`
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
padding: 15px 5px 0 5px;
|
padding: 15px 5px 0 5px;
|
||||||
|
|||||||
@ -1,139 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import styles from './Tree.scss';
|
|
||||||
import classNames from 'classnames/bind';
|
|
||||||
const cx = classNames.bind(styles);
|
|
||||||
|
|
||||||
class Node extends React.Component {
|
|
||||||
displayName: 'UITreeNode';
|
|
||||||
|
|
||||||
renderCollapse = () => {
|
|
||||||
const index = this.props.index;
|
|
||||||
|
|
||||||
if (index.children && index.children.length) {
|
|
||||||
const collapsed = index.node.collapsed;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={cx(
|
|
||||||
styles.collapse,
|
|
||||||
collapsed ? styles.caretRight : styles.caretDown
|
|
||||||
)}
|
|
||||||
onMouseDown={function(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
onClick={this.handleCollapse}
|
|
||||||
>
|
|
||||||
<img alt="Expand" src={require('./assets/chevron.svg')} />
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
renderChildren = () => {
|
|
||||||
const index = this.props.index;
|
|
||||||
const tree = this.props.tree;
|
|
||||||
const dragging = this.props.dragging;
|
|
||||||
|
|
||||||
if (index.children && index.children.length) {
|
|
||||||
const childrenStyles = {};
|
|
||||||
|
|
||||||
if (!this.props.rootNode) {
|
|
||||||
if (index.node.collapsed) childrenStyles.display = 'none';
|
|
||||||
childrenStyles.paddingLeft = `${this.props.paddingLeft}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.children} style={childrenStyles}>
|
|
||||||
{index.children.map(child => {
|
|
||||||
const childIndex = tree.getIndex(child);
|
|
||||||
return (
|
|
||||||
<Node
|
|
||||||
tree={tree}
|
|
||||||
index={childIndex}
|
|
||||||
key={childIndex.id}
|
|
||||||
dragging={dragging}
|
|
||||||
allowUpdates={this.props.allowUpdates}
|
|
||||||
paddingLeft={this.props.paddingLeft}
|
|
||||||
onCollapse={this.props.onCollapse}
|
|
||||||
onDragStart={this.props.onDragStart}
|
|
||||||
history={this.props.history}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
isModifying = () => {
|
|
||||||
return this.props.allowUpdates && !this.props.rootNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
onClick = () => {
|
|
||||||
const index = this.props.index;
|
|
||||||
const node = index.node;
|
|
||||||
if (!this.isModifying()) this.props.history.push(node.url);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const index = this.props.index;
|
|
||||||
const dragging = this.props.dragging;
|
|
||||||
const node = index.node;
|
|
||||||
const style = {};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cx(styles.node, {
|
|
||||||
placeholder: index.id === dragging,
|
|
||||||
rootNode: this.props.rootNode,
|
|
||||||
})}
|
|
||||||
style={style}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={styles.inner}
|
|
||||||
ref="inner"
|
|
||||||
onMouseDown={
|
|
||||||
this.props.rootNode || !this.props.allowUpdates
|
|
||||||
? e => e.stopPropagation()
|
|
||||||
: this.handleMouseDown
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{!this.props.rootNode && this.renderCollapse()}
|
|
||||||
<span
|
|
||||||
className={cx(styles.nodeLabel, {
|
|
||||||
rootLabel: this.props.rootNode,
|
|
||||||
isModifying: this.isModifying(),
|
|
||||||
})}
|
|
||||||
onClick={this.onClick}
|
|
||||||
>
|
|
||||||
{node.title}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{this.renderChildren()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCollapse = e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
const nodeId = this.props.index.id;
|
|
||||||
if (this.props.onCollapse) this.props.onCollapse(nodeId);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleMouseDown = e => {
|
|
||||||
const nodeId = this.props.index.id;
|
|
||||||
const dom = this.refs.inner;
|
|
||||||
|
|
||||||
if (this.props.onDragStart) {
|
|
||||||
this.props.onDragStart(nodeId, dom, e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = Node;
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
const Tree = require('js-tree');
|
|
||||||
const proto = Tree.prototype;
|
|
||||||
|
|
||||||
proto.updateNodesPosition = function() {
|
|
||||||
let top = 1;
|
|
||||||
let left = 1;
|
|
||||||
const root = this.getIndex(1);
|
|
||||||
const self = this;
|
|
||||||
|
|
||||||
root.top = top++;
|
|
||||||
root.left = left++;
|
|
||||||
|
|
||||||
if (root.children && root.children.length) {
|
|
||||||
walk(root.children, root, left, root.node.collapsed);
|
|
||||||
}
|
|
||||||
|
|
||||||
function walk(children, parent, left, collapsed) {
|
|
||||||
let height = 1;
|
|
||||||
children.forEach(id => {
|
|
||||||
const node = self.getIndex(id);
|
|
||||||
if (collapsed) {
|
|
||||||
node.top = null;
|
|
||||||
node.left = null;
|
|
||||||
} else {
|
|
||||||
node.top = top++;
|
|
||||||
node.left = left;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.children && node.children.length) {
|
|
||||||
height += walk(
|
|
||||||
node.children,
|
|
||||||
node,
|
|
||||||
left + 1,
|
|
||||||
collapsed || node.node.collapsed
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
node.height = 1;
|
|
||||||
height += 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (parent.node.collapsed) parent.height = 1;
|
|
||||||
else parent.height = height;
|
|
||||||
return parent.height;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
proto.move = function(fromId, toId, placement) {
|
|
||||||
if (fromId === toId || toId === 1) return;
|
|
||||||
|
|
||||||
const obj = this.remove(fromId);
|
|
||||||
let index = null;
|
|
||||||
|
|
||||||
if (placement === 'before') index = this.insertBefore(obj, toId);
|
|
||||||
else if (placement === 'after') index = this.insertAfter(obj, toId);
|
|
||||||
else if (placement === 'prepend') index = this.prepend(obj, toId);
|
|
||||||
else if (placement === 'append') index = this.append(obj, toId);
|
|
||||||
|
|
||||||
// todo: perf
|
|
||||||
this.updateNodesPosition();
|
|
||||||
return index;
|
|
||||||
};
|
|
||||||
|
|
||||||
proto.getNodeByTop = function(top) {
|
|
||||||
const indexes = this.indexes;
|
|
||||||
for (const id in indexes) {
|
|
||||||
if (indexes.hasOwnProperty(id)) {
|
|
||||||
if (indexes[id].top === top) return indexes[id];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = Tree;
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
@mixin no-select {
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree {
|
|
||||||
@include no-select;
|
|
||||||
padding: 20px 20px 20px 5px;
|
|
||||||
overflow: scroll;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 40px;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0.8;
|
|
||||||
@include no-select;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node {
|
|
||||||
&.placeholder > * {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.placeholder {
|
|
||||||
border: 1px dashed #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapse {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
width: 20px;
|
|
||||||
height: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caretRight {
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-left: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caretDown {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
margin-left: -4px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.node {
|
|
||||||
&.placeholder {
|
|
||||||
border: 1px dashed #1385e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeLabel {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 4px 5px 0;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&.isModifying {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.isActive {
|
|
||||||
background-color: #31363F;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rootLabel {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,275 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
const React = require('react');
|
|
||||||
const Tree = require('./Tree');
|
|
||||||
const Node = require('./Node');
|
|
||||||
|
|
||||||
import styles from './Tree.scss';
|
|
||||||
|
|
||||||
export default React.createClass({
|
|
||||||
displayName: 'UITree',
|
|
||||||
|
|
||||||
propTypes: {
|
|
||||||
tree: React.PropTypes.object.isRequired,
|
|
||||||
paddingLeft: React.PropTypes.number,
|
|
||||||
onCollapse: React.PropTypes.func,
|
|
||||||
allowUpdates: React.PropTypes.bool,
|
|
||||||
history: React.PropTypes.object,
|
|
||||||
},
|
|
||||||
|
|
||||||
getDefaultProps() {
|
|
||||||
return {
|
|
||||||
paddingLeft: 20,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState() {
|
|
||||||
return this.init(this.props);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if (!this._updated) this.setState(this.init(nextProps));
|
|
||||||
else this._updated = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
init(props) {
|
|
||||||
const tree = new Tree(props.tree);
|
|
||||||
tree.isNodeCollapsed = props.isNodeCollapsed;
|
|
||||||
tree.changeNodeCollapsed = props.changeNodeCollapsed;
|
|
||||||
tree.updateNodesPosition();
|
|
||||||
|
|
||||||
return {
|
|
||||||
tree,
|
|
||||||
dragging: {
|
|
||||||
id: null,
|
|
||||||
x: null,
|
|
||||||
y: null,
|
|
||||||
w: null,
|
|
||||||
h: null,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
getDraggingDom() {
|
|
||||||
const tree = this.state.tree;
|
|
||||||
const dragging = this.state.dragging;
|
|
||||||
|
|
||||||
if (dragging && dragging.id) {
|
|
||||||
const draggingIndex = tree.getIndex(dragging.id);
|
|
||||||
const draggingStyles = {
|
|
||||||
top: dragging.y,
|
|
||||||
left: dragging.x,
|
|
||||||
width: dragging.w,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.draggable} style={draggingStyles}>
|
|
||||||
<Node
|
|
||||||
tree={tree}
|
|
||||||
index={draggingIndex}
|
|
||||||
paddingLeft={this.props.paddingLeft}
|
|
||||||
allowUpdates={this.props.allowUpdates}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const tree = this.state.tree;
|
|
||||||
const dragging = this.state.dragging;
|
|
||||||
const draggingDom = this.getDraggingDom();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.tree}>
|
|
||||||
{draggingDom}
|
|
||||||
<Node
|
|
||||||
rootNode
|
|
||||||
tree={tree}
|
|
||||||
index={tree.getIndex(1)}
|
|
||||||
key={1}
|
|
||||||
paddingLeft={this.props.paddingLeft}
|
|
||||||
allowUpdates={this.props.allowUpdates}
|
|
||||||
onDragStart={this.dragStart}
|
|
||||||
onCollapse={this.toggleCollapse}
|
|
||||||
dragging={dragging && dragging.id}
|
|
||||||
history={this.props.history}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
dragStart(id, dom, e) {
|
|
||||||
this.dragging = {
|
|
||||||
id,
|
|
||||||
w: dom.offsetWidth,
|
|
||||||
h: dom.offsetHeight,
|
|
||||||
x: dom.offsetLeft,
|
|
||||||
y: dom.offsetTop,
|
|
||||||
};
|
|
||||||
|
|
||||||
this._startX = dom.offsetLeft;
|
|
||||||
this._startY = dom.offsetTop;
|
|
||||||
this._offsetX = e.clientX;
|
|
||||||
this._offsetY = e.clientY;
|
|
||||||
this._start = true;
|
|
||||||
|
|
||||||
window.addEventListener('mousemove', this.drag);
|
|
||||||
window.addEventListener('mouseup', this.dragEnd);
|
|
||||||
},
|
|
||||||
|
|
||||||
// oh
|
|
||||||
drag(e) {
|
|
||||||
if (this._start) {
|
|
||||||
this.setState({
|
|
||||||
dragging: this.dragging,
|
|
||||||
});
|
|
||||||
this._start = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tree = this.state.tree;
|
|
||||||
const dragging = this.state.dragging;
|
|
||||||
const paddingLeft = this.props.paddingLeft;
|
|
||||||
let newIndex = null;
|
|
||||||
let index = tree.getIndex(dragging.id);
|
|
||||||
const collapsed = index.node.collapsed;
|
|
||||||
|
|
||||||
const _startX = this._startX;
|
|
||||||
const _startY = this._startY;
|
|
||||||
const _offsetX = this._offsetX;
|
|
||||||
const _offsetY = this._offsetY;
|
|
||||||
|
|
||||||
const pos = {
|
|
||||||
x: _startX + e.clientX - _offsetX,
|
|
||||||
y: _startY + e.clientY - _offsetY,
|
|
||||||
};
|
|
||||||
dragging.x = pos.x;
|
|
||||||
dragging.y = pos.y;
|
|
||||||
|
|
||||||
const diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft;
|
|
||||||
const diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h;
|
|
||||||
|
|
||||||
if (diffX < 0) {
|
|
||||||
// left
|
|
||||||
if (index.parent && !index.next) {
|
|
||||||
newIndex = tree.move(index.id, index.parent, 'after');
|
|
||||||
}
|
|
||||||
} else if (diffX > paddingLeft) {
|
|
||||||
// right
|
|
||||||
if (index.prev) {
|
|
||||||
const prevNode = tree.getIndex(index.prev).node;
|
|
||||||
if (!prevNode.collapsed && !prevNode.leaf) {
|
|
||||||
newIndex = tree.move(index.id, index.prev, 'append');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newIndex) {
|
|
||||||
index = newIndex;
|
|
||||||
newIndex.node.collapsed = collapsed;
|
|
||||||
dragging.id = newIndex.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (diffY < 0) {
|
|
||||||
// up
|
|
||||||
const above = tree.getNodeByTop(index.top - 1);
|
|
||||||
newIndex = tree.move(index.id, above.id, 'before');
|
|
||||||
} else if (diffY > dragging.h) {
|
|
||||||
// down
|
|
||||||
if (index.next) {
|
|
||||||
let below = tree.getIndex(index.next);
|
|
||||||
if (below.children && below.children.length && !below.node.collapsed) {
|
|
||||||
newIndex = tree.move(index.id, index.next, 'prepend');
|
|
||||||
} else {
|
|
||||||
newIndex = tree.move(index.id, index.next, 'after');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
let below = tree.getNodeByTop(index.top + index.height);
|
|
||||||
if (below && below.parent !== index.id) {
|
|
||||||
if (below.children && below.children.length) {
|
|
||||||
newIndex = tree.move(index.id, below.id, 'prepend');
|
|
||||||
} else {
|
|
||||||
newIndex = tree.move(index.id, below.id, 'after');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newIndex) {
|
|
||||||
newIndex.node.collapsed = collapsed;
|
|
||||||
dragging.id = newIndex.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
tree,
|
|
||||||
dragging,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
dragEnd() {
|
|
||||||
this.setState({
|
|
||||||
dragging: {
|
|
||||||
id: null,
|
|
||||||
x: null,
|
|
||||||
y: null,
|
|
||||||
w: null,
|
|
||||||
h: null,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
this.change(this.state.tree);
|
|
||||||
window.removeEventListener('mousemove', this.drag);
|
|
||||||
window.removeEventListener('mouseup', this.dragEnd);
|
|
||||||
},
|
|
||||||
|
|
||||||
change(tree) {
|
|
||||||
this._updated = true;
|
|
||||||
if (this.props.onChange) this.props.onChange(tree.obj);
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleCollapse(nodeId) {
|
|
||||||
const tree = this.state.tree;
|
|
||||||
const index = tree.getIndex(nodeId);
|
|
||||||
const node = index.node;
|
|
||||||
node.collapsed = !node.collapsed;
|
|
||||||
tree.updateNodesPosition();
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
tree,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.props.onCollapse) this.props.onCollapse(node.id, node.collapsed);
|
|
||||||
},
|
|
||||||
|
|
||||||
// buildTreeNumbering(tree) {
|
|
||||||
// const numberBuilder = (index, node, parentNumbering) => {
|
|
||||||
// let numbering = parentNumbering ? `${parentNumbering}.${index}` : index;
|
|
||||||
// let children;
|
|
||||||
// if (node.children) {
|
|
||||||
// children = node.children.map((child, childIndex) => {
|
|
||||||
// return numberBuilder(childIndex+1, child, numbering);
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const data = {
|
|
||||||
// module: {
|
|
||||||
// ...node.module,
|
|
||||||
// index: numbering,
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// if (children) {
|
|
||||||
// data.children = children;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return data;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const newTree = {...tree};
|
|
||||||
// newTree.children = [];
|
|
||||||
// tree.children.forEach((child, index) => {
|
|
||||||
// newTree.children.push(numberBuilder(index+1, child));
|
|
||||||
// })
|
|
||||||
// return newTree;
|
|
||||||
// }
|
|
||||||
});
|
|
||||||
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 30" x="0px" y="0px"><path d="M8.59,18.16L14.25,12.5L8.59,6.84L7.89,7.55L12.84,12.5L7.89,17.45L8.59,18.16Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 227 B |
@ -1,3 +0,0 @@
|
|||||||
// @flow
|
|
||||||
import UiTree from './UiTree';
|
|
||||||
export default UiTree;
|
|
||||||
@ -98,6 +98,7 @@ render(
|
|||||||
<Route exact path="/dashboard" component={Dashboard} />
|
<Route exact path="/dashboard" component={Dashboard} />
|
||||||
<Route exact path="/collections/:id" component={Collection} />
|
<Route exact path="/collections/:id" component={Collection} />
|
||||||
<Route exact path="/d/:id" component={Document} />
|
<Route exact path="/d/:id" component={Document} />
|
||||||
|
|
||||||
<Route exact path="/d/:id/:edit" component={Document} />
|
<Route exact path="/d/:id/:edit" component={Document} />
|
||||||
<Route
|
<Route
|
||||||
exact
|
exact
|
||||||
|
|||||||
@ -21,20 +21,6 @@ You have unsaved changes.
|
|||||||
Are you sure you want to discard them?
|
Are you sure you want to discard them?
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
position: relative;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
padding: 0 3em;
|
|
||||||
width: 50em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Meta = styled.div`
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
match: Object,
|
match: Object,
|
||||||
history: Object,
|
history: Object,
|
||||||
@ -129,37 +115,52 @@ type Props = {
|
|||||||
search={false}
|
search={false}
|
||||||
fixed
|
fixed
|
||||||
>
|
>
|
||||||
<PageTitle title={titleText} />
|
<PagePadding>
|
||||||
<Prompt when={this.store.hasPendingChanges} message={DISCARD_CHANGES} />
|
<PageTitle title={titleText} />
|
||||||
{this.store.isFetching &&
|
<Prompt
|
||||||
<CenteredContent>
|
when={this.store.hasPendingChanges}
|
||||||
<PreviewLoading />
|
message={DISCARD_CHANGES}
|
||||||
</CenteredContent>}
|
/>
|
||||||
{this.store.document &&
|
{this.store.isFetching &&
|
||||||
<Container>
|
<CenteredContent>
|
||||||
{!isEditing &&
|
<PreviewLoading />
|
||||||
<Meta>
|
</CenteredContent>}
|
||||||
|
{this.store.document &&
|
||||||
|
<Container>
|
||||||
|
{!isEditing &&
|
||||||
<PublishingInfo
|
<PublishingInfo
|
||||||
collaborators={this.store.document.collaborators}
|
collaborators={this.store.document.collaborators}
|
||||||
createdAt={this.store.document.createdAt}
|
createdAt={this.store.document.createdAt}
|
||||||
createdBy={this.store.document.createdBy}
|
createdBy={this.store.document.createdBy}
|
||||||
updatedAt={this.store.document.updatedAt}
|
updatedAt={this.store.document.updatedAt}
|
||||||
updatedBy={this.store.document.updatedBy}
|
updatedBy={this.store.document.updatedBy}
|
||||||
/>
|
/>}
|
||||||
</Meta>}
|
<Editor
|
||||||
<Editor
|
text={this.store.document.text}
|
||||||
text={this.store.document.text}
|
onImageUploadStart={this.onImageUploadStart}
|
||||||
onImageUploadStart={this.onImageUploadStart}
|
onImageUploadStop={this.onImageUploadStop}
|
||||||
onImageUploadStop={this.onImageUploadStop}
|
onChange={this.store.updateText}
|
||||||
onChange={this.store.updateText}
|
onSave={this.onSave}
|
||||||
onSave={this.onSave}
|
onCancel={this.onCancel}
|
||||||
onCancel={this.onCancel}
|
readOnly={!isEditing}
|
||||||
readOnly={!isEditing}
|
/>
|
||||||
/>
|
</Container>}
|
||||||
</Container>}
|
</PagePadding>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const PagePadding = styled(Flex)`
|
||||||
|
margin: 80px; 0
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: 0 3em;
|
||||||
|
width: 50em;
|
||||||
|
`;
|
||||||
|
|
||||||
export default withRouter(Document);
|
export default withRouter(Document);
|
||||||
|
|||||||
@ -20,7 +20,7 @@ html, body, .viewport {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Atlas Grotesk', -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
|
font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -47,7 +47,7 @@ a {
|
|||||||
}
|
}
|
||||||
h1, h2, h3,
|
h1, h2, h3,
|
||||||
h4, h5, h6 {
|
h4, h5, h6 {
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
|
|||||||
Reference in New Issue
Block a user