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/util/ScriptManager.ts         |  1 -
 src/client/views/EditableView.tsx        |  7 +++++--
 src/client/views/nodes/ScriptingBox.scss | 11 ++++++++---
 src/client/views/nodes/ScriptingBox.tsx  | 10 ++++++----
 4 files changed, 19 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/util/ScriptManager.ts b/src/client/util/ScriptManager.ts
index d0b99e86f..785e63d9a 100644
--- a/src/client/util/ScriptManager.ts
+++ b/src/client/util/ScriptManager.ts
@@ -13,7 +13,6 @@ export class ScriptManager {
         return this._instance || (this._instance = new this());
     }
     private constructor() {
-        console.log("CONSTRUCTED");
         if (!ScriptManager._initialized) {
             ScriptManager._initialized = true;
             this.getAllScripts().forEach(scriptDoc => ScriptManager.addScriptToGlobals(scriptDoc));
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4f3da70d7..fafc30625 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -50,6 +50,7 @@ export interface EditableProps {
     toggle?: () => void;
     color?: string | undefined;
     onDrop?: any;
+    placeholder?: string;
 }
 
 /**
@@ -177,6 +178,7 @@ export class EditableView extends React.Component<EditableProps> {
                     onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true)}
                     onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
                     style={{ display: this.props.display, fontSize: this.props.fontSize }}
+                    placeholder={this.props.placeholder}
                 />;
         } else {
             this.props.autosuggestProps?.resetValue();
@@ -184,8 +186,9 @@ export class EditableView extends React.Component<EditableProps> {
                 <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`}
                     ref={this._ref}
                     style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
-                    onClick={this.onClick}>
-                    <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }}>{this.props.contents}</span>
+                    onClick={this.onClick} placeholder={this.props.placeholder}>
+
+                    <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
                 </div>
             );
         }
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