Merge pull request #532 from jf-kelly/fontsize

Font Size
engaging-computing · Feb 16, 2022 · 3791245 · 3791245
2 parents 19ba2ac + c57196c
commit 3791245
Show file tree

Hide file tree

Showing 18 changed files with 196 additions and 34 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -4,4 +4,5 @@ export { default as ProjectActions } from "./projectActions";
 export { default as SceneActions } from "./sceneActions";
 export { default as CourseActions } from "./courseActions";
 export { default as CollectionActions } from "./collectionActions";
-export { default as ReferenceExampleActions } from "./referenceExampleActions";
+export { default as ReferenceExampleActions } from "./referenceExampleActions";
+export { default as UserActions } from "./userActions";
diff --git a/src/actions/sceneActions.js b/src/actions/sceneActions.js
@@ -117,5 +117,5 @@ export default {
     toggleDefaultLight,
     toggleCastShadow,
     toggleLightIndicator,
-    updateMoveSpeed
+    updateMoveSpeed,
 };
diff --git a/src/actions/userActions.js b/src/actions/userActions.js
@@ -0,0 +1,47 @@
+import * as types from "../constants/ActionTypes";
+
+const googleLoginRef = "apiv1/googlelogins";
+
+export function updateFontSize(fontSize){
+    return{ type: types.UPDATE_FONT_SIZE, fontSize };
+}
+
+export function updateUserSettings(id,settings){
+    return ()=>{
+        if(id){
+            fetch(`${googleLoginRef}/settings`,{
+                method:"PUT",
+                body:JSON.stringify(settings),
+                headers: { 
+                    "Content-Type":"application/json",
+                    "x-access-token":id
+                }
+            });
+        }
+    };
+}
+
+export function asyncUserSettings(id){
+    return dispatch => {
+        if(id){
+            fetch(`${googleLoginRef}/settings`,{headers:{"x-access-token": id}}).then(response=>{
+                if(response.status === 200){
+                    response.json().then(json =>{
+                        dispatch(syncUserSettings(json));
+                    });
+                }
+            });
+        }
+    };
+}
+
+export function syncUserSettings(settings){
+    return { type: types.SYNC_USER_SETTINGS, settings: settings };
+}
+
+export default {
+    updateFontSize,
+    asyncUserSettings,
+    syncUserSettings,
+    updateUserSettings
+};
diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js
@@ -8,6 +8,7 @@ import "brace/ext/language_tools";
 import customCompleter from "./customCompleter.js";
 import KeyboardShortcut from "./KeyboardShortcut.js";
 import { browserType } from "../../utils/browserType";
+import FontSize from "./FontSize.js";
 
 /**
  * Editor is a React Component that creat the Ace Editor in the DOM.
@@ -45,6 +46,8 @@ class Editor extends Component {
                 event.returnValue = "You may have unsaved scene changes!";
             }
         });
+
+        this.setState({"previousSettings":this.props.settings});
     }
 
     onLoad() {
@@ -53,6 +56,14 @@ class Editor extends Component {
             "esversion": 6
         }]);
     }
+
+    componentDidUpdate(){
+        if(JSON.stringify(this.state.previousSettings) !== JSON.stringify(this.props.settings) &&
+        this.props.user) {
+            this.props.userActions.updateUserSettings(this.props.user.uid,this.props.settings);
+            this.setState({"previousSettings":this.props.settings});
+        }
+    }
 
     /**
      * Creates the editor in the DOM
@@ -70,14 +81,16 @@ class Editor extends Component {
                     // eslint-disable-next-line
                     ref="aceEditor"
                     theme="github"
+                    fontSize = {this.props.settings.fontSize}
                     value={this.props.text}
                     width="100%"
                     wrapEnabled={true}
                     enableBasicAutocompletion={false}
                     enableLiveAutocompletion={true}
                     onLoad={this.onLoad}
                 />
-                { browserType() === "desktop" ? <KeyboardShortcut/> : null }
+                { browserType() === "desktop" ? <div><KeyboardShortcut/> 
+                    <FontSize userActions={this.props.userActions} settings={this.props.settings}/></div> : null }
             </div>
         );
     }

diff --git a/src/components/editor/FontSize.js b/src/components/editor/FontSize.js
@@ -0,0 +1,40 @@
+import React from "react";
+import {
+    Select,
+    Button,
+    Tooltip,
+    Icon
+} from "@material-ui/core";
+import "../../css/KeyboardShortcut.css";
+
+const options=[12, 14, 18, 24, 30, 36, 48];
+class FontSize extends React.Component {
+
+    handleFontSizeUpdate = (e) => {
+        this.props.userActions.updateFontSize(e.target.value);
+    }
+
+    render(){
+        return(
+            <div className="font">
+                <Tooltip title="Font Size">
+                    <Button className="font-button"
+                        variant="contained"
+                        size="small"
+                        color="primary">
+                        <Icon className="material-icons">format_size</Icon>
+                        <Select className="select"
+                            labelId="input-label"
+                            defaultValue = {12}
+                            value = {this.props.settings.fontSize}
+                            onChange = {this.handleFontSizeUpdate}>
+                            {options.map(size=>(<option value={size}>{size}</option>))}
+                        </Select> 
+                    </Button>
+                </Tooltip>
+            </div> 
+        );
+    }
+}
+export default FontSize;
+
diff --git a/src/components/editor/KeyboardShortcut.js b/src/components/editor/KeyboardShortcut.js
@@ -103,7 +103,7 @@ class KeyboardShortcut extends React.Component {
 
     render(){
         return(
-            <div>
+            <div className="whole-keyboard">
                 <Tooltip title="Keyboard Shortcut">
                     <Button
                         variant="contained"

diff --git a/src/components/layouts/Collection.js b/src/components/layouts/Collection.js
@@ -7,13 +7,14 @@ import SelectProject from "../collection/SelectProject.js";
 
 import * as layoutTypes from "../../constants/LayoutTypes.js";
 
-export const Collection = ({ editor, editorActions, user, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, collectionActions, collections }) => (
+export const Collection = ({ editor, editorActions, user, userSettings, userActions, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, collectionActions, collections }) => (
     <div className="App">
         <Header
             logging={authActions}
             sceneActions={sceneActions}
             actions={editorActions}
             user={user}
+            userActions={userActions}
             scene={scene}
             text={editor.text}
             message={editor.message}
@@ -39,7 +40,7 @@ export const Collection = ({ editor, editorActions, user, authActions, scene, sc
                     savedText={editor.savedText} 
                 />
                 <div className='collection'>
-                    <Editor text={editor.text} user={user} savedText={editor.savedText} />
+                    <Editor text={editor.text} user={user} settings={userSettings} savedText={editor.savedText} />
                 </div>
             </div>
             <div id="scene" className="col-12 col-md-8">

diff --git a/src/components/layouts/Guided.js b/src/components/layouts/Guided.js
@@ -7,14 +7,15 @@ import View from "../structural/View";
 
 import * as layoutTypes from "../../constants/LayoutTypes.js";
 
-export const Guided = ({ editor, user, scene, editorActions, authActions, projectActions, projects, courseActions, courses, course, match, sceneActions, collectionActions, collections }) => (
+export const Guided = ({ editor, user, usersettings, userActions, scene, editorActions, authActions, projectActions, projects, courseActions, courses, course, match, sceneActions, collectionActions, collections }) => (
     <div className="App">
         <Header
             viewOnly={scene.settings.viewOnly}
             logging={authActions}
             sceneActions={sceneActions}
             actions={editorActions}
             user={user}
+            userActions={userActions}
             scene={scene}
             text={editor.text}
             message={editor.message}
@@ -42,7 +43,7 @@ export const Guided = ({ editor, user, scene, editorActions, authActions, projec
                         <div id="interface" className="col-12 col-md-4">
                             <Course lesson={courses.currentLesson} courses={courses} course={course} courseName={match.params.shortname} actions={editorActions} courseActions={courseActions} savedText={editor.savedText}/>
                             <div className='guided'>
-                                <Editor refresh={editorActions.refresh} render={editorActions.render} text={editor.text} user={user} savedText={editor.savedText} />
+                                <Editor refresh={editorActions.refresh} render={editorActions.render} text={editor.text} user={user} settings={usersettings} savedText={editor.savedText} />
                             </div>
                         </div>
                         <div id="scene" className="col-12 col-md-8">

diff --git a/src/components/layouts/Ide.js b/src/components/layouts/Ide.js
@@ -7,7 +7,7 @@ import Banner from "../structural/header/Banner";
 
 import * as layoutTypes from "../../constants/LayoutTypes.js";
 
-export const Ide = ({ editor, editorActions, user, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, collectionActions, collections }) => (
+export const Ide = ({ editor, editorActions, user, usersettings, userActions, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, collectionActions, collections }) => (
     <div className="App">
         <Banner 
             endpoint="/apiv1/notifications"
@@ -21,6 +21,8 @@ export const Ide = ({ editor, editorActions, user, authActions, scene, sceneActi
             sceneActions={sceneActions}
             actions={editorActions}
             user={user}
+            settings={usersettings}
+            userActions={userActions}
             scene={scene}
             text={editor.text}
             message={editor.message}
@@ -44,7 +46,7 @@ export const Ide = ({ editor, editorActions, user, authActions, scene, sceneActi
                     :
                     <>
                         <div id="interface" className="col-12 col-md-4" >
-                            <Editor refresh={editorActions.refresh} render={editorActions.render} text={editor.text} user={user} savedText={editor.savedText} />
+                            <Editor refresh={editorActions.refresh} render={editorActions.render} text={editor.text} user={user} settings={usersettings} savedText={editor.savedText} userActions={userActions} />
                         </div>
                         <div id="scene" className="col-12 col-md-8" >
                             <View objects={editor.objects} sceneConfig={scene} assets={editor.assets} />

diff --git a/src/components/structural/header/Header.js b/src/components/structural/header/Header.js
@@ -165,7 +165,7 @@ class Header extends Component {
                     event.returnValue = "You may have unsaved changes!";
                 }
             });
-        }
+        }   
     }
 
 
@@ -207,6 +207,8 @@ class Header extends Component {
 
         this.props.projectActions.asyncUserProj(this.props.user.uid);
         this.props.collectionActions.asyncCollections(this.props.user.uid);
+        this.props.userActions.asyncUserSettings(this.props.user.uid);
+
         this.setRefreshTime(googleAuth.tokenObj.expires_at);
 
         //send uid to google analyrica
@@ -770,6 +772,8 @@ class Header extends Component {
                         sceneActions={this.props.sceneActions}
                         collectionActions={this.props.collectionActions}
                         user={this.props.user}
+                        settings={this.props.settings}
+                        userActions={this.props.userActions}
                         handleRender={this.handleRender}
                         handleSave={this.handleSave}
                         handleSaveClose={this.handleSaveClose}

diff --git a/src/components/structural/header/SceneConfigMenu.js b/src/components/structural/header/SceneConfigMenu.js
@@ -759,4 +759,4 @@ class ConfigModal extends Component {
 
 const SceneConfigMenu = withStyles(modelStyles)(ConfigModal);
 
-export default SceneConfigMenu;
+export default SceneConfigMenu;
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
@@ -46,6 +46,9 @@ export const TOGGLE_CAST_SHADOW = "TOGGLE_CAST_SHADOW";
 export const TOGGLE_LIGHT_INDICATOR = "TOGGLE_LIGHT_INDICATOR";
 export const UPDATE_MOVE_SPEED = "UPDATE_MOVE_SPEED";
 
+export const SYNC_USER_SETTINGS = "SYNC_USER_SETTINGS";
+export const UPDATE_FONT_SIZE = "UPDATE_FONT_SIZE";
+
 export const SYNC_CLASSES = "SYNC_CLASSES";
 export const SYNC_CLASS = "SYNC_CLASS";
 export const DELETE_CLASS = "DELETE_CLASS";

diff --git a/src/containers/Collection.js b/src/containers/Collection.js
@@ -1,12 +1,8 @@
 import Collection from "../components/layouts/Collection.js";
 import PropTypes from "prop-types";
 
-import * as AuthActions from "../actions/authActions.js";
-import * as EditorActions from "../actions/editorActions.js";
-import * as ProjectActions from "../actions/projectActions.js";
-import * as SceneActions from "../actions/sceneActions.js";
-import * as CourseActions from "../actions/courseActions.js";
-import * as CollectionActions from "../actions/collectionActions.js";
+import * as Actions from "../actions";
+
 
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
@@ -28,6 +24,7 @@ Collection.propTypes = {
 const mapStateToProps = state => ({
     editor: state.editor,
     user: state.user.user,
+    userSettings: state.user.settings,
     scene: state.scene,
     projects: state.project,
     courses: state.courses,
@@ -39,12 +36,13 @@ const mapStateToProps = state => ({
  * @param {*} dispatch !!!DESCRIPTION NEEDED!!!
  */
 const mapDispatchToProps = dispatch => ({
-    editorActions: bindActionCreators(EditorActions, dispatch),
-    authActions: bindActionCreators(AuthActions, dispatch),
-    sceneActions: bindActionCreators(SceneActions, dispatch),
-    projectActions: bindActionCreators(ProjectActions, dispatch),
-    courseActions: bindActionCreators(CourseActions, dispatch),
-    collectionActions: bindActionCreators(CollectionActions, dispatch)
+    editorActions: bindActionCreators(Actions.EditorActions, dispatch),
+    authActions: bindActionCreators(Actions.AuthActions, dispatch),
+    sceneActions: bindActionCreators(Actions.SceneActions, dispatch),
+    projectActions: bindActionCreators(Actions.ProjectActions, dispatch),
+    courseActions: bindActionCreators(Actions.CourseActions, dispatch),
+    collectionActions: bindActionCreators(Actions.CollectionActions, dispatch),
+    userActions: bindActionCreators(Actions.UserActions, dispatch),
 });
 
 /**

diff --git a/src/containers/Guided.js b/src/containers/Guided.js
@@ -21,6 +21,7 @@ Guided.propTypes = {
 const mapStateToProps = state => ({
     editor: state.editor,
     user: state.user.user,
+    usersettings: state.user.settings,
     scene: state.scene,
     lesson: state.courses.currentLesson,
     projects: state.project,
@@ -39,7 +40,8 @@ const mapDispatchToProps = dispatch => ({
     sceneActions: bindActionCreators(Actions.SceneActions, dispatch),
     projectActions: bindActionCreators(Actions.ProjectActions, dispatch),
     courseActions: bindActionCreators(Actions.CourseActions, dispatch),
-    collectionActions: bindActionCreators(Actions.CollectionActions, dispatch)
+    collectionActions: bindActionCreators(Actions.CollectionActions, dispatch),
+    userActions: bindActionCreators(Actions.UserActions, dispatch),
 });
 
 /**

diff --git a/src/containers/Ide.js b/src/containers/Ide.js
@@ -21,6 +21,7 @@ Ide.propTypes = {
 const mapStateToProps = state => ({
     editor: state.editor,
     user: state.user.user,
+    usersettings: state.user.settings,
     scene: state.scene,
     projects: state.project,
     courses: state.courses,
@@ -37,7 +38,8 @@ const mapDispatchToProps = dispatch => ({
     sceneActions: bindActionCreators(Actions.SceneActions, dispatch),
     projectActions: bindActionCreators(Actions.ProjectActions, dispatch),
     courseActions: bindActionCreators(Actions.CourseActions, dispatch),
-    collectionActions: bindActionCreators(Actions.CollectionActions, dispatch)
+    collectionActions: bindActionCreators(Actions.CollectionActions, dispatch),
+    userActions: bindActionCreators(Actions.UserActions, dispatch),
 });
 
 /**

diff --git a/src/css/KeyboardShortcut.css b/src/css/KeyboardShortcut.css
@@ -18,4 +18,23 @@
 
 .note {
     margin-left: 1%;
+}
+
+.font-button {
+    height:33px;
+    width:70px;
+}
+
+.font {
+    display: inline-block;
+    margin-left:2px;
+}
+
+.whole-keyboard {
+    display: inline-block;
+}
+
+.select {
+    color: white !important;
+    margin-left: 5px;
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -759,4 +759,4 @@ class ConfigModal extends Component {

		const SceneConfigMenu = withStyles(modelStyles)(ConfigModal);

		export default SceneConfigMenu;
		export default SceneConfigMenu;