status bar

src/actions/uiActions.js

@@ -17,3 +17,8 @@ export const SET_THEME = "SET_THEME";
 export function setTheme(theme) {
   return { type: SET_THEME, theme };
 }
+
+export const SHOW_STATUSBAR = "SHOW_STATUSBAR";
+export function setStatusBar(value) {
+  return { type: SHOW_STATUSBAR, value };
+}

src/components/TextEditor/components/StatusBar.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+
+const StatusBar = (props) => {
+  const edit = props.editing;
+  return (
+    <div className="status-bar-container">
+      <p
+        className="status-bar-info"
+        className={props.theme === "light" ? "light-status" : "dark-status"}
+      >
+        {edit ? "Editing" : "Viewing"} line: {props.line + 1} col: {props.col + 1}{" "}
+      </p>
+    </div>
+  );
+};
+export default StatusBar;

src/components/TextEditor/components/TextEditor.js

@@ -5,6 +5,7 @@ import sketch from "../../../lib/";
 
 import EditorRadio from "./EditorRadio.js";
 import ShareSketchModal from "./ShareSketchModal";
+import StatusBar from "./StatusBar";
 
 import { Button } from "reactstrap";
 import OpenPanelButtonContainer from "../../common/containers/OpenPanelButtonContainer";
@@ -37,6 +38,7 @@ class TextEditor extends React.Component {
     this.state = {
       codeMirrorInstance: null,
       currentLine: 0,
+      currentColumn: 0,
       sketch: null,
       showForkModal: false,
       forking: false,
@@ -102,17 +104,16 @@ class TextEditor extends React.Component {
     }
     this.props.setProgramCode(this.props.mostRecentProgram, newCode);
   };
-
   setCurrentLine = (cm) => {
     const { codeMirrorInstance, currentLine } = this.state;
-    let { line } = cm.getCursor();
+    let { line, ch } = cm.getCursor();
     if (codeMirrorInstance) {
       //removeLineClass removes the back highlight style from the last selected line
       codeMirrorInstance.removeLineClass(currentLine, "wrap", "selected-line");
       //addLineClass adds the style to the newly selected line
       codeMirrorInstance.addLineClass(line, "wrap", "selected-line");
     }
-    this.setState({ currentLine: line });
+    this.setState({ currentLine: line, currentColumn: ch });
   };
 
   renderForkModal = () => {
@@ -299,6 +300,7 @@ class TextEditor extends React.Component {
             showModal={this.state.showShareModal}
             toggleModal={this.toggleShareModal}
           />
+
           <div
             className="text-editor-container"
             style={{
@@ -322,6 +324,16 @@ class TextEditor extends React.Component {
               onBeforeChange={this.updateCode}
               onChange={this.updateCode}
             />
+            {this.props.statusBar ? (
+              <StatusBar
+                editing={!this.props.viewOnly}
+                line={this.state.currentLine}
+                col={this.state.currentColumn}
+                theme={this.props.theme}
+              />
+            ) : (
+              ""
+            )}
           </div>
         </div>
       </div>

src/components/TextEditor/containers/TextEditorContainer.js

@@ -19,6 +19,7 @@ const mapStateToProps = (state, ownProps) => {
     mostRecentProgram,
     theme: ownProps.theme,
     uid,
+    statusBar: state.ui.statusBar,
   };
 };
 

src/components/common/ProfilePanel.js

@@ -263,7 +263,7 @@ class ProfilePanel extends React.Component {
     }
 
     panelButtons.push(this.renderSignOutButton());
-
+    //panelButtons.push(this.renderShowStatusBar()); //Status bar. temporarily removed before collab coding
     return <div className="panel-buttons">{panelButtons}</div>;
   };
 
@@ -316,6 +316,20 @@ class ProfilePanel extends React.Component {
     </div>
   );
 
+  renderShowStatusBar = () => {
+    return (
+      <Button
+        className="panel-button"
+        key="sign-out-button"
+        id="sign-out-button"
+        size="lg"
+        block
+        onClick={() => this.props.setStatusBar(!this.props.statusBar)}
+      >
+        <span className="panel-button-text">Status Bar</span>
+      </Button>
+    );
+  };
   renderContent = () => (
     <div className="panel-content">
       {this.renderPanelImage()}
@@ -326,7 +340,6 @@ class ProfilePanel extends React.Component {
       {this.renderThemeSwitch()}
     </div>
   );
-
   renderCollapseButton = () => (
     <div className="panel-collapse-button" onClick={this.props.togglePanel}>
       <FontAwesomeIcon icon={faTimes} />

src/components/common/containers/ProfilePanelContainer.js

@@ -1,7 +1,7 @@
 import ProfilePanel from "../ProfilePanel";
 import { connect } from "react-redux";
 import { setDisplayName, setPhotoName } from "../../../actions/userDataActions";
-import { togglePanel } from "../../../actions/uiActions";
+import { setStatusBar, togglePanel } from "../../../actions/uiActions";
 import { DEFAULT_PHOTO_NAME, CLOSED_PANEL_LEFT, OPEN_PANEL_LEFT } from "../../../constants";
 
 const mapStateToProps = (state, ownProps) => {
@@ -12,18 +12,20 @@ const mapStateToProps = (state, ownProps) => {
     screenHeight: state.ui.screenHeight,
     left: state.ui.panelOpen ? OPEN_PANEL_LEFT : CLOSED_PANEL_LEFT,
     theme: ownProps.theme,
+    statusBar: state.ui.statusBar,
   };
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
     onThemeChange: ownProps.onThemeChange,
     collectUserPhoto: () => {},
-    setDisplayName: name => dispatch(setDisplayName(name)),
-    setPhotoName: name => dispatch(setPhotoName(name)),
+    setDisplayName: (name) => dispatch(setDisplayName(name)),
+    setPhotoName: (name) => dispatch(setPhotoName(name)),
     togglePanel: () => {
       dispatch(togglePanel());
     },
+    setStatusBar: (value) => dispatch(setStatusBar(value)),
   };
 };
 

src/reducers/uiReducer.js

@@ -1,10 +1,17 @@
-import { SCREEN_RESIZE, TOGGLE_PANEL, SET_PANEL, SET_THEME } from "../actions/uiActions";
+import {
+  SCREEN_RESIZE,
+  TOGGLE_PANEL,
+  SET_PANEL,
+  SET_THEME,
+  SHOW_STATUSBAR,
+} from "../actions/uiActions";
 
 const initialState = {
   screenWidth: typeof window === "object" ? window.innerWidth : null,
   screenHeight: typeof window === "object" ? window.innerHeight : null,
   panelOpen: false,
   theme: "dark",
+  statusBar: false,
 };
 
 function uiReducer(state = initialState, action) {
@@ -17,6 +24,8 @@ function uiReducer(state = initialState, action) {
       return Object.assign({}, state, { panelOpen: action.value });
     case SET_THEME:
       return Object.assign({}, state, { theme: action.theme });
+    case SHOW_STATUSBAR:
+      return Object.assign({}, state, { statusBar: action.value });
     default:
       return state;
   }

src/styles/Editor.scss

@@ -32,11 +32,10 @@
   padding: 4px;
   border-radius: 25px;
   @include themify($themes) {
-    background-color: themed("cardBackground")
-}
+    background-color: themed("cardBackground");
+  }
 }
 
-
 .program-sketch-name {
   flex: 0 1 auto;
   @include themify($themes) {
@@ -47,7 +46,6 @@
   margin-left: 1em;
 }
 
-
 .code-section-banner {
   display: flex;
   flex-direction: row;
@@ -179,4 +177,19 @@
   background-color: rgb(255, 255, 255);
   padding: 40px;
   border-radius: 20px;
-}
+}
+
+.status-bar-container {
+  @include themify($themes) {
+    background-color: themed("backgroundColor");
+  }
+  margin-left: 60%;
+  padding: 10px 20px 0px;
+  position: absolute;
+  bottom: 0%;
+  width: fit-content;
+}
+
+.status-bar-info {
+  font-size: 25px;
+}

src/styles/Panel.scss

@@ -230,6 +230,13 @@
   }
 }
 
+.statusbar-button {
+  @include themify($themes) {
+    color: themed("color");
+    border-color: themed("backgroundColor");
+    background-color: themed("backgroundColor");
+  }
+}
 .panel-button:hover,
 .panel-button:active {
   @include themify($themes) {