[cdb] Gradient and curves now properly displays in collapsed properties

bin/cdb.css

@@ -362,52 +362,64 @@
   height: 100%;
 }
 .cdb .cdb-sheet td.t_curve .cdb-curve {
-  transform: scaleY(-1);
+  display: block;
   height: 50px;
   width: 100%;
 }
-.cdb .cdb-sheet td.t_curve .cdb-curve path {
+.cdb .cdb-sheet .cdb-curve {
+  display: inline-block;
+  transform: scaleY(-1);
+  height: 1em;
+  width: 50px;
+}
+.cdb .cdb-sheet .cdb-curve path {
   fill: transparent;
   stroke-width: 0.5px;
   shape-rendering: geometricPrecision;
   vector-effect: non-scaling-stroke;
 }
-.cdb .cdb-sheet td.t_curve .cdb-curve .x-axis,
-.cdb .cdb-sheet td.t_curve .cdb-curve .y-axis {
+.cdb .cdb-sheet .cdb-curve .x-axis,
+.cdb .cdb-sheet .cdb-curve .y-axis {
   stroke: #AAA;
 }
-.cdb .cdb-sheet td.t_curve .cdb-curve .curve {
+.cdb .cdb-sheet .cdb-curve .curve {
   stroke: white;
 }
 .cdb .cdb-sheet td.t_gradient {
   width: 100%;
   height: 100%;
 }
+.cdb .cdb-sheet td.t_gradient.edit .cdb-gradient {
+  visibility: hidden;
+}
 .cdb .cdb-sheet td.t_gradient .cdb-gradient {
-  position: relative;
+  display: block;
   width: 100%;
   height: 100%;
   min-height: 25px;
   min-width: 50px;
 }
-.cdb .cdb-sheet td.t_gradient .cdb-gradient .inner-gradient,
-.cdb .cdb-sheet td.t_gradient .cdb-gradient .alpha-bg {
+.cdb .cdb-sheet .cdb-gradient {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  height: 1em;
+}
+.cdb .cdb-sheet .cdb-gradient .inner-gradient,
+.cdb .cdb-sheet .cdb-gradient .alpha-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
-.cdb .cdb-sheet td.t_gradient .cdb-gradient .alpha-bg {
+.cdb .cdb-sheet .cdb-gradient .alpha-bg {
   z-index: 0;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAE5JREFUWIVjnL12+38GCoCBnisl2hmYKNJNBTDqgFEHjDpg1AGjDhh1wKgDGE/f/kNRe+DCpd0UOWDAQ2DUAaMOGHXAqANGHTDqgFEHAAAO3QneZHM9AwAAAABJRU5ErkJggg==);
 }
-.cdb .cdb-sheet td.t_gradient .cdb-gradient .inner-gradient {
+.cdb .cdb-sheet .cdb-gradient .inner-gradient {
   z-index: 1;
 }
-.cdb .cdb-sheet td.t_gradient.edit .cdb-gradient {
-  visibility: hidden;
-}
 .cdb .cdb-sheet span.error {
   color: #C44;
 }

bin/cdb.less

@@ -402,57 +402,71 @@
 			height: 100%;
 
 			.cdb-curve {
-				transform: scaleY(-1);
+				display: block;
 				height:50px;
 				width:100%;
-				path {
-					fill: transparent;
-					stroke-width: 0.5px;
-					shape-rendering: geometricPrecision;
-					vector-effect: non-scaling-stroke;
-				}
+			}
+		}
 
-				.x-axis, .y-axis {
-					stroke: #AAA;
-				}
-				.curve {
-					stroke: white;
-				}
+		.cdb-curve {
+			display: inline-block;
+			transform: scaleY(-1);
+			height:1em;
+			width:50px;
+			path {
+				fill: transparent;
+				stroke-width: 0.5px;
+				shape-rendering: geometricPrecision;
+				vector-effect: non-scaling-stroke;
+			}
+
+			.x-axis, .y-axis {
+				stroke: #AAA;
+			}
+			.curve {
+				stroke: white;
 			}
 		}
 
 		td.t_gradient {
 			width: 100%;
 			height: 100%;
-			.cdb-gradient {
-				position: relative;
+			&.edit .cdb-gradient {
+				visibility: hidden;
+			}
 
+			.cdb-gradient {
+				display: block;
 				width: 100%;
 				height: 100%;
 				min-height: 25px;
 				min-width: 50px;
+			}
+		}
 
-				.inner-gradient, .alpha-bg {
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-				}
+		.cdb-gradient {
+			display: inline-block;
+			position: relative;
 
-				.alpha-bg {
-					z-index: 0;
-					background:
-						url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAE5JREFUWIVjnL12+38GCoCBnisl2hmYKNJNBTDqgFEHjDpg1AGjDhh1wKgDGE/f/kNRe+DCpd0UOWDAQ2DUAaMOGHXAqANGHTDqgFEHAAAO3QneZHM9AwAAAABJRU5ErkJggg==);
-				}
+			width: 50px;
+			height: 1em;
 
-				.inner-gradient {
-					z-index: 1;
-				}
+			.inner-gradient, .alpha-bg {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
 			}
 
-			&.edit .cdb-gradient {
-				visibility: hidden;
+			.alpha-bg {
+				z-index: 0;
+				background:
+					url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAE5JREFUWIVjnL12+38GCoCBnisl2hmYKNJNBTDqgFEHjDpg1AGjDhh1wKgDGE/f/kNRe+DCpd0UOWDAQ2DUAaMOGHXAqANGHTDqgFEHAAAO3QneZHM9AwAAAABJRU5ErkJggg==);
+			}
+
+			.inner-gradient {
+				z-index: 1;
 			}
 		}
 

hide/comp/cdb/Cell.hx

@@ -489,19 +489,19 @@ class Cell {
 			if( str.length > 50 ) str = str.substr(0, 47) + "...";
 			val(str);
 		case TGradient:
-			if (value.colors == null || value.positions == null || value.colors.length == 0 || value.colors.length != value.positions.length)
-				return val('#INVALID GRADIENT `${haxe.Json.stringify(value)}`');
+			if (v.colors == null || v.positions == null || v.colors.length == 0 || v.colors.length != v.positions.length)
+				return val('#INVALID GRADIENT `${haxe.Json.stringify(v)}`');
 			var fill = "";
 			function colorToCss(c: Int) {
 				var c = h3d.Vector4.fromColor(c);
 				return 'rgba(${c.r*255.0}, ${c.g*255.0}, ${c.b*255.0}, ${c.a})';
 			}
 
-			if (value.colors.length == 1) {
-				fill = colorToCss(value.colors[0]);
+			if (v.colors.length == 1) {
+				fill = colorToCss(v.colors[0]);
 			} else {
 				fill = 'linear-gradient( 0.25turn, ${[
-					for (i in 0...value.colors.length) '${colorToCss(value.colors[i])} ${value.positions[i] * 100}%'
+					for (i in 0...v.colors.length) '${colorToCss(v.colors[i])} ${v.positions[i] * 100}%'
 				].join(", ")})';
 			}
 
@@ -521,7 +521,7 @@ class Cell {
 
 			html(str);
 		case TCurve:
-			var curve = new cdb.Types.Curve(cast (value ?? []));
+			var curve = new cdb.Types.Curve(cast (v ?? []));
 			var nbPoints = curve.data.length;
 			if (nbPoints % 6 != 0)
 				return val('#INVALID CURVE DATA ($nbPoints not a multiple of 6)');
@@ -530,7 +530,6 @@ class Cell {
 			var data = "";
 
 			var prefab = new hrt.prefab.Curve(null, null);
-			var curve = new cdb.Types.Curve(cast value);
 			prefab.initFromCDB(curve);
 
 			var bounds = prefab.getBounds();