Use react-toolbox buttons. Added Cancel button for the entry editor.

This commit is contained in:
Andrey Okonetchnikov
2016-10-11 18:24:55 +02:00
parent 6fa02bf79b
commit 190aa05d68
4 changed files with 64 additions and 22 deletions

View File

@ -1,3 +1,8 @@
:root {
--defaultColorLight: #eee;
--backgroundColor: #fff;
}
.root {
position: absolute;
top: 64px;
@ -5,23 +10,27 @@
display: flex;
flex-direction: column;
}
.container {
flex: 1;
display: flex;
flex: 1;
}
.footer {
flex: 0;
background: #fff;
height: 45px;
border-top: 1px solid #e8eae8;
padding: 10px 20px;
border-top: 1px solid var(--defaultColorLight);
background: var(--backgroundColor);
text-align: right;
}
.controlPane {
flex: 1;
overflow: auto;
padding: 0 20px;
border-right: 1px solid #e8eae8;
border-right: 1px solid var(--defaultColorLight);
}
.previewPane {
flex: 1;
}

View File

@ -1,5 +1,6 @@
import React, { PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Button } from 'react-toolbox/lib/button';
import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
import ControlPane from '../ControlPanel/ControlPane';
import PreviewPane from '../PreviewPane/PreviewPane';
@ -7,7 +8,14 @@ import styles from './EntryEditor.css';
export default function EntryEditor(
{
collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist
collection,
entry,
getMedia,
onChange,
onAddMedia,
onRemoveMedia,
onPersist,
onCancelEdit,
}) {
return (
<div className={styles.root}>
@ -35,7 +43,17 @@ export default function EntryEditor(
</div>
</ScrollSync>
<div className={styles.footer}>
<button onClick={onPersist}>Save</button>
<Button
primary
raised
onClick={onPersist}
>
Save
</Button>
{' '}
<Button onClick={onCancelEdit}>
Cancel
</Button>
</div>
</div>
);
@ -49,4 +67,5 @@ EntryEditor.propTypes = {
onChange: PropTypes.func.isRequired,
onPersist: PropTypes.func.isRequired,
onRemoveMedia: PropTypes.func.isRequired,
onCancelEdit: PropTypes.func.isRequired,
};