From 35d6f64256500494d044846be65142694dfff4ac Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 12 Jun 2020 16:33:08 -0500
Subject: changes to UI and slight bux fixes

---
 src/client/views/nodes/ScriptingBox.scss | 11 ++++++++---
 src/client/views/nodes/ScriptingBox.tsx  | 10 ++++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index a2e1ad267..d7fb7ca88 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -23,6 +23,8 @@
         display: flex;
         flex-direction: column;
         height: 100%;
+        max-height: 100%;
+        overflow: hidden;
         table-layout: fixed;
 
         white-space: nowrap;
@@ -33,6 +35,7 @@
             max-height: calc(100%-30px);
             display: flex;
             flex-direction: row;
+            overflow: scroll;
             justify-content: center;
 
             .descriptor {
@@ -165,7 +168,7 @@
                 box-sizing: border-box;
                 resize: none;
                 padding: 7px;
-                overflow-y: scroll;
+                overflow-y: clip;
             }
 
             .scriptingBox-paramInputs {
@@ -174,7 +177,7 @@
                 box-sizing: border-box;
                 resize: none;
                 padding: 2px;
-                overflow-y: scroll;
+                overflow-y: hidden;
             }
         }
 
@@ -182,11 +185,13 @@
             overflow: auto;
             background: "red";
             background-color: "red";
-            height: 40px;
+            height: 45px;
         }
 
         .scripting-params {
             background: rgb(241, 239, 235);
+            outline-style: solid;
+            outline-color: black;
         }
     }
 
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index 60cd02678..0ae57ca52 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -359,7 +359,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
 
     // rendering when a string's value can be set in applied UI
     renderString(parameter: string) {
-        return <div className="scriptingBox-paramInputs">
+        return <div className="scriptingBox-paramInputs" style={{ overflowY: "hidden" }}>
             <EditableView display={"block"} maxHeight={72} height={35} fontSize={14}
                 contents={this.dataDoc[parameter] ?? "undefined"}
                 GetValue={() => StrCast(this.dataDoc[parameter]) ?? "undefined"}
@@ -694,12 +694,14 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     // inputs for scripting div (script box, params box, and params column)
     @computed({ keepAlive: true }) get renderScriptingInputs() {
 
+        // should there be a border? style={{ borderStyle: "groove", borderBlockWidth: "1px" }}
         // params box on bottom
         const parameterInput = <div className="scriptingBox-params">
             <EditableView display={"block"} maxHeight={72} height={35} fontSize={22}
                 contents={""}
                 GetValue={returnEmptyString}
                 SetValue={value => value && value !== " " ? this.compileParam(value) : false}
+                placeholder={"enter parameters here"}
             />
         </div>;
 
@@ -744,11 +746,11 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     renderParamsInputs() {
         return <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected(true) && e.stopPropagation()} >
             {!this.compileParams.length || !this.paramsNames ? (null) :
-                <div className="scriptingBox-plist">
+                <div className="scriptingBox-plist" style={{ overflowY: "scroll" }}>
                     {this.paramsNames.map((parameter: string, i: number) =>
                         <div className="scriptingBox-pborder" onKeyPress={e => e.key === "Enter" && this._overlayDisposer?.()}  >
-                            <div className="scriptingBox-wrapper">
-                                <div className="scriptingBox-paramNames"> {`${parameter}:${this.paramsTypes[i]} = `} </div>
+                            <div className="scriptingBox-wrapper" style={{ maxHeight: "40px" }}>
+                                <div className="scriptingBox-paramNames" > {`${parameter}:${this.paramsTypes[i]} = `} </div>
                                 {this.paramsTypes[i] === "boolean" ? this.renderBoolean(parameter) : (null)}
                                 {this.paramsTypes[i] === "string" ? this.renderString(parameter) : (null)}
                                 {this.paramsTypes[i] === "number" ? this.renderNumber(parameter) : (null)}
-- 
cgit v1.2.3-70-g09d2