settings menu

2 files changed, 28 insertions, 25 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsSimulationBox.scss
index 9efe835a3..7573f1472 100644
--- a/src/client/views/nodes/PhysicsSimulationBox.scss
+++ b/src/client/views/nodes/PhysicsSimulationBox.scss
@@ -40,7 +40,7 @@ tr:nth-child(even) {
 }
 
 button {
- z-index: 5000;
+ z-index: 50;
 }
 
 .angleLabel {
@@ -54,14 +54,21 @@ button {
   width: 100%;
   height: 100%;
   font-size: 12px;
-  background-color: purple;
+  background-color: rgb(224, 224, 224);
   border-radius: 2px;
   border-color: black;
   border-style: solid;
-  z-index: 20000;
+  padding: 10px;
+  position: fixed;
+  z-index: 1000;
 }
 
-.mechanicsSimulationSettingsMenuRow {
+.mechanicsSimulationSettingsMenuColumn {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+}
+
+.mechanicsSimulationSettingsMenuContents {
   display: flex;
-  z-index: 20000;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsSimulationBox.tsx
index f0e009deb..7eb9092bf 100644
--- a/src/client/views/nodes/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsSimulationBox.tsx
@@ -361,16 +361,24 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
           <div style = {{width: this.layoutDoc._width+'px', height: this.layoutDoc._height+'px'}}>
             {this.menuIsOpen && (
               <div className="mechanicsSimulationSettingsMenu">
-                <div className="close-button" onClick={() => {this.menuIsOpen = false; this.dataDoc.simulationReset = !this.dataDoc.simulationReset;}} style={{zIndex: 20000}}>
-                    <FontAwesomeIcon icon={'times'} color="yellow" size={'lg'} />
+                <div className="close-button" onClick={() => {this.menuIsOpen = false; this.dataDoc.simulationReset = !this.dataDoc.simulationReset;}}>
+                    <FontAwesomeIcon icon={'times'} color="black" size={'lg'} />
                 </div>
-                <h4 style={{zIndex: 20000}}>Simulation Settings</h4>
-                {this.dataDoc.simulationType == "Free Weight" &&
-                  <div className="mechanicsSimulationSettingsMenuRow">
-                    <p style={{zIndex: 20000}}>Elastic collisions </p>
-                    <input type="checkbox" checked={this.dataDoc.elasticCollisions} onClick={() => {this.dataDoc.elasticCollisions = !this.dataDoc.elasticCollisions}}/>
+                <h4>Simulation Settings</h4>
+                <div className="mechanicsSimulationSettingsMenuContents">
+                  <div className="mechanicsSimulationSettingsMenuColumn">
+                    <div><p>Show forces</p></div>
+                    <div><p>Show acceleration</p></div>
+                    <div><p>Show velocity</p></div>
+                    {this.dataDoc.simulationType == "Free Weight" && <div><p>Elastic collisions </p></div>}
+                  </div>
+                  <div className="mechanicsSimulationSettingsMenuColumn">
+                    <div><input type="checkbox" checked={this.dataDoc.showForces} onClick={() => {this.dataDoc.showForces = !this.dataDoc.showForces}}/></div>
+                    <div><input type="checkbox" checked={this.dataDoc.showAcceleration}  onClick={() => {this.dataDoc.showAcceleration = !this.dataDoc.showAcceleration}}/></div>
+                    <div><input type="checkbox" checked={this.dataDoc.showVelocity} onClick={() => {this.dataDoc.showVelocity = !this.dataDoc.showVelocity}}/></div>
+                    {this.dataDoc.simulationType == "Free Weight" && <div><input type="checkbox" checked={this.dataDoc.elasticCollisions} onClick={() => {this.dataDoc.elasticCollisions = !this.dataDoc.elasticCollisions}}/></div>}
                   </div>
-                }
+                </div>
                 {/* {this.dataDoc.simulationType == "Inclined Plane" &&
                   <div className="mechanicsSimulationSettingsMenuRow">
                     <p>Inclined plane angle </p>
@@ -383,18 +391,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     <p>input field!</p>
                   </div>
                 } */}
-                <div className="mechanicsSimulationSettingsMenuRow">
-                  <p style={{zIndex: 20000}}>Show forces </p>
-                  <input type="checkbox" checked={this.dataDoc.showForces} onClick={() => {this.dataDoc.showForces = !this.dataDoc.showForces}}/>
-                </div>
-                <div className="mechanicsSimulationSettingsMenuRow">
-                  <p style={{zIndex: 20000}}>Show acceleration </p>
-                  <input type="checkbox" checked={this.dataDoc.showAcceleration}  onClick={() => {this.dataDoc.showAcceleration = !this.dataDoc.showAcceleration}}/>
-                </div>
-                <div className="mechanicsSimulationSettingsMenuRow">
-                  <p style={{zIndex: 20000}}>Show velocity </p>
-                  <input type="checkbox" checked={this.dataDoc.showVelocity} onClick={() => {this.dataDoc.showVelocity = !this.dataDoc.showVelocity}}/>
-                </div>
               </div>
             )}
           </div>