Fixed bug with splitting lines on preview mode change

qilin-editor · Sep 22, 2016 · cbcaae4 · cbcaae4
1 parent 9c5b6ce
commit cbcaae4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/client/scripts/components/App.react.js b/client/scripts/components/App.react.js
@@ -6,13 +6,13 @@ import Alerts               from "./alerts/Alerts.react";
 
 export default class App extends Component {
     state = {
-        isPreviewVisible : false,
+        isPreviewVisible : false
     }
 
     togglePreview = () => {
         this.setState( {
             isPreviewVisible : ! this.state.isPreviewVisible
-        } )
+        } );
     }
 
     render() {

diff --git a/client/scripts/components/AppContent.react.js b/client/scripts/components/AppContent.react.js
@@ -1,28 +1,29 @@
 import React, { Component } from "react";
+import className            from "classnames";
 
 import SplitPane        from "react-split-pane";
 import EditorEditable   from "./editor/EditorEditable.react";
 import EditorPreview    from "./editor/EditorPreview.react";
 
 export default class AppContent extends Component {
-    renderSplitPane() {
-        if ( ! this.props.isPreviewVisible ) {
-            return <EditorEditable />;
-        }
-
-        return (
-            <SplitPane split="vertical" minSize={50} defaultSize="50%" primary="second">
-                <EditorEditable />
-                <EditorPreview />
-            </SplitPane>
-        )
-    }
-
     render() {
+        const splitPaneClasses = className( "app-content-pane", {
+            "is-preview-hidden" : ! this.props.isPreviewVisible
+        } );
+
         return (
             <div className="app-content">
                 <div className="app-content-main">
-                    {this.renderSplitPane()}
+                    <SplitPane
+                        split="vertical"
+                        minSize={300}
+                        maxSize={-300}
+                        defaultSize="50%"
+                        className={splitPaneClasses}
+                    >
+                        <EditorEditable />
+                        <EditorPreview />
+                    </SplitPane>
                 </div>
             </div>
         );

diff --git a/client/scripts/stores/EditorStore.js b/client/scripts/stores/EditorStore.js
@@ -5,8 +5,8 @@ class EditorStore extends BaseStore {
     constructor() {
         super();
 
-        this.path    = null;
-        this.content = null;
+        this.path    = "";
+        this.content = "";
 
         this.subscribe( action => {
             switch ( action.type ) {

diff --git a/client/styles/components/_appContent.scss b/client/styles/components/_appContent.scss
@@ -19,5 +19,15 @@
 
     .app-content-main {
         flex: 1;
+
+        .is-preview-hidden {
+            .Pane1 {
+                width: 100vw !important;
+            }
+
+            .Pane2 {
+                width: 0 !important;
+            }
+        }
     }
 }
diff --git a/client/styles/vendor/_codeMirror.scss b/client/styles/vendor/_codeMirror.scss
@@ -21,8 +21,8 @@
     .CodeMirror-line {
         line-height: 1.35rem;
 
-        padding-left: 7.5%;
-        padding-right: 7.5%;
+        padding-left: 2rem;
+        padding-right: 2rem;
     }
 
     .CodeMirror-cursor {
@@ -76,7 +76,7 @@
 
     .cm-quote:before {
         position: absolute;
-        left: 5%;
+        left: 1rem;
 
         width: .5rem;
         height: 100%;