wip

app/scenes/Document/components/Header.js

@@ -0,0 +1,212 @@
+// @flow
+import * as React from 'react';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
+import { NewDocumentIcon } from 'outline-icons';
+import Document from 'models/Document';
+import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
+
+import Flex from 'shared/components/Flex';
+import Breadcrumb from './Breadcrumb';
+import DocumentMenu from 'menus/DocumentMenu';
+import Collaborators from 'components/Collaborators';
+import { Action, Separator } from 'components/Actions';
+
+type Props = {
+  document: Document,
+  isDraft: boolean,
+  isEditing: boolean,
+  isSaving: boolean,
+  isPublishing: boolean,
+  savingIsDisabled: boolean,
+  editMode: boolean,
+  onDiscard: () => *,
+  onSave: ({
+    done?: boolean,
+    publish?: boolean,
+    autosave?: boolean,
+  }) => *,
+  history: Object,
+};
+
+@observer
+class Header extends React.Component<Props> {
+  @observable isScrolled = false;
+
+  componentWillMount() {
+    this.handleScroll();
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = () => {
+    this.isScrolled = window.scrollY > 75;
+  };
+
+  handleNewDocument = () => {
+    this.props.history.push(documentNewUrl(this.props.document));
+  };
+
+  handleEdit = () => {
+    this.props.history.push(documentEditUrl(this.props.document));
+  };
+
+  handleSave = () => {
+    this.props.onSave({ done: true });
+  };
+
+  handlePublish = () => {
+    this.props.onSave({ done: true, publish: true });
+  };
+
+  render() {
+    const {
+      document,
+      isEditing,
+      isDraft,
+      isPublishing,
+      isSaving,
+      savingIsDisabled,
+      editMode,
+    } = this.props;
+
+    return (
+      <Actions
+        align="center"
+        justify="space-between"
+        editMode={editMode}
+        readOnly={!isEditing}
+        isCompact={this.isScrolled}
+      >
+        <Breadcrumb document={document} />
+        <Title isHidden={!this.isScrolled}>{document.title}</Title>
+        <Wrapper align="center" justify="flex-end">
+          {!isDraft && !isEditing && <Collaborators document={document} />}
+          {isDraft && (
+            <Action>
+              <Link
+                onClick={this.handlePublish}
+                title="Publish document (Cmd+Enter)"
+                disabled={savingIsDisabled}
+                highlight
+              >
+                {isPublishing ? 'Publishing…' : 'Publish'}
+              </Link>
+            </Action>
+          )}
+          {isEditing && (
+            <React.Fragment>
+              <Action>
+                {isSaving && !isPublishing && <Status>Saving…</Status>}
+                <Link
+                  onClick={this.handleSave}
+                  title="Save changes (Cmd+Enter)"
+                  disabled={savingIsDisabled}
+                  isSaving={isSaving}
+                  highlight={!isDraft}
+                >
+                  Done
+                </Link>
+              </Action>
+              {isDraft && <Separator />}
+            </React.Fragment>
+          )}
+          {!isEditing && (
+            <Action>
+              <Link onClick={this.handleEdit}>Edit</Link>
+            </Action>
+          )}
+          {isEditing &&
+            !isSaving &&
+            document.hasPendingChanges && (
+              <Action>
+                <Link onClick={this.props.onDiscard}>Discard</Link>
+              </Action>
+            )}
+          {!isEditing && (
+            <Action>
+              <DocumentMenu document={document} showPrint />
+            </Action>
+          )}
+          {!isEditing &&
+            !isDraft && (
+              <React.Fragment>
+                <Separator />
+                <Action>
+                  <a onClick={this.handleNewDocument}>
+                    <NewDocumentIcon />
+                  </a>
+                </Action>
+              </React.Fragment>
+            )}
+        </Wrapper>
+      </Actions>
+    );
+  }
+}
+
+const Status = styled.div`
+  color: ${props => props.theme.slate};
+  margin-right: 12px;
+`;
+
+const Wrapper = styled(Flex)`
+  width: 33.3%;
+`;
+
+const Actions = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: ${props => (props.editMode ? '0' : props.theme.sidebarWidth)};
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid
+    ${props => (props.isCompact ? props.theme.smoke : 'transparent')};
+  padding: 12px;
+  transition: all 100ms ease-out;
+  -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint('tablet')`
+    padding: ${props =>
+      props.isCompact ? '12px' : `${props.theme.padding} 0`};
+  `};
+`;
+
+const Title = styled.div`
+  width: 33.3%;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  justify-content: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: opacity 100ms ease-in-out;
+  opacity: ${props => (props.isHidden ? '0' : '1')};
+`;
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  font-weight: ${props => (props.highlight ? 500 : 'inherit')};
+  color: ${props =>
+    props.highlight ? `${props.theme.primary} !important` : 'inherit'};
+  opacity: ${props => (props.disabled ? 0.5 : 1)};
+  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
+  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
+`;
+
+export default Header;