script edition UX improvements

bin/cdb.css

@@ -196,12 +196,21 @@
   font-size: 75%;
 }
 .cdb .cdb-sheet td.t_script {
-  font-family: Courier;
   color: #CCC;
 }
+.cdb .cdb-sheet td.t_script div.script {
+  white-space: nowrap;
+  font-family: Consolas, Courier;
+  font-size: 80%;
+  max-height: 200px;
+  overflow: hidden;
+}
 .cdb .cdb-sheet td.t_script input,
 .cdb .cdb-sheet td.t_script textarea {
-  font-family: Courier;
+  font-family: Consolas, Courier;
+}
+.cdb .cdb-sheet td.t_script span {
+  display: inline-block;
 }
 .cdb .cdb-sheet td.t_script .kwd {
   color: #88F;
@@ -355,16 +364,12 @@
 .cdb .cdb-sheet td.t_file .preview:hover .previewContent {
   display: block;
 }
-.cdb .cdb-sheet td.t_script {
-  white-space: nowrap;
-  overflow: hidden;
-}
 .cdb .cdb-sheet div.cdb-script {
   position: relative;
 }
 .cdb .cdb-sheet div.cdb-script .codeeditor {
   min-width: 500px;
-  min-height: 200px;
+  min-height: 500px;
 }
 .cdb.cdb-obj-editor {
   margin-top: 10px;
@@ -381,6 +386,9 @@
 .cdb.cdb-obj-editor div.cdb-large .cdb-sheet {
   min-width: 0 !important;
 }
+.cdb.cdb-obj-editor div.cdb-script .codeeditor {
+  min-height: 300px;
+}
 .cdb .floating-thead {
   position: fixed;
   background-color: #222;

bin/cdb.less

@@ -221,10 +221,20 @@
 		}
 
 		td.t_script {
-			font-family : Courier;
+			div.script {
+				white-space: nowrap;
+				font-family : Consolas, Courier;
+				font-size: 80%;
+				max-height: 200px;
+				overflow: hidden;
+			}
 			input, textarea {
-				font-family : Courier;
+				font-family : Consolas, Courier;
 			}
+			span {
+				display: inline-block;
+			}
+
 			color : #CCC;
 			.kwd {
 				color : #88F;
@@ -398,16 +408,11 @@
 			}
 		}
 
-		td.t_script {
-			white-space: nowrap;
-			overflow: hidden;
-		}
-
 		div.cdb-script {
 			position : relative;
 			.codeeditor {
 				min-width: 500px;
-				min-height: 200px;
+				min-height: 500px;
 			}
 		}
 
@@ -427,6 +432,11 @@
 		div.cdb-large .cdb-sheet {
 			min-width: 0 !important;
 		}
+		div.cdb-script {
+			.codeeditor {
+				min-height: 300px;
+			}
+		}
 	}
 
 	.floating-thead {

bin/style.css

@@ -674,14 +674,14 @@ input[type=checkbox]:checked:after {
 }
 .hide-properties .cdb-large .cdb-obj-editor {
   position: fixed;
-  bottom: 0px;
-  right: 0px;
+  bottom: 20px;
+  max-height: 800px;
+  left: 20%;
+  right: 620px;
   z-index: 99;
-  width: 600px;
   overflow: auto;
-  padding: 10px;
+  padding: 2px;
   background: #111;
-  max-height: 50%;
   overflow-y: auto;
 }
 .hide-properties .cdb-large .btn-cdb-large {
@@ -1797,3 +1797,4 @@ div.sp-container input:hover {
   max-height: 800px;
   min-width: 600px;
 }
+/* Monaco */

bin/style.less

@@ -741,14 +741,14 @@ input[type=checkbox] {
 	.cdb-large {
 		.cdb-obj-editor {
 			position: fixed;
-			bottom : 0px;
-			right : 0px;
+			bottom : 20px;
+			max-height: 800px;
+			left: 20%;
+			right: 620px;
 			z-index: 99;
-			width: 600px;
 			overflow: auto;
-			padding: 10px;
+			padding: 2px;
 			background: #111;
-			max-height: 50%;
 			overflow-y: auto;
 		}
 		.btn-cdb-large {

hide/comp/CodeEditor.hx

@@ -23,6 +23,10 @@ class CodeEditor extends Component {
 			wordWrap : true,
 			minimap : { enabled : false },
 			theme : "vs-dark",
+			lineNumbersMinChars: 3,
+			fontSize: "13px",
+			mouseWheelZoom: true,
+			scrollBeyondLastLine: false
 		});
 		root.on("mousewheel", function(e) {
 			return false;

hide/comp/cdb/Cell.hx

@@ -257,8 +257,8 @@ class Cell extends Component {
 				var id = c.scope != null ? makeId(scope,c.scope,v) : v;
 				editor.isUniqueID(sheet,obj,id) ? v : '<span class="error">#DUP($v)</span>';
 			}
-		case TString if( c.kind == Script ):
-			v == "" ? "&nbsp;" : colorizeScript(c,v, sheet.idCol == null ? null : Reflect.field(obj, sheet.idCol.name));
+		case TString if( c.kind == Script ):  // wrap content in div because td cannot have max-height
+			v == "" ? "&nbsp;" : '<div class="script">${colorizeScript(c,v, sheet.idCol == null ? null : Reflect.field(obj, sheet.idCol.name))}</div>';
 		case TString, TLayer(_):
 			v == "" ? "&nbsp;" : StringTools.htmlEscape(v).split("\n").join("<br/>");
 		case TRef(sname):