Sidebar on edit mode
This commit is contained in:
parent
b8d0666c63
commit
7439b9ecf5
|
@ -80,7 +80,7 @@ type Props = {
|
|||
<Flex auto>
|
||||
{auth.authenticated &&
|
||||
user &&
|
||||
<Sidebar column>
|
||||
<Sidebar column editMode={ui.editMode}>
|
||||
<Header justify="space-between">
|
||||
<Flex align="center">
|
||||
<LogoLink to="/">Atlas</LogoLink>
|
||||
|
@ -119,7 +119,7 @@ type Props = {
|
|||
</Flex>
|
||||
</Sidebar>}
|
||||
|
||||
<Content auto justify="center">
|
||||
<Content auto justify="center" editMode={ui.editMode}>
|
||||
{this.props.children}
|
||||
</Content>
|
||||
</Flex>
|
||||
|
@ -159,14 +159,17 @@ const Content = styled(Flex)`
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 250px;
|
||||
left: ${props => (props.editMode ? 0 : '250px')};
|
||||
transition: left 200ms ease-in-out;
|
||||
`;
|
||||
|
||||
const Sidebar = styled(Flex)`
|
||||
width: 250px;
|
||||
margin-left: ${props => (props.editMode ? '-250px' : 0)};
|
||||
padding: 10px 20px;
|
||||
background: rgba(250, 251, 252, 0.71);
|
||||
border-right: 1px solid #eceff3;
|
||||
transition: margin-left 200ms ease-in-out;
|
||||
`;
|
||||
|
||||
const Header = styled(Flex)`
|
||||
|
|
|
@ -9,9 +9,9 @@ import { Flex } from 'reflexbox';
|
|||
import UiStore from 'stores/UiStore';
|
||||
|
||||
import DocumentStore from './DocumentStore';
|
||||
// import Menu from './components/Menu';
|
||||
import Menu from './components/Menu';
|
||||
import Editor from 'components/Editor';
|
||||
// import { HeaderAction, SaveAction } from 'components/Layout';
|
||||
import { HeaderAction, SaveAction } from 'components/Layout';
|
||||
import PublishingInfo from 'components/PublishingInfo';
|
||||
import PreviewLoading from 'components/PreviewLoading';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
|
@ -46,11 +46,9 @@ type Props = {
|
|||
if (this.props.newDocument) {
|
||||
this.store.collectionId = this.props.match.params.id;
|
||||
this.store.newDocument = true;
|
||||
this.props.ui.enableEditMode();
|
||||
} else if (this.props.match.params.edit) {
|
||||
this.store.documentId = this.props.match.params.id;
|
||||
this.store.fetchDocument();
|
||||
this.props.ui.enableEditMode();
|
||||
} else if (this.props.newChildDocument) {
|
||||
this.store.documentId = this.props.match.params.id;
|
||||
this.store.newChildDocument = true;
|
||||
|
@ -69,13 +67,14 @@ type Props = {
|
|||
onEdit = () => {
|
||||
const url = `${this.store.document.url}/edit`;
|
||||
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) {
|
||||
this.store.saveDocument(options);
|
||||
await this.store.saveDocument(options);
|
||||
} else {
|
||||
this.store.updateDocument(options);
|
||||
await this.store.updateDocument(options);
|
||||
}
|
||||
this.props.ui.disableEditMode();
|
||||
};
|
||||
|
@ -93,7 +92,7 @@ type Props = {
|
|||
};
|
||||
|
||||
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 title = (
|
||||
<Breadcrumbs
|
||||
|
@ -104,7 +103,7 @@ type Props = {
|
|||
|
||||
const titleText = this.store.document && get(this.store, 'document.title');
|
||||
|
||||
/*const actions = (
|
||||
const actions = (
|
||||
<Flex>
|
||||
<HeaderAction>
|
||||
{isEditing
|
||||
|
@ -115,54 +114,66 @@ type Props = {
|
|||
/>
|
||||
: <a onClick={this.onEdit}>Edit</a>}
|
||||
</HeaderAction>
|
||||
<Menu store={this.store} document={this.store.document} />
|
||||
{!isEditing &&
|
||||
<Menu store={this.store} document={this.store.document} />}
|
||||
</Flex>
|
||||
);*/
|
||||
|
||||
// actions={actions}
|
||||
// title={title}
|
||||
// loading={this.store.isSaving || this.store.isUploading}
|
||||
// search={false}
|
||||
// fixed
|
||||
);
|
||||
|
||||
return (
|
||||
<PagePadding>
|
||||
<PageTitle title={titleText} />
|
||||
<Prompt when={this.store.hasPendingChanges} message={DISCARD_CHANGES} />
|
||||
{this.store.isFetching &&
|
||||
<CenteredContent>
|
||||
<PreviewLoading />
|
||||
</CenteredContent>}
|
||||
{this.store.document &&
|
||||
<Container>
|
||||
{!isEditing &&
|
||||
<PublishingInfo
|
||||
collaborators={this.store.document.collaborators}
|
||||
createdAt={this.store.document.createdAt}
|
||||
createdBy={this.store.document.createdBy}
|
||||
updatedAt={this.store.document.updatedAt}
|
||||
updatedBy={this.store.document.updatedBy}
|
||||
/>}
|
||||
<Editor
|
||||
text={this.store.document.text}
|
||||
onImageUploadStart={this.onImageUploadStart}
|
||||
onImageUploadStop={this.onImageUploadStop}
|
||||
onChange={this.store.updateText}
|
||||
onSave={this.onSave}
|
||||
onCancel={this.onCancel}
|
||||
readOnly={!isEditing}
|
||||
/>
|
||||
</Container>}
|
||||
</PagePadding>
|
||||
<Container>
|
||||
<Actions>{actions}</Actions>
|
||||
<PagePadding auto justify="center">
|
||||
<PageTitle title={titleText} />
|
||||
<Prompt
|
||||
when={this.store.hasPendingChanges}
|
||||
message={DISCARD_CHANGES}
|
||||
/>
|
||||
{this.store.isFetching &&
|
||||
<CenteredContent>
|
||||
<PreviewLoading />
|
||||
</CenteredContent>}
|
||||
{this.store.document &&
|
||||
<DocumentContainer>
|
||||
{!isEditing &&
|
||||
<PublishingInfo
|
||||
collaborators={this.store.document.collaborators}
|
||||
createdAt={this.store.document.createdAt}
|
||||
createdBy={this.store.document.createdBy}
|
||||
updatedAt={this.store.document.updatedAt}
|
||||
updatedBy={this.store.document.updatedBy}
|
||||
/>}
|
||||
<Editor
|
||||
text={this.store.document.text}
|
||||
onImageUploadStart={this.onImageUploadStart}
|
||||
onImageUploadStop={this.onImageUploadStop}
|
||||
onChange={this.store.updateText}
|
||||
onSave={this.onSave}
|
||||
onCancel={this.onCancel}
|
||||
readOnly={!isEditing}
|
||||
/>
|
||||
</DocumentContainer>}
|
||||
</PagePadding>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const PagePadding = styled(Flex)`
|
||||
margin: 80px; 0
|
||||
const Container = styled(Flex)`
|
||||
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-size: 1em;
|
||||
line-height: 1.5em;
|
||||
|
|
Reference in New Issue