gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add styling for preview toggle

Browse Source
This commit is contained in:
Shawn Erquhart
2017-04-05 12:06:12 -04:00
parent 948158cda3
commit 4752a1f150
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/EntryEditor/EntryEditor.css
View File

@ -5,10 +5,17 @@
height: 100%; height: 100%;
} }
.previewToggle {
position: absolute;
top: 0;
right: 40px;
z-index: 1000;
}
.controlPane { .controlPane {
height: calc(100% - 55px); height: calc(100% - 55px);
overflow: auto; overflow: auto;
padding: 0 20px; padding: 20px 20px 0;
border-right: 1px solid var(--defaultColorLight); border-right: 1px solid var(--defaultColorLight);
background-color: color(#f2f5f4 lightness(90%)); background-color: color(#f2f5f4 lightness(90%));
} }

23
src/components/EntryEditor/EntryEditor.js
View File

@ -8,12 +8,12 @@ import PreviewPane from '../PreviewPane/PreviewPane';
import Toolbar from './EntryEditorToolbar'; import Toolbar from './EntryEditorToolbar';
import styles from './EntryEditor.css'; import styles from './EntryEditor.css';
const PREVIEW_HIDE = 'cms.preview-state'; const PREVIEW_VISIBLE = 'cms.preview-visible';
class EntryEditor extends Component { class EntryEditor extends Component {
state = { state = {
showEventBlocker: false, showEventBlocker: false,
previewOpen: localStorage.getItem(PREVIEW_HIDE) === "false", previewVisible: localStorage.getItem(PREVIEW_VISIBLE) !== "false",
}; };
handleSplitPaneDragStart = () => { handleSplitPaneDragStart = () => {
@ -30,12 +30,9 @@ class EntryEditor extends Component {
}; };
handleTogglePreview = () => { handleTogglePreview = () => {
const { previewOpen } = this.state; const newPreviewVisible = !this.state.previewVisible;
const newPreviewState = !previewOpen ? "false" : "true"; this.setState({ previewVisible: newPreviewVisible });
this.setState( localStorage.setItem(PREVIEW_VISIBLE, newPreviewVisible);
{ previewOpen: !previewOpen },
localStorage.setItem(PREVIEW_HIDE, newPreviewState)
);
}; };
render() { render() {
@ -53,13 +50,12 @@ class EntryEditor extends Component {
onCancelEdit, onCancelEdit,
} = this.props; } = this.props;
const { previewOpen } = this.state;
const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`; const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`;
const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`; const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
const editor = ( const editor = (
<div className={controlClassName}> <div className={controlClassName}>
<Button onClick={this.handleTogglePreview}>TOGGLE PREVIEW</Button> <Button className={styles.previewToggle} onClick={this.handleTogglePreview}>Toggle Preview</Button>
<ControlPane <ControlPane
collection={collection} collection={collection}
entry={entry} entry={entry}
@ -84,9 +80,7 @@ class EntryEditor extends Component {
onDragStarted={this.handleSplitPaneDragStart} onDragStarted={this.handleSplitPaneDragStart}
onDragFinished={this.handleSplitPaneDragFinished} onDragFinished={this.handleSplitPaneDragFinished}
> >
<ScrollSyncPane> <ScrollSyncPane>{editor}</ScrollSyncPane>
{editor}
</ScrollSyncPane>
<div className={previewClassName}> <div className={previewClassName}>
<PreviewPane <PreviewPane
collection={collection} collection={collection}
@ -100,9 +94,10 @@ class EntryEditor extends Component {
</div> </div>
</ScrollSync> </ScrollSync>
); );
return ( return (
<div className={styles.root}> <div className={styles.root}>
{previewOpen === true ? editorWithPreview : editor} { this.state.previewVisible ? editorWithPreview : editor }
<div className={styles.footer}> <div className={styles.footer}>
<Toolbar <Toolbar
isPersisting={entry.get('isPersisting')} isPersisting={entry.get('isPersisting')}