-
-
-
-
-
+ const renderMoveArrows = (showMoveArrows &&
+ <>
+
setMoveSource(!moveSource)} >
+
- ;
- },
+
setMoveBrew(!moveBrew)} >
+
+
+
+
+
+
+ );
- render : function(){
- return
-
- {React.cloneElement(this.props.children[0], {
- ...(this.props.showDividerButtons && {
- moveBrew : this.state.moveBrew,
- moveSource : this.state.moveSource,
- liveScroll : this.state.liveScroll,
- setMoveArrows : this.setMoveArrows,
- }),
- })}
+ const renderDivider = (
+
+ {showDividerButtons && renderMoveArrows}
+
+
+
+
+
+
+
+ {props.children[0]}
- {this.renderDivider()}
-
{this.props.children[1]}
-
+ );
+};
-const Pane = createClass({
- displayName : 'Pane',
- getDefaultProps : function() {
- return {
- width : null
- };
- },
- render : function(){
- let styles = {};
- if(this.props.width){
- styles = {
- flex : 'none',
- width : `${this.props.width}px`
- };
- } else {
- styles = {
- pointerEvents : this.props.isDragging ? 'none' : 'auto' //Disable mouse capture in the rightmost pane; dragging into the iframe drops the divider otherwise
- };
- }
+const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
+ const styles = width
+ ? { flex: 'none', width: `${width}px` }
+ : { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider
- return
- {this.props.children}
-
;
- }
-});
+ return (
+
+ {React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
+
+ );
+};
module.exports = SplitPane;
diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less
index e5b3dd7f8..8b61097be 100644
--- a/shared/naturalcrit/splitPane/splitPane.less
+++ b/shared/naturalcrit/splitPane/splitPane.less
@@ -1,69 +1,68 @@
-.splitPane{
+.splitPane {
position : relative;
display : flex;
+ flex-direction : row;
height : 100%;
outline : none;
- flex-direction : row;
- .pane{
+ .pane {
+ flex : 1;
overflow-x : hidden;
overflow-y : hidden;
- flex : 1;
}
- .divider{
- touch-action : none;
+ .divider {
+ position : relative;
display : table;
- height : 100%;
width : 15px;
- cursor : ew-resize;
- background-color : #bbb;
+ height : 100%;
text-align : center;
- .dots{
+ touch-action : none;
+ cursor : ew-resize;
+ background-color : #BBBBBB;
+ .dots {
display : table-cell;
- vertical-align : middle;
text-align : center;
- i{
+ vertical-align : middle;
+ i {
display : block !important;
margin : 10px 0px;
font-size : 6px;
- color : #666;
+ color : #666666;
}
}
- &:hover{
- background-color: #999;
- }
+ &:hover,&.dragging { background-color : #999999; }
}
- .arrow{
+ .arrow {
position : absolute;
+ left : 50%;
+ z-index : 999;
width : 25px;
height : 25px;
- border : 2px solid #bbb;
- border-radius : 15px;
- text-align : center;
font-size : 1.2em;
+ text-align : center;
cursor : pointer;
- background-color : #ddd;
- z-index : 999;
- box-shadow : 0 4px 5px #0000007f;
- &.left{
+ background-color : #DDDDDD;
+ border : 2px solid #BBBBBB;
+ border-radius : 15px;
+ box-shadow : 0 4px 5px #0000007F;
+ translate : -50%;
+ &.left {
.tooltipLeft('Jump to location in Editor');
top : 30px;
}
- &.right{
+ &.right {
.tooltipRight('Jump to location in Preview');
top : 60px;
}
- &.lock{
+ &.lock {
.tooltipRight('De-sync Editor and Preview locations.');
- top : 90px;
- background: #666;
+ top : 90px;
+ background : #666666;
}
- &.unlock{
+ &.unlock {
.tooltipRight('Sync Editor and Preview locations');
top : 90px;
}
- &:hover{
- background-color: #666;
- }
+ &:hover { background-color : #666666; }
}
}