yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge master, small refactor

Browse Source
This commit is contained in:
Tom Moor
2018-07-15 07:58:58 -07:00
parent a95b7fc4b6 06953acfdf
commit 5884e07c1f
179 changed files with 2521 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/scenes/Collection/Collection.js → app/scenes/Collection.js
View File

3
app/scenes/Collection/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import Collection from './Collection';
export default Collection;

0
app/scenes/CollectionDelete/CollectionDelete.js → app/scenes/CollectionDelete.js
View File

3
app/scenes/CollectionDelete/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import CollectionDelete from './CollectionDelete';
export default CollectionDelete;

0
app/scenes/CollectionEdit/CollectionEdit.js → app/scenes/CollectionEdit.js
View File

3
app/scenes/CollectionEdit/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import CollectionEdit from './CollectionEdit';
export default CollectionEdit;

55
app/scenes/CollectionExport.js Normal file
View File

@@ -0,0 +1,55 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { inject, observer } from 'mobx-react';
import Button from 'components/Button';
import Flex from 'shared/components/Flex';
import HelpText from 'components/HelpText';
import Collection from 'models/Collection';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
type Props = {
collection: Collection,
auth: AuthStore,
ui: UiStore,
onSubmit: () => void,
};
@observer
class CollectionExport extends React.Component<Props> {
@observable isLoading: boolean = false;
handleSubmit = async (ev: SyntheticEvent<*>) => {
ev.preventDefault();
this.isLoading = true;
await this.props.collection.export();
this.isLoading = false;
this.props.ui.showToast('Export in progress…', 'success');
this.props.onSubmit();
};
render() {
const { collection, auth } = this.props;
if (!auth.user) return;
return (
<Flex column>
<form onSubmit={this.handleSubmit}>
<HelpText>
Exporting the collection <strong>{collection.name}</strong> may take
a few minutes. We’ll put together a zip file of your documents in
Markdown format and email it to <strong>{auth.user.email}</strong>.
</HelpText>
<Button type="submit" disabled={this.isLoading} primary>
{this.isLoading ? 'Requesting Export…' : 'Export Collection'}
</Button>
</form>
</Flex>
);
}
}
export default inject('ui', 'auth')(CollectionExport);

0
app/scenes/CollectionNew/CollectionNew.js → app/scenes/CollectionNew.js
View File

3
app/scenes/CollectionNew/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import CollectionNew from './CollectionNew';
export default CollectionNew;

46
app/scenes/Dashboard/Dashboard.js → app/scenes/Dashboard.js
View File

@@ -2,8 +2,11 @@
import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import { NewDocumentIcon } from 'outline-icons';
import NewDocumentMenu from 'menus/NewDocumentMenu';
import DocumentsStore from 'stores/DocumentsStore';
import Actions, { Action } from 'components/Actions';
import CenteredContent from 'components/CenteredContent';
import DocumentList from 'components/DocumentList';
import PageTitle from 'components/PageTitle';
@@ -42,22 +45,33 @@ class Dashboard extends React.Component<Props> {
<PageTitle title="Home" />
<h1>Home</h1>
{showContent ? (
<span>
{hasRecentlyViewed && [
<Subheading key="viewed">Recently viewed</Subheading>,
<DocumentList
key="viewedDocuments"
documents={documents.recentlyViewed}
/>,
]}
{hasRecentlyEdited && [
<Subheading key="edited">Recently edited</Subheading>,
<DocumentList
key="editedDocuments"
documents={documents.recentlyEdited}
/>,
]}
</span>
<React.Fragment>
{hasRecentlyViewed && (
<React.Fragment>
<Subheading key="viewed">Recently viewed</Subheading>
<DocumentList
key="viewedDocuments"
documents={documents.recentlyViewed}
showCollection
/>
</React.Fragment>
)}
{hasRecentlyEdited && (
<React.Fragment>
<Subheading key="edited">Recently edited</Subheading>
<DocumentList
key="editedDocuments"
documents={documents.recentlyEdited}
showCollection
/>
</React.Fragment>
)}
<Actions align="center" justify="flex-end">
<Action>
<NewDocumentMenu label={<NewDocumentIcon />} />
</Action>
</Actions>
</React.Fragment>
) : (
<ListPlaceholder count={5} />
)}

3
app/scenes/Dashboard/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import Dashboard from './Dashboard';
export default Dashboard;

163
app/scenes/Document/Document.js
View File

@@ -18,10 +18,11 @@ import {
matchDocumentMove,
} from 'utils/routeHelpers';
import { uploadFile } from 'utils/uploadFile';
import { emojiToUrl } from 'utils/emoji';
import isInternalUrl from 'utils/isInternalUrl';
import Document from 'models/Document';
import Actions from './components/Actions';
import Header from './components/Header';
import DocumentMove from './components/DocumentMove';
import UiStore from 'stores/UiStore';
import AuthStore from 'stores/AuthStore';
@@ -40,6 +41,10 @@ const DISCARD_CHANGES = `
You have unsaved changes.
Are you sure you want to discard them?
`;
const UPLOADING_WARNING = `
Image are still uploading.
Are you sure you want to discard them?
`;
type Props = {
match: Object,
@@ -51,25 +56,6 @@ type Props = {
ui: UiStore,
};
function toCodePoint(unicodeSurrogates, sep) {
var r = [],
c = 0,
p = 0,
i = 0;
while (i < unicodeSurrogates.length) {
c = unicodeSurrogates.charCodeAt(i++);
if (p) {
r.push((0x10000 + ((p - 0xd800) << 10) + (c - 0xdc00)).toString(16));
p = 0;
} else if (0xd800 <= c && c <= 0xdbff) {
p = c;
} else {
r.push(c.toString(16));
}
}
return r.join(sep || '-');
}
@observer
class DocumentScene extends React.Component<Props> {
savedTimeout: TimeoutID;
@@ -79,7 +65,7 @@ class DocumentScene extends React.Component<Props> {
@observable editCache: ?string;
@observable document: ?Document;
@observable newDocument: ?Document;
@observable isLoading = false;
@observable isUploading = false;
@observable isSaving = false;
@observable isPublishing = false;
@observable notFound = false;
@@ -155,7 +141,7 @@ class DocumentScene extends React.Component<Props> {
};
loadEditor = async () => {
const EditorImport = await import('rich-markdown-editor');
const EditorImport = await import('./components/Editor');
this.editorComponent = EditorImport.default;
};
@@ -199,11 +185,11 @@ class DocumentScene extends React.Component<Props> {
}, AUTOSAVE_INTERVAL);
onImageUploadStart = () => {
this.isLoading = true;
this.isUploading = true;
};
onImageUploadStop = () => {
this.isLoading = false;
this.isUploading = false;
};
onChange = text => {
@@ -249,7 +235,14 @@ class DocumentScene extends React.Component<Props> {
onClickLink = (href: string) => {
if (isInternalUrl(href)) {
this.props.history.push(href);
// relative
if (href[0] === '/') {
this.props.history.push(href);
}
// absolute
const url = new URL(href);
this.props.history.push(url.pathname);
} else {
window.open(href, '_blank');
}
@@ -260,8 +253,6 @@ class DocumentScene extends React.Component<Props> {
const Editor = this.editorComponent;
const isMoving = match.path === matchDocumentMove;
const document = this.document;
const titleFromState = location.state ? location.state.title : '';
const titleText = document ? document.title : titleFromState;
const isShare = match.params.shareId;
if (this.notFound) {
@@ -276,82 +267,82 @@ class DocumentScene extends React.Component<Props> {
);
}
let favicon;
if (document && document.emoji) {
favicon = `https://twemoji.maxcdn.com/2/72x72/${toCodePoint(
document.emoji
)}.png`;
}
return (
<Container key={document ? document.id : undefined} column auto>
{isMoving && document && <DocumentMove document={document} />}
{titleText && (
<PageTitle
title={titleText.replace(document.emoji, '')}
favicon={favicon}
/>
)}
{(this.isLoading || this.isSaving) && <LoadingIndicator />}
{!document || !Editor ? (
if (!document || !Editor) {
return (
<Container column auto>
<PageTitle title={location.state ? location.state.title : ''} />
<CenteredContent>
<LoadingState />
</CenteredContent>
) : (
<Flex justify="center" auto>
{this.isEditing && (
</Container>
);
}
return (
<Container key={document.id} column auto>
{isMoving && <DocumentMove document={document} />}
<PageTitle
title={document.title.replace(document.emoji, '')}
favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
/>
{(this.isUploading || this.isSaving) && <LoadingIndicator />}
<Container justify="center" column auto>
{this.isEditing && (
<React.Fragment>
<Prompt
when={document.hasPendingChanges}
message={DISCARD_CHANGES}
/>
)}
<MaxWidth column auto>
<Editor
titlePlaceholder="Start with a title…"
bodyPlaceholder="…the rest is your canvas"
defaultValue={document.text}
pretitle={document.emoji}
uploadImage={this.onUploadImage}
onImageUploadStart={this.onImageUploadStart}
onImageUploadStop={this.onImageUploadStop}
onSearchLink={this.onSearchLink}
onClickLink={this.onClickLink}
onChange={this.onChange}
onSave={this.onSave}
onCancel={this.onDiscard}
readOnly={!this.isEditing}
toc
/>
</MaxWidth>
{document &&
!isShare && (
<Actions
document={document}
isDraft={!document.publishedAt}
isEditing={this.isEditing}
isSaving={this.isSaving}
isPublishing={this.isPublishing}
savingIsDisabled={!document.allowSave}
history={this.props.history}
onDiscard={this.onDiscard}
onSave={this.onSave}
/>
)}
</Flex>
)}
<Prompt when={this.isUploading} message={UPLOADING_WARNING} />
</React.Fragment>
)}
{!isShare && (
<Header
document={document}
isDraft={!document.publishedAt}
isEditing={this.isEditing}
isSaving={this.isSaving}
isPublishing={this.isPublishing}
savingIsDisabled={!document.allowSave}
history={this.props.history}
onDiscard={this.onDiscard}
onSave={this.onSave}
/>
)}
<MaxWidth column auto>
<Editor
titlePlaceholder="Start with a title…"
bodyPlaceholder="…the rest is your canvas"
defaultValue={document.text}
pretitle={document.emoji}
uploadImage={this.onUploadImage}
onImageUploadStart={this.onImageUploadStart}
onImageUploadStop={this.onImageUploadStop}
onSearchLink={this.onSearchLink}
onClickLink={this.onClickLink}
onChange={this.onChange}
onSave={this.onSave}
onCancel={this.onDiscard}
readOnly={!this.isEditing}
toc
/>
</MaxWidth>
</Container>
</Container>
);
}
}
const MaxWidth = styled(Flex)`
padding: 0 20px;
padding: 0 16px;
max-width: 100vw;
width: 100%;
height: 100%;
${breakpoint('tablet')`
padding: 0;
margin: 60px;
margin: 12px auto;
max-width: 46em;
`};
`;
@@ -361,7 +352,7 @@ const Container = styled(Flex)`
`;
const LoadingState = styled(LoadingPlaceholder)`
margin: 90px 0;
margin: 40px 0;
`;
export default withRouter(inject('ui', 'auth', 'documents')(DocumentScene));

132
app/scenes/Document/components/Actions.js
View File

@@ -1,132 +0,0 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { NewDocumentIcon } from 'outline-icons';
import { color } from 'shared/styles/constants';
import Document from 'models/Document';
import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
import DocumentMenu from 'menus/DocumentMenu';
import Collaborators from 'components/Collaborators';
import Actions, { Action, Separator } from 'components/Actions';
type Props = {
document: Document,
isDraft: boolean,
isEditing: boolean,
isSaving: boolean,
isPublishing: boolean,
savingIsDisabled: boolean,
onDiscard: () => *,
onSave: ({
done?: boolean,
publish?: boolean,
autosave?: boolean,
}) => *,
history: Object,
};
class DocumentActions extends React.Component<Props> {
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,
} = this.props;
return (
<Actions align="center" justify="flex-end" readOnly={!isEditing}>
{!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>
<Link
onClick={this.handleSave}
title="Save changes (Cmd+Enter)"
disabled={savingIsDisabled}
isSaving={isSaving}
highlight={!isDraft}
>
{isSaving && !isPublishing ? 'Saving…' : 'Save'}
</Link>
</Action>
{isDraft && <Separator />}
</React.Fragment>
)}
{!isEditing && (
<Action>
<a onClick={this.handleEdit}>Edit</a>
</Action>
)}
{isEditing && (
<Action>
<a onClick={this.props.onDiscard}>
{document.hasPendingChanges ? 'Discard' : 'Done'}
</a>
</Action>
)}
{!isEditing && (
<Action>
<DocumentMenu document={document} showPrint />
</Action>
)}
{!isEditing &&
!isDraft && (
<React.Fragment>
<Separator />
<Action>
<a onClick={this.handleNewDocument}>
<NewDocumentIcon />
</a>
</Action>
</React.Fragment>
)}
</Actions>
);
}
}
const Link = styled.a`
display: flex;
align-items: center;
font-weight: ${props => (props.highlight ? 500 : 'inherit')};
color: ${props =>
props.highlight ? `${color.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 DocumentActions;

76
app/scenes/Document/components/Breadcrumb.js Normal file
View File

@@ -0,0 +1,76 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import breakpoint from 'styled-components-breakpoint';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { CollectionIcon, GoToIcon } from 'outline-icons';
import Document from 'models/Document';
import CollectionsStore from 'stores/CollectionsStore';
import { collectionUrl } from 'utils/routeHelpers';
import Flex from 'shared/components/Flex';
type Props = {
document: Document,
collections: CollectionsStore,
};
const Breadcrumb = observer(({ document, collections }: Props) => {
const path = document.pathToDocument.slice(0, -1);
const collection =
collections.getById(document.collection.id) || document.collection;
return (
<Wrapper justify="flex-start" align="center">
<CollectionName to={collectionUrl(collection.id)}>
<CollectionIcon color={collection.color} expanded />{' '}
<span>{collection.name}</span>
</CollectionName>
{path.map(n => (
<React.Fragment key={n.id}>
<Slash /> <Crumb to={n.url}>{n.title}</Crumb>
</React.Fragment>
))}
</Wrapper>
);
});
const Wrapper = styled(Flex)`
width: 33.3%;
display: none;
${breakpoint('tablet')`
display: flex;
`};
`;
const Slash = styled(GoToIcon)`
flex-shrink: 0;
opacity: 0.25;
`;
const Crumb = styled(Link)`
color: ${props => props.theme.text};
font-size: 15px;
height: 24px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover {
text-decoration: underline;
}
`;
const CollectionName = styled(Link)`
display: flex;
flex-shrink: 0;
color: ${props => props.theme.text};
font-size: 15px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
`;
export default inject('collections')(Breadcrumb);

3
app/scenes/Document/components/DocumentMove/DocumentMove.js
View File

@@ -8,7 +8,6 @@ import { Search } from 'js-search';
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
import _ from 'lodash';
import styled from 'styled-components';
import { size } from 'shared/styles/constants';
import Modal from 'components/Modal';
import Input from 'components/Input';
@@ -181,7 +180,7 @@ class DocumentMove extends React.Component<Props> {
}
const Section = styled(Flex)`
margin-bottom: ${size.huge};
margin-bottom: 24px;
`;
const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`

10
app/scenes/Document/components/DocumentMove/components/PathToDocument.js
View File

@@ -4,8 +4,6 @@ import { observer } from 'mobx-react';
import invariant from 'invariant';
import styled from 'styled-components';
import { GoToIcon } from 'outline-icons';
import { color } from 'shared/styles/constants';
import Flex from 'shared/components/Flex';
import Document from 'models/Document';
@@ -14,7 +12,7 @@ const ResultWrapper = styled.div`
display: flex;
margin-bottom: 10px;
color: ${color.text};
color: ${props => props.theme.text};
cursor: default;
`;
@@ -30,13 +28,13 @@ const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
&:focus {
margin-left: 0px;
border-radius: 2px;
background: ${color.black};
color: ${color.smokeLight};
background: ${props => props.theme.black};
color: ${props => props.theme.smokeLight};
outline: none;
cursor: pointer;
${StyledGoToIcon} {
fill: ${color.white};
fill: ${props => props.theme.white};
}
}
`;

111
app/scenes/Document/components/Editor.js Normal file
View File

@@ -0,0 +1,111 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { Block, Change, Node, Mark, Text } from 'slate';
import RichMarkdownEditor, { Placeholder, schema } from 'rich-markdown-editor';
import ClickablePadding from 'components/ClickablePadding';
type Props = {
titlePlaceholder: string,
bodyPlaceholder: string,
readOnly: boolean,
};
// add rules to the schema to ensure the first node is a heading
schema.document.nodes.unshift({ types: ['heading1'], min: 1, max: 1 });
schema.document.normalize = (
change: Change,
reason: string,
{
node,
child,
mark,
index,
}: { node: Node, mark?: Mark, child: Node, index: number }
) => {
switch (reason) {
case 'child_type_invalid': {
return change.setNodeByKey(
child.key,
index === 0 ? 'heading1' : 'paragraph'
);
}
case 'child_required': {
const block = Block.create(index === 0 ? 'heading1' : 'paragraph');
return change.insertNodeByKey(node.key, index, block);
}
default:
}
};
class Editor extends React.Component<Props> {
editor: *;
setEditorRef = (ref: RichMarkdownEditor) => {
this.editor = ref;
};
focusAtEnd = () => {
if (this.editor) this.editor.focusAtEnd();
};
renderPlaceholder = (props: *) => {
const { editor, node } = props;
if (editor.state.isComposing) return;
if (node.object !== 'block') return;
if (!Text.isTextList(node.nodes)) return;
if (node.text !== '') return;
const index = editor.value.document.getBlocks().indexOf(node);
if (index > 1) return;
const text =
index === 0 ? this.props.titlePlaceholder : this.props.bodyPlaceholder;
return <Placeholder>{editor.props.readOnly ? '' : text}</Placeholder>;
};
render() {
const { readOnly } = this.props;
return (
<React.Fragment>
<StyledEditor
innerRef={this.setEditorRef}
renderPlaceholder={this.renderPlaceholder}
schema={schema}
{...this.props}
/>
<ClickablePadding
onClick={!readOnly ? this.focusAtEnd : undefined}
grow
/>
</React.Fragment>
);
}
}
// additional styles account for placeholder nodes not always re-rendering
const StyledEditor = styled(RichMarkdownEditor)`
display: flex;
flex: 0;
${Placeholder} {
visibility: hidden;
}
h1:first-of-type {
${Placeholder} {
visibility: visible;
}
}
p:nth-child(2):last-child {
${Placeholder} {
visibility: visible;
}
}
`;
export default Editor;

232
app/scenes/Document/components/Header.js Normal file
View File

@@ -0,0 +1,232 @@
// @flow
import * as React from 'react';
import { throttle } from 'lodash';
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,
onDiscard: () => *,
onSave: ({
done?: boolean,
publish?: boolean,
autosave?: boolean,
}) => *,
history: Object,
};
@observer
class Header extends React.Component<Props> {
@observable isScrolled = false;
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
updateIsScrolled = () => {
this.isScrolled = window.scrollY > 75;
};
handleScroll = throttle(this.updateIsScrolled, 50);
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 });
};
handleClickTitle = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
render() {
const {
document,
isEditing,
isDraft,
isPublishing,
isSaving,
savingIsDisabled,
} = this.props;
return (
<Actions
align="center"
justify="space-between"
readOnly={!isEditing}
isCompact={this.isScrolled}
>
<Breadcrumb document={document} />
<Title isHidden={!this.isScrolled} onClick={this.handleClickTitle}>
{document.title}
</Title>
<Wrapper align="center" justify="flex-end">
{!isDraft && !isEditing && <Collaborators document={document} />}
{isSaving &&
!isPublishing && (
<Action>
<Status>Saving…</Status>
</Action>
)}
{isDraft && (
<Action>
<Link
onClick={this.handlePublish}
title="Publish document (Cmd+Enter)"
disabled={savingIsDisabled}
highlight
>
{isPublishing ? 'Publishing…' : 'Publish'}
</Link>
</Action>
)}
{isEditing && (
<React.Fragment>
<Action>
<Link
onClick={this.handleSave}
title="Save changes (Cmd+Enter)"
disabled={savingIsDisabled}
isSaving={isSaving}
highlight={!isDraft}
>
{isDraft ? 'Save Draft' : 'Done'}
</Link>
</Action>
</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};
`;
const Wrapper = styled(Flex)`
width: 100%;
align-self: flex-end;
${breakpoint('tablet')`
width: 33.3%;
`};
`;
const Actions = styled(Flex)`
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 1;
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;
transform: translate3d(0, 0, 0);
-webkit-backdrop-filter: blur(20px);
@media print {
display: none;
}
${breakpoint('tablet')`
padding: ${props => (props.isCompact ? '12px' : `24px 24px 0`)};
`};
`;
const Title = styled.div`
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')};
cursor: ${props => (props.isHidden ? 'default' : 'pointer')};
display: none;
width: 0;
${breakpoint('tablet')`
display: block;
width: 33.3%;
`};
`;
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;

3
app/scenes/Document/components/LoadingPlaceholder.js
View File

@@ -2,7 +2,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { pulsate } from 'shared/styles/animations';
import { color } from 'shared/styles/constants';
import Flex from 'shared/components/Flex';
import Fade from 'components/Fade';
@@ -29,7 +28,7 @@ const LoadingPlaceholder = (props: Object) => {
const Mask = styled(Flex)`
height: ${props => (props.header ? 28 : 18)}px;
margin-bottom: ${props => (props.header ? 32 : 14)}px;
background-color: ${color.smoke};
background-color: ${props => props.theme.smoke};
animation: ${pulsate} 1.3s infinite;
`;

0
app/scenes/DocumentDelete/DocumentDelete.js → app/scenes/DocumentDelete.js
View File

3
app/scenes/DocumentDelete/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import DocumentDelete from './DocumentDelete';
export default DocumentDelete;

0
app/scenes/DocumentShare/DocumentShare.js → app/scenes/DocumentShare.js
View File

3
app/scenes/DocumentShare/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import DocumentShare from './DocumentShare';
export default DocumentShare;

0
app/scenes/Drafts/Drafts.js → app/scenes/Drafts.js
View File

3
app/scenes/Drafts/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import Drafts from './Drafts';
export default Drafts;

0
app/scenes/ErrorSuspended/ErrorSuspended.js → app/scenes/ErrorSuspended.js
View File

3
app/scenes/ErrorSuspended/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import ErrorSuspended from './ErrorSuspended';
export default ErrorSuspended;

0
app/scenes/Home/Home.js → app/scenes/Home.js
View File

3
app/scenes/Home/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import Home from './Home';
export default Home;

0
app/scenes/KeyboardShortcuts/KeyboardShortcuts.js → app/scenes/KeyboardShortcuts.js
View File

3
app/scenes/KeyboardShortcuts/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import KeyboardShortcuts from './KeyboardShortcuts';
export default KeyboardShortcuts;

17
app/scenes/Search/components/SearchField.js
View File

@@ -1,13 +1,12 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import styled, { withTheme } from 'styled-components';
import { SearchIcon } from 'outline-icons';
import Flex from 'shared/components/Flex';
import { color } from 'shared/styles/constants';
type Props = {
onChange: string => *,
theme: Object,
};
class SearchField extends React.Component<Props> {
@@ -31,7 +30,7 @@ class SearchField extends React.Component<Props> {
<StyledIcon
type="Search"
size={46}
color={color.slateLight}
color={this.props.theme.slateLight}
onClick={this.focusInput}
/>
<StyledInput
@@ -56,16 +55,16 @@ const StyledInput = styled.input`
border: 0;
::-webkit-input-placeholder {
color: ${color.slateLight};
color: ${props => props.theme.slateLight};
}
:-moz-placeholder {
color: ${color.slateLight};
color: ${props => props.theme.slateLight};
}
::-moz-placeholder {
color: ${color.slateLight};
color: ${props => props.theme.slateLight};
}
:-ms-input-placeholder {
color: ${color.slateLight};
color: ${props => props.theme.slateLight};
}
`;
@@ -74,4 +73,4 @@ const StyledIcon = styled(SearchIcon)`
top: 4px;
`;
export default SearchField;
export default withTheme(SearchField);

7
app/scenes/Settings/Details.js
View File

@@ -3,7 +3,6 @@ import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import { color, size } from 'shared/styles/constants';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
@@ -120,7 +119,7 @@ class Details extends React.Component<Props> {
}
const ProfilePicture = styled(Flex)`
margin-bottom: ${size.huge};
margin-bottom: 24px;
`;
const avatarStyles = `
@@ -133,7 +132,7 @@ const AvatarContainer = styled(Flex)`
${avatarStyles};
position: relative;
box-shadow: 0 0 0 1px #dae1e9;
background: ${color.white};
background: ${props => props.theme.white};
div div {
${avatarStyles};
@@ -150,7 +149,7 @@ const AvatarContainer = styled(Flex)`
&:hover div {
opacity: 1;
background: rgba(0, 0, 0, 0.75);
color: ${color.white};
color: ${props => props.theme.white};
}
`;

71
app/scenes/Settings/Export.js Normal file
View File

@@ -0,0 +1,71 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import AuthStore from 'stores/AuthStore';
import CollectionsStore from 'stores/CollectionsStore';
import UiStore from 'stores/UiStore';
import CenteredContent from 'components/CenteredContent';
import PageTitle from 'components/PageTitle';
import HelpText from 'components/HelpText';
import Button from 'components/Button';
type Props = {
auth: AuthStore,
collections: CollectionsStore,
ui: UiStore,
};
@observer
class Export extends React.Component<Props> {
@observable isLoading: boolean = false;
@observable isExporting: boolean = false;
handleSubmit = async (ev: SyntheticEvent<*>) => {
ev.preventDefault();
this.isLoading = true;
const success = await this.props.collections.export();
if (success) {
this.isExporting = true;
this.props.ui.showToast('Export in progress…', 'success');
}
this.isLoading = false;
};
render() {
const { auth } = this.props;
if (!auth.user) return;
return (
<CenteredContent>
<PageTitle title="Export Data" />
<h1>Export Data</h1>
<HelpText>
Exporting your teams documents may take a little time depending on the
size of your knowledgebase. Consider exporting a single document or
collection instead.
</HelpText>
<HelpText>
Still want to export everything in your wiki? We’ll put together a zip
file of your collections and documents in Markdown format and email it
to <strong>{auth.user.email}</strong>.
</HelpText>
<Button
type="submit"
onClick={this.handleSubmit}
disabled={this.isLoading || this.isExporting}
primary
>
{this.isExporting
? 'Export Requested'
: this.isLoading ? 'Requesting Export…' : 'Export All Data'}
</Button>
</CenteredContent>
);
}
}
export default inject('auth', 'ui', 'collections')(Export);

7
app/scenes/Settings/People.js
View File

@@ -32,9 +32,8 @@ class People extends React.Component<Props> {
<PageTitle title="People" />
<h1>People</h1>
<HelpText>
Everyone that has signed in to your Outline appears here. It's
possible that there are other people who have access but haven't
signed in yet.
Everyone that has signed in to your Outline appear here. It’s possible
that there are other people who have access but haven’t signed in yet.
</HelpText>
<List>
@@ -42,7 +41,7 @@ class People extends React.Component<Props> {
<UserListItem
key={user.id}
user={user}
isCurrentUser={currentUser.id === user.id}
showMenu={!!currentUser.isAdmin && currentUser.id !== user.id}
/>
))}
</List>

28
app/scenes/Settings/Profile.js
View File

@@ -3,7 +3,6 @@ import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import { color, size } from 'shared/styles/constants';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
@@ -12,6 +11,7 @@ import Input, { LabelText } from 'components/Input';
import Button from 'components/Button';
import CenteredContent from 'components/CenteredContent';
import PageTitle from 'components/PageTitle';
import UserDelete from 'scenes/UserDelete';
import Flex from 'shared/components/Flex';
type Props = {
@@ -26,6 +26,7 @@ class Profile extends React.Component<Props> {
@observable name: string;
@observable avatarUrl: ?string;
@observable showDeleteModal: boolean = false;
componentDidMount() {
if (this.props.auth.user) {
@@ -59,6 +60,10 @@ class Profile extends React.Component<Props> {
this.props.ui.showToast(error || 'Unable to upload new avatar');
};
toggleDeleteAccount = () => {
this.showDeleteModal = !this.showDeleteModal;
};
get isValid() {
return this.form && this.form.checkValidity();
}
@@ -98,13 +103,30 @@ class Profile extends React.Component<Props> {
{isSaving ? 'Saving…' : 'Save'}
</Button>
</form>
<DangerZone>
<LabelText>Delete Account</LabelText>
<p>
You may delete your account at any time, note that this is
unrecoverable.{' '}
<a onClick={this.toggleDeleteAccount}>Delete account</a>.
</p>
</DangerZone>
{this.showDeleteModal && (
<UserDelete onRequestClose={this.toggleDeleteAccount} />
)}
</CenteredContent>
);
}
}
const DangerZone = styled.div`
position: absolute;
bottom: 16px;
`;
const ProfilePicture = styled(Flex)`
margin-bottom: ${size.huge};
margin-bottom: 24px;
`;
const avatarStyles = `
@@ -132,7 +154,7 @@ const AvatarContainer = styled(Flex)`
&:hover div {
opacity: 1;
background: rgba(0, 0, 0, 0.75);
color: ${color.white};
color: ${props => props.theme.white};
}
`;

9
app/scenes/Settings/components/ShareListItem.js
View File

@@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import ShareMenu from 'menus/ShareMenu';
import ListItem from 'components/List/Item';
import Time from 'shared/components/Time';
import type { Share } from '../../../types';
type Props = {
@@ -16,11 +16,8 @@ const ShareListItem = ({ share }: Props) => {
title={share.documentTitle}
subtitle={
<React.Fragment>
Shared{' '}
<time dateTime={share.createdAt}>
{distanceInWordsToNow(new Date(share.createdAt))}
</time>{' '}
ago by {share.createdBy.name}
Shared <Time dateTime={share.createdAt} /> ago by{' '}
{share.createdBy.name}
</React.Fragment>
}
actions={<ShareMenu share={share} />}

11
app/scenes/Settings/components/SlackButton.js
View File

@@ -1,21 +1,18 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { inject } from 'mobx-react';
import { slackAuth } from 'shared/utils/routeHelpers';
import Button from 'components/Button';
import SlackLogo from 'shared/components/SlackLogo';
import AuthStore from 'stores/AuthStore';
import Button from 'components/Button';
type Props = {
auth: AuthStore,
scopes?: string[],
redirectUri?: string,
redirectUri: string,
state: string,
label?: string,
};
function SlackButton({ auth, state, label, scopes, redirectUri }: Props) {
function SlackButton({ state, scopes, redirectUri, label }: Props) {
const handleClick = () =>
(window.location.href = slackAuth(state, scopes, redirectUri));
@@ -36,4 +33,4 @@ const SpacedSlackLogo = styled(SlackLogo)`
padding-right: 4px;
`;
export default inject('auth')(SlackButton);
export default SlackButton;

16
app/scenes/Settings/components/UserListItem.js
View File

@@ -1,19 +1,19 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { color } from 'shared/styles/constants';
import UserMenu from 'menus/UserMenu';
import Avatar from 'components/Avatar';
import ListItem from 'components/List/Item';
import Time from 'shared/components/Time';
import type { User } from '../../../types';
type Props = {
user: User,
isCurrentUser: boolean,
showMenu: boolean,
};
const UserListItem = ({ user, isCurrentUser }: Props) => {
const UserListItem = ({ user, showMenu }: Props) => {
return (
<ListItem
key={user.id}
@@ -21,12 +21,13 @@ const UserListItem = ({ user, isCurrentUser }: Props) => {
image={<Avatar src={user.avatarUrl} size={40} />}
subtitle={
<React.Fragment>
{user.username ? user.username : user.email}
{user.email ? `${user.email} · ` : undefined}
Joined <Time dateTime={user.createdAt} /> ago
{user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
{user.isSuspended && <Badge>Suspended</Badge>}
</React.Fragment>
}
actions={isCurrentUser ? undefined : <UserMenu user={user} />}
actions={showMenu ? <UserMenu user={user} /> : undefined}
/>
);
};
@@ -34,8 +35,9 @@ const UserListItem = ({ user, isCurrentUser }: Props) => {
const Badge = styled.span`
margin-left: 10px;
padding: 2px 6px 3px;
background-color: ${({ admin }) => (admin ? color.primary : color.smokeDark)};
color: ${({ admin }) => (admin ? color.white : color.text)};
background-color: ${({ admin, theme }) =>
admin ? theme.primary : theme.smokeDark};
color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
border-radius: 2px;
font-size: 11px;
text-transform: uppercase;

0
app/scenes/Starred/Starred.js → app/scenes/Starred.js
View File

3
app/scenes/Starred/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import Starred from './Starred';
export default Starred;

62
app/scenes/UserDelete.js Normal file
View File

@@ -0,0 +1,62 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { inject, observer } from 'mobx-react';
import Button from 'components/Button';
import Flex from 'shared/components/Flex';
import HelpText from 'components/HelpText';
import Modal from 'components/Modal';
import AuthStore from 'stores/AuthStore';
type Props = {
auth: AuthStore,
onRequestClose: () => *,
};
@observer
class UserDelete extends React.Component<Props> {
@observable isDeleting: boolean;
handleSubmit = async (ev: SyntheticEvent<*>) => {
ev.preventDefault();
this.isDeleting = true;
try {
const success = await this.props.auth.deleteUser();
if (success) {
this.props.auth.logout();
}
} finally {
this.isDeleting = false;
}
};
render() {
const { auth, ...rest } = this.props;
return (
<Modal isOpen title="Delete Account" {...rest}>
<Flex column>
<form onSubmit={this.handleSubmit}>
<HelpText>
Are you sure? Deleting your account will destory identifying data
associated with your user and cannot be undone. You will be
immediately logged out of Outline and all your API tokens will be
revoked.
</HelpText>
<HelpText>
<strong>Note:</strong> Signing back in will cause a new account to
be automatically reprovisioned.
</HelpText>
<Button type="submit" danger>
{this.isDeleting ? 'Deleting…' : 'Delete My Account'}
</Button>
</form>
</Flex>
</Modal>
);
}
}
export default inject('auth')(UserDelete);