status bar

.eslintcache

@@ -0,0 +1 @@
+[{"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\index.js":"1","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\containers\\AppContainer.js":"2","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\reducers\\index.js":"3","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\containers\\MainContainer.js":"4","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\app.js":"5","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\reducers\\programsReducer.js":"6","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Login.js":"7","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\EditorAndOutput\\EditorAndOutput.js":"8","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Sketches\\index.js":"9","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Sketches\\containers\\EditSketchModalContainer.js":"10","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\common\\OpenPanelButton.js":"11","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Sketches\\components\\DropdownButton.js":"12","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\lib\\sketch.js":"13","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\TextEditor\\components\\StatusBar.js":"14","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\TextEditor\\components\\TextEditor.js":"15","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\common\\ProfilePanel.js":"16","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\reducers\\uiReducer.js":"17","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\actions\\uiActions.js":"18","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\common\\containers\\ProfilePanelContainer.js":"19","D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\TextEditor\\containers\\TextEditorContainer.js":"20"},{"size":764,"mtime":1612404807718,"results":"21","hashOfConfig":"22"},{"size":1623,"mtime":1602724010484,"results":"23","hashOfConfig":"22"},{"size":407,"mtime":1602724010893,"results":"24","hashOfConfig":"22"},{"size":2155,"mtime":1612404807696,"results":"25","hashOfConfig":"22"},{"size":6586,"mtime":1612404807625,"results":"26","hashOfConfig":"22"},{"size":1268,"mtime":1602724010900,"results":"27","hashOfConfig":"22"},{"size":4931,"mtime":1602724006777,"results":"28","hashOfConfig":"22"},{"size":3621,"mtime":1602724006775,"results":"29","hashOfConfig":"22"},{"size":5955,"mtime":1612404807589,"results":"30","hashOfConfig":"22"},{"size":801,"mtime":1602724009096,"results":"31","hashOfConfig":"22"},{"size":789,"mtime":1602724010456,"results":"32","hashOfConfig":"22"},{"size":2280,"mtime":1602724008820,"results":"33","hashOfConfig":"22"},{"size":738,"mtime":1602724010785,"results":"34","hashOfConfig":"22"},{"size":482,"mtime":1613086981399,"results":"35","hashOfConfig":"22"},{"size":11539,"mtime":1613087017437,"results":"36","hashOfConfig":"22"},{"size":10474,"mtime":1613088242026,"results":"37","hashOfConfig":"22"},{"size":1003,"mtime":1613086930261,"results":"38","hashOfConfig":"22"},{"size":634,"mtime":1613086901589,"results":"39","hashOfConfig":"22"},{"size":1259,"mtime":1613087549546,"results":"40","hashOfConfig":"22"},{"size":1564,"mtime":1613087652148,"results":"41","hashOfConfig":"22"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xdarae",{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"78","messages":"79","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"80","messages":"81","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\index.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\containers\\AppContainer.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\reducers\\index.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\containers\\MainContainer.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\app.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\reducers\\programsReducer.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Login.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\EditorAndOutput\\EditorAndOutput.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Sketches\\index.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Sketches\\containers\\EditSketchModalContainer.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\common\\OpenPanelButton.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\Sketches\\components\\DropdownButton.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\lib\\sketch.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\TextEditor\\components\\StatusBar.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\TextEditor\\components\\TextEditor.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\common\\ProfilePanel.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\reducers\\uiReducer.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\actions\\uiActions.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\common\\containers\\ProfilePanelContainer.js",[],"D:\\Projects\\TeachLA\\TeachLAFrontend\\src\\components\\TextEditor\\containers\\TextEditorContainer.js",[]]

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,17 @@
+import React, { useState } from "react";
+
+const StatusBar = (props) => {
+  const edit = props.editing;
+  const textStyle = { color: "white" };
+  if (props.theme === "light") {
+    textStyle.color = "black";
+  }
+  return (
+    <div className="status-bar-container">
+      <p className="status-bar-info" style={textStyle}>
+        {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

@@ -316,6 +316,19 @@ class ProfilePanel extends React.Component {
     </div>
   );
 
+  renderShowStatusBar = () => {
+    let onToggle = () => {
+      console.log(this.props);
+      this.props.setStatusBar(!this.props.statusBar);
+    };
+    return (
+      <div className="panel-button">
+        <button className="statusbar-button" onClick={() => onToggle()}>
+          <span> Status Bar</span>
+        </button>
+      </div>
+    );
+  };
   renderContent = () => (
     <div className="panel-content">
       {this.renderPanelImage()}
@@ -324,6 +337,7 @@ class ProfilePanel extends React.Component {
       {this.renderErrorMessage(this.state.displayNameMessage)}
       {this.renderButtons()}
       {this.renderThemeSwitch()}
+      {this.renderShowStatusBar()}
     </div>
   );
 

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) {