coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Sidebar on edit mode

Browse Source
This commit is contained in:
Jori Lallo
2017-06-25 00:29:40 -07:00
parent b8d0666c63
commit 7439b9ecf5
2 changed files with 65 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/components/Layout/Layout.js
View File

@ -80,7 +80,7 @@ type Props = {
<Flex auto> <Flex auto>
{auth.authenticated && {auth.authenticated &&
user && user &&
<Sidebar column> <Sidebar column editMode={ui.editMode}>
<Header justify="space-between"> <Header justify="space-between">
<Flex align="center"> <Flex align="center">
<LogoLink to="/">Atlas</LogoLink> <LogoLink to="/">Atlas</LogoLink>
@ -119,7 +119,7 @@ type Props = {
</Flex> </Flex>
</Sidebar>} </Sidebar>}
<Content auto justify="center"> <Content auto justify="center" editMode={ui.editMode}>
{this.props.children} {this.props.children}
</Content> </Content>
</Flex> </Flex>
@ -159,14 +159,17 @@ const Content = styled(Flex)`
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 250px; left: ${props => (props.editMode ? 0 : '250px')};
transition: left 200ms ease-in-out;
`; `;
const Sidebar = styled(Flex)` const Sidebar = styled(Flex)`
width: 250px; width: 250px;
margin-left: ${props => (props.editMode ? '-250px' : 0)};
padding: 10px 20px; padding: 10px 20px;
background: rgba(250, 251, 252, 0.71); background: rgba(250, 251, 252, 0.71);
border-right: 1px solid #eceff3; border-right: 1px solid #eceff3;
transition: margin-left 200ms ease-in-out;
`; `;
const Header = styled(Flex)` const Header = styled(Flex)`

107
frontend/scenes/Document/Document.js
View File

@ -9,9 +9,9 @@ import { Flex } from 'reflexbox';
import UiStore from 'stores/UiStore'; import UiStore from 'stores/UiStore';
import DocumentStore from './DocumentStore'; import DocumentStore from './DocumentStore';
// import Menu from './components/Menu'; import Menu from './components/Menu';
import Editor from 'components/Editor'; import Editor from 'components/Editor';
// import { HeaderAction, SaveAction } from 'components/Layout'; import { HeaderAction, SaveAction } from 'components/Layout';
import PublishingInfo from 'components/PublishingInfo'; import PublishingInfo from 'components/PublishingInfo';
import PreviewLoading from 'components/PreviewLoading'; import PreviewLoading from 'components/PreviewLoading';
import CenteredContent from 'components/CenteredContent'; import CenteredContent from 'components/CenteredContent';
@ -46,11 +46,9 @@ type Props = {
if (this.props.newDocument) { if (this.props.newDocument) {
this.store.collectionId = this.props.match.params.id; this.store.collectionId = this.props.match.params.id;
this.store.newDocument = true; this.store.newDocument = true;
this.props.ui.enableEditMode();
} else if (this.props.match.params.edit) { } else if (this.props.match.params.edit) {
this.store.documentId = this.props.match.params.id; this.store.documentId = this.props.match.params.id;
this.store.fetchDocument(); this.store.fetchDocument();
this.props.ui.enableEditMode();
} else if (this.props.newChildDocument) { } else if (this.props.newChildDocument) {
this.store.documentId = this.props.match.params.id; this.store.documentId = this.props.match.params.id;
this.store.newChildDocument = true; this.store.newChildDocument = true;
@ -69,13 +67,14 @@ type Props = {
onEdit = () => { onEdit = () => {
const url = `${this.store.document.url}/edit`; const url = `${this.store.document.url}/edit`;
this.props.history.push(url); this.props.history.push(url);
this.props.ui.enableEditMode();
}; };
onSave = (options: { redirect?: boolean } = {}) => { onSave = async (options: { redirect?: boolean } = {}) => {
if (this.store.newDocument || this.store.newChildDocument) { if (this.store.newDocument || this.store.newChildDocument) {
this.store.saveDocument(options); await this.store.saveDocument(options);
} else { } else {
this.store.updateDocument(options); await this.store.updateDocument(options);
} }
this.props.ui.disableEditMode(); this.props.ui.disableEditMode();
}; };
@ -93,7 +92,7 @@ type Props = {
}; };
render() { render() {
// const isNew = this.props.newDocument || this.props.newChildDocument; const isNew = this.props.newDocument || this.props.newChildDocument;
const isEditing = this.props.match.params.edit; const isEditing = this.props.match.params.edit;
/*const title = ( /*const title = (
<Breadcrumbs <Breadcrumbs
@ -104,7 +103,7 @@ type Props = {
const titleText = this.store.document && get(this.store, 'document.title'); const titleText = this.store.document && get(this.store, 'document.title');
/*const actions = ( const actions = (
<Flex> <Flex>
<HeaderAction> <HeaderAction>
{isEditing {isEditing
@ -115,54 +114,66 @@ type Props = {
/> />
: <a onClick={this.onEdit}>Edit</a>} : <a onClick={this.onEdit}>Edit</a>}
</HeaderAction> </HeaderAction>
<Menu store={this.store} document={this.store.document} /> {!isEditing &&
<Menu store={this.store} document={this.store.document} />}
</Flex> </Flex>
);*/ );
// actions={actions}
// title={title}
// loading={this.store.isSaving || this.store.isUploading}
// search={false}
// fixed
return ( return (
<PagePadding> <Container>
<PageTitle title={titleText} /> <Actions>{actions}</Actions>
<Prompt when={this.store.hasPendingChanges} message={DISCARD_CHANGES} /> <PagePadding auto justify="center">
{this.store.isFetching && <PageTitle title={titleText} />
<CenteredContent> <Prompt
<PreviewLoading /> when={this.store.hasPendingChanges}
</CenteredContent>} message={DISCARD_CHANGES}
{this.store.document && />
<Container> {this.store.isFetching &&
{!isEditing && <CenteredContent>
<PublishingInfo <PreviewLoading />
collaborators={this.store.document.collaborators} </CenteredContent>}
createdAt={this.store.document.createdAt} {this.store.document &&
createdBy={this.store.document.createdBy} <DocumentContainer>
updatedAt={this.store.document.updatedAt} {!isEditing &&
updatedBy={this.store.document.updatedBy} <PublishingInfo
/>} collaborators={this.store.document.collaborators}
<Editor createdAt={this.store.document.createdAt}
text={this.store.document.text} createdBy={this.store.document.createdBy}
onImageUploadStart={this.onImageUploadStart} updatedAt={this.store.document.updatedAt}
onImageUploadStop={this.onImageUploadStop} updatedBy={this.store.document.updatedBy}
onChange={this.store.updateText} />}
onSave={this.onSave} <Editor
onCancel={this.onCancel} text={this.store.document.text}
readOnly={!isEditing} onImageUploadStart={this.onImageUploadStart}
/> onImageUploadStop={this.onImageUploadStop}
</Container>} onChange={this.store.updateText}
</PagePadding> onSave={this.onSave}
onCancel={this.onCancel}
readOnly={!isEditing}
/>
</DocumentContainer>}
</PagePadding>
</Container>
); );
} }
} }
const PagePadding = styled(Flex)` const Container = styled(Flex)`
margin: 80px; 0 position: relative;
width: 100%;
`; `;
const Container = styled.div` const PagePadding = styled(Flex)`
padding: 80px 20px;
`;
const Actions = styled(Flex)`
position: absolute;
top: 0;
right: 20px;
`;
const DocumentContainer = styled.div`
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
line-height: 1.5em; line-height: 1.5em;