improve preview toggle styling
This commit is contained in:
@ -7,9 +7,14 @@
|
||||
|
||||
.previewToggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 8px;
|
||||
right: 40px;
|
||||
z-index: 1000;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.previewToggleShow {
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.controlPane {
|
||||
|
@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import SplitPane from 'react-split-pane';
|
||||
import Button from 'react-toolbox/lib/button';
|
||||
import classnames from 'classnames';
|
||||
import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
|
||||
import ControlPane from '../ControlPanel/ControlPane';
|
||||
import PreviewPane from '../PreviewPane/PreviewPane';
|
||||
@ -52,17 +53,22 @@ class EntryEditor extends Component {
|
||||
onCancelEdit,
|
||||
} = this.props;
|
||||
|
||||
const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`;
|
||||
const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
|
||||
const { previewVisible, showEventBlocker } = this.state;
|
||||
|
||||
const collectionPreviewEnabled = collection.getIn(['editor', 'preview'], true);
|
||||
|
||||
const togglePreviewButton = (
|
||||
<Button className={styles.previewToggle} onClick={this.handleTogglePreview}>Toggle Preview</Button>
|
||||
<Button
|
||||
className={classnames(styles.previewToggle, { previewVisible: styles.previewToggleShow })}
|
||||
onClick={this.handleTogglePreview}
|
||||
icon={previewVisible ? 'visibility_off' : 'visibility'}
|
||||
floating
|
||||
mini
|
||||
/>
|
||||
);
|
||||
|
||||
const editor = (
|
||||
<StickyContext className={controlClassName}>
|
||||
<StickyContext className={classnames(styles.controlPane, { [styles.blocker]: showEventBlocker })}>
|
||||
{ collectionPreviewEnabled ? togglePreviewButton : null }
|
||||
<ControlPane
|
||||
collection={collection}
|
||||
@ -89,7 +95,7 @@ class EntryEditor extends Component {
|
||||
onDragFinished={this.handleSplitPaneDragFinished}
|
||||
>
|
||||
<ScrollSyncPane>{editor}</ScrollSyncPane>
|
||||
<div className={previewClassName}>
|
||||
<div className={classnames(styles.previewPane, { [styles.blocker]: showEventBlocker })}>
|
||||
<PreviewPane
|
||||
collection={collection}
|
||||
entry={entry}
|
||||
|
Reference in New Issue
Block a user