diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js index ebb89a2ca..550501a23 100644 --- a/frontend/components/Editor/Editor.js +++ b/frontend/components/Editor/Editor.js @@ -99,7 +99,8 @@ export default class MarkdownEditor extends Component { render = () => { return ( - + {!this.props.readOnly && + } (this.editor = ref)} @@ -114,7 +115,8 @@ export default class MarkdownEditor extends Component { onSave={this.props.onSave} readOnly={this.props.readOnly} /> - + {!this.props.readOnly && + } ); }; diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 2d6aec856..c59363bc2 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -72,9 +72,6 @@ type Props = {
Atlas - - {this.props.title} - @@ -120,21 +117,23 @@ type Props = { } const Container = styled(Flex)` + position: relative; width: 100%; height: 100%; `; const Header = styled(Flex)` - display: flex; + position: absolute; + top: 0; + left: 0; + right: 0; justify-content: space-between; align-items: center; padding: 0 20px; z-index: 1; - background: #fff; height: ${headerHeight}; - border-bottom: 1px solid #eee; font-size: 14px; line-height: 1; @@ -148,18 +147,6 @@ const LogoLink = styled(Link)` font-size: 16px; `; -const Title = styled.span` - color: #ccc; - - a { - color: #ccc; - } - - a:hover { - color: ${textColor}; - } -`; - const Search = styled(Flex)` margin: 0 5px; padding: 15px 5px 0 5px; diff --git a/frontend/components/Tree/Node.js b/frontend/components/Tree/Node.js deleted file mode 100644 index ba8157a3c..000000000 --- a/frontend/components/Tree/Node.js +++ /dev/null @@ -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 ( - - Expand - - ); - } - - 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 ( -
- {index.children.map(child => { - const childIndex = tree.getIndex(child); - return ( - - ); - })} -
- ); - } - - 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 ( -
-
e.stopPropagation() - : this.handleMouseDown - } - > - {!this.props.rootNode && this.renderCollapse()} - - {node.title} - -
- {this.renderChildren()} -
- ); - } - - 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; diff --git a/frontend/components/Tree/Tree.js b/frontend/components/Tree/Tree.js deleted file mode 100644 index 7296da9a9..000000000 --- a/frontend/components/Tree/Tree.js +++ /dev/null @@ -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; diff --git a/frontend/components/Tree/Tree.scss b/frontend/components/Tree/Tree.scss deleted file mode 100644 index 22c702188..000000000 --- a/frontend/components/Tree/Tree.scss +++ /dev/null @@ -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; - } -} diff --git a/frontend/components/Tree/UiTree.js b/frontend/components/Tree/UiTree.js deleted file mode 100644 index 02d774d3b..000000000 --- a/frontend/components/Tree/UiTree.js +++ /dev/null @@ -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 ( -
- -
- ); - } - - return null; - }, - - render() { - const tree = this.state.tree; - const dragging = this.state.dragging; - const draggingDom = this.getDraggingDom(); - - return ( -
- {draggingDom} - -
- ); - }, - - 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; - // } -}); diff --git a/frontend/components/Tree/assets/chevron.svg b/frontend/components/Tree/assets/chevron.svg deleted file mode 100644 index 4daab5920..000000000 --- a/frontend/components/Tree/assets/chevron.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/components/Tree/index.js b/frontend/components/Tree/index.js deleted file mode 100644 index fe1ac2eeb..000000000 --- a/frontend/components/Tree/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import UiTree from './UiTree'; -export default UiTree; diff --git a/frontend/index.js b/frontend/index.js index 901089c85..1e8f171ed 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -98,6 +98,7 @@ render( + - - - {this.store.isFetching && - - - } - {this.store.document && - - {!isEditing && - + + + + {this.store.isFetching && + + + } + {this.store.document && + + {!isEditing && - } - - } + />} + + } + ); } } +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); diff --git a/frontend/styles/base.scss b/frontend/styles/base.scss index 10cd2225c..17be0a19b 100644 --- a/frontend/styles/base.scss +++ b/frontend/styles/base.scss @@ -20,7 +20,7 @@ html, body, .viewport { } body { - font-family: 'Atlas Grotesk', -apple-system, 'Helvetica Neue', Helvetica, sans-serif; + font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 1.5; margin: 0; @@ -47,7 +47,7 @@ a { } h1, h2, h3, h4, h5, h6 { - font-weight: 600; + font-weight: 500; line-height: 1.25; margin-top: 1em; margin-bottom: .5em;