Merge pull request #19 from ngwese/inline-repl

provide repl directly within the editor activity

app/src/activities.js

@@ -1,17 +1,19 @@
 import BoundEditActivity from './bound-edit-activity';
-import BoundReplActivity from './bound-repl-activity';
 import { ICONS } from './svg-icons';
+import { SIDEBAR_COMPONENT, REPL_COMPONENT } from './constants';
 
 const activities = [
     {
         selector: 'editor',
         icon: ICONS['file-text2'],
+        toggle: SIDEBAR_COMPONENT,
         view: BoundEditActivity,
     },
     {
-        selector: 'repl',
+        selector: 'editor',
         icon: ICONS['terminal'],
-        view: BoundReplActivity,
+        toggle: REPL_COMPONENT,
+        view: BoundEditActivity,
     }
 ];
 

app/src/activity-bar.js

@@ -6,13 +6,11 @@ import './activity-bar.css'
 class ActivityBar extends Component {
     render() {
         const items = this.props.activities.map(activity => {
-            const name = activity.selector;
-            const icon = activity.icon;
             return (
                 <IconButton
-                    key={name}
-                    action={() => this.props.buttonAction(name)}
-                    icon={icon}
+                    key={activity.selector + activity.toggle}
+                    action={() => this.props.buttonAction(activity)}
+                    icon={activity.icon}
                     color="#979797"   // FIXME: this should be styled
                     size="24"       // FIXME: this should be configurable?
                 />

app/src/bound-edit-activity.js

@@ -25,7 +25,9 @@ import {
 import {
     sidebarToggle,
     sidebarSize,
-} from './model/sidebar-actions';
+    replToggle,
+    replSize,
+} from './model/ui-actions';
 
 import {
     replSend,
@@ -83,7 +85,7 @@ const mapStateToProps = (state) => {
         activeBuffer,
         activeNode: getActiveNode(state.scripts),
         buffers,
-        sidebar: state.sidebar,
+        ui: state.ui,
         scriptListing: getScriptListing(state.scripts),
     }
 }
@@ -115,13 +117,20 @@ const mapDispatchToProps = (dispatch) => {
             dispatch(replSend(MATRON_COMPONENT, cmd))
         },
 
-        // sidebar
+        // ui
         sidebarToggle: () => {
             dispatch(sidebarToggle())
         },
         sidebarSize: (width) => {
             dispatch(sidebarSize(width))
         },
+        replToggle: () => {
+            dispatch(replToggle())
+        },
+        replSize: (height) => {
+            dispatch(replSize(height))
+        },
+
 
         // tools
         toolInvoke: (name) => {

app/src/bound-repl-activity.js

@@ -7,7 +7,6 @@ import {
     replConnect,
 } from './model/repl-actions';
 
-
 const isConnected = (state) => {
     return (component) => {
         let conn = state.repl.connections.get(component);
@@ -24,11 +23,12 @@ const isConnected = (state) => {
 const mapStateToProps = (state) => {
     // TODO: pull out the buffer and history for the active repl to avoid re-renders if output to no-active repl is received.
     let { activeRepl, endpoints, buffers, history } = state.repl;
-    return { 
+    return {
         activeRepl,
         endpoints,
-        buffers, 
+        buffers,
         history,
+        hidden: state.ui.replHidden,
         isConnected: isConnected(state),
      };
 }

app/src/bound-workspace.js

@@ -6,8 +6,8 @@ import {
 } from './model/activity-actions';
 
 import {
-    sidebarToggle,
-} from './model/sidebar-actions';
+    toggleComponent,
+} from './model/ui-actions';
 
 import {
     replEndpoints,
@@ -29,8 +29,8 @@ const mapDispatchToProps = (dispatch) => {
         activitySelect: (name) => {
             dispatch(activitySelect(name))
         },
-        sidebarToggle: () => {
-            dispatch(sidebarToggle())
+        toggleComponent: (name) => {
+            dispatch(toggleComponent(name))
         },
         replEndpoints: (api, cb) => {
             dispatch(replEndpoints(api, cb))

app/src/constants.js

@@ -5,4 +5,7 @@ export const UNTITLED_SCRIPT = "UNTITLED_SCRIPT";
 export const MATRON_COMPONENT = "matron";
 export const CRONE_COMPONENT = "crone";
 
+export const SIDEBAR_COMPONENT = "sidebar";
+export const REPL_COMPONENT = "repl";
+
 export const INVALID_NAME_CHARS = new Set(["/"]);

app/src/edit-activity.css

@@ -1,13 +1,3 @@
-.edit-activity {
-    display: flex;
-}
-
-/* .side-bar {
-    flex: 0 0 auto;
-    background-color: red;
-}
-*/
-
 .editor-container {
     flex-grow: 1 1 auto;
     background-color: green;
@@ -18,3 +8,68 @@
     background-color: rgb(175, 175, 175);
     height: 20px;
 }
+
+.editor-pane {
+    display: flex;
+}
+
+.editor-pane-common {
+    background-color: #F9F9F9;
+}
+
+
+.repl-pane {
+    display: flex;
+}
+
+/* sytling for react-split-pane */
+
+.Resizer {
+    background: #000;
+    opacity: .1;
+    z-index: 1;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+}
+
+ .Resizer:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+}
+
+ .Resizer.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
+}
+
+.Resizer.horizontal:hover {
+    border-top: 5px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+    border-left: 5px solid rgba(0, 0, 0, 0.5);
+    border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+  border-color: transparent;
+}