CDB: file column type QOL (#36)

bin/cdb.css

@@ -295,16 +295,20 @@
 .cdb .cdb-sheet td.t_file .preview .previewContent {
   display: none;
   position: absolute;
-  background-color: #EEE;
+  background-color: #333;
+  color: white;
   border: 1px solid black;
   padding: 5px;
 }
 .cdb .cdb-sheet td.t_file .preview .previewContent .label {
   text-align: center;
   margin-bottom: 5px;
-  background-color: white;
+  background-color: #444;
   font-family: monospace;
 }
+.cdb .cdb-sheet td.t_file .inlineImage > img {
+  max-height: 100px;
+}
 .cdb .cdb-sheet td.t_file .preview:hover .previewContent {
   display: block;
 }

bin/cdb.less

@@ -329,16 +329,22 @@
 					.label {
 						text-align : center;
 						margin-bottom : 5px;
-						background-color : white;
+						background-color: #444;
 						font-family : monospace;
 					}
 					display : none;
 					position : absolute;
-					background-color : #EEE;
+					background-color : #333;
+					color: white;
 					border : 1px solid black;
 					padding : 5px;
 				}
 			}
+			.inlineImage {
+				>img {
+					max-height: 100px;
+				}
+			}
 			.preview:hover {
 				.previewContent {
 					display : block;

bin/defaultProps.json

@@ -71,6 +71,14 @@
 
 	// cdb config
 	"cdb.databaseFile" : "data.cdb",
+	"cdb": {
+		// When file column contains an image - controls whenever it should provide inline preview of the image instead of file path.
+		"inlineImageFiles": false
+	},
+	// It's possible to separately control CDB configurations per sheet and column with following keys:
+	// "cdb.mySheetName": { /* Applies to all File columns in sheet with mySheetName */ }
+	// "cdb.mySheetName.myColumnName": { /* Applies only to File column with name myColumnName, located in mySheetName */ }
+	// "cdb.mySheetName.mySubSheet.myColumnName": { /* Applies to colum in a subsheet (Properties/lists) */ }
 
 	// script support
 	"script.api.files" : [],

hide/comp/cdb/Cell.hx

@@ -30,6 +30,21 @@ class Cell extends Component {
 				e.stopPropagation();
 				@:privateAccess line.table.toggleList(this);
 			});
+		case TFile:
+			if (canEdit()) {
+				element.on("drop", function(e : js.jquery.Event) {
+					var e : js.html.DragEvent = untyped e.originalEvent;
+					if (e.dataTransfer.files.length > 0) {
+						e.preventDefault();
+						e.stopPropagation();
+						setValue(ide.makeRelative(untyped e.dataTransfer.files.item(0).path));
+						refresh();
+					}
+				});
+				element.dblclick(function(_) edit());
+			} else {
+				root.addClass("t_readonly");
+			}
 		case TString if( column.kind == Script ):
 			element.click(function(_) edit());
 		default:
@@ -48,6 +63,21 @@ class Cell extends Component {
 	function get_columnIndex() return table.columns.indexOf(column);
 	inline function get_value() return currentValue;
 
+	function getCellConfigValue<T>( name : String, ?def : T ) : T
+	{
+		var cfg = ide.currentConfig;
+		var paths = table.sheet.name.split("@");
+		paths.unshift("cdb");
+		paths.push(column.name);
+		while ( paths.length != 0 ) {
+			var config = cfg.get(paths.join("."), null);
+			if ( config != null && Reflect.hasField(config, name) )
+				return Reflect.field(config, name);
+			paths.pop();
+		}
+		return def;
+	}
+
 	public function refresh() {
 		currentValue = Reflect.field(line.obj, column.name);
 		var html = valueHtml(column, value, line.table.sheet, line.obj);
@@ -175,14 +205,21 @@ class Cell extends Component {
 			var path = ide.getPath(v);
 			var url = "file://" + path;
 			var ext = v.split(".").pop().toLowerCase();
-			var html = v == "" ? '<span class="error">#MISSING</span>' : StringTools.htmlEscape(v);
-			if( v != "" && !editor.quickExists(path) )
-				html = '<span class="error">' + html + '</span>';
-			else if( ext == "png" || ext == "jpg" || ext == "jpeg" || ext == "gif" )
-				html = '<span class="preview">$html<div class="previewContent"><div class="label"></div><img src="$url" onload="$(this).parent().find(\'.label\').text(this.width+\'x\'+this.height)"/></div></span>';
-			if( v != "" )
-				html += ' <input type="submit" value="open" onclick="hide.Ide.inst.openFile(\'$path\')"/>';
-			html;
+			if (v == "") return '<span class="error">#MISSING</span>';
+			var html = StringTools.htmlEscape(v);
+			if (!editor.quickExists(path)) return '<span class="error">$html</span>';
+			else if( ext == "png" || ext == "jpg" || ext == "jpeg" || ext == "gif" ) {
+				var img = '<img src="$url" onload="$(this).parent().find(\'.label\').text(this.width+\'x\'+this.height)"/>';
+				var previewHandler = ' onmouseenter="$(this).find(\'.previewContent\').css(\'top\', (this.getBoundingClientRect().bottom - this.offsetHeight) + \'px\')"';
+				if (getCellConfigValue("inlineImageFiles", false)) {
+					html = '<span class="preview inlineImage" $previewHandler>
+						<img src="$url"><div class="previewContent"><div class="inlineImagePath">$html</div><div class="label"></div>$img</div></span>';
+				} else {
+					html = '<span class="preview" $previewHandler>$html
+						<div class="previewContent"><div class="label"></div>$img</div></span>';
+				}
+			}
+			return html + ' <input type="submit" value="open" onclick="hide.Ide.inst.openFile(\'$path\')"/>';
 		case TTilePos:
 			return tileHtml(v);
 		case TTileLayer: