0.0.3

src/main/resources/static/css/dbadmin.css

@@ -1,3 +1,7 @@
+.separator-light {
+	opacity: 25%;
+}
+
 form.delete-form {
 	display: inline-block;	
 }
@@ -52,7 +56,7 @@ tr.table-data-row td:last-child, tr.table-data-row th:last-child {
 
 .row-icons {
 	font-size: 1.2rem;
-	width: 128px;
+	width: 96px;
 }
 
 h1 .bi {
@@ -112,6 +116,8 @@ h1 a:hover {
 	max-height: 300px;
 	overflow: auto;
 	z-index: 999;
+	-webkit-box-shadow: 0px 11px 12px -1px rgba(0,0,0,0.13); 
+	box-shadow: 0px 11px 12px -1px rgba(0,0,0,0.13);
 }
 
 .suggestion {
@@ -124,7 +130,7 @@ h1 a:hover {
 
 .suggestion:hover {
 	cursor: pointer;
-	background-color: #FFF;
+	background-color: #EBF7FF;
 	border-bottom: 2px solid #ADDEFF;
 }
 
@@ -173,4 +179,15 @@ AUTOCOMPLETE
  
 .filterable-field .card-header:hover {
 	background-color: #F0F0F0;
+}
+
+/**
+ * Images
+ */
+.thumb-image {
+	max-width: 128px;
+}
+.img-muted {
+    filter: brightness(50%);
+     
 }

src/main/resources/static/js/create.js

@@ -0,0 +1,43 @@
+function showFileInput(inputElement) {
+	inputElement.classList.add('d-block');
+	inputElement.classList.remove('d-none');
+	inputElement.value = '';
+	
+	let img = document.getElementById(`__thumb_${inputElement.name}`);
+	if (img != null) {
+		img.classList.add('img-muted');
+	}
+}
+
+function hideFileInput(inputElement) {
+	inputElement.classList.add('d-none');
+	inputElement.classList.remove('d-block');
+	
+	let img = document.getElementById(`__thumb_${inputElement.name}`);
+	if (img != null) {
+		img.classList.remove('img-muted');
+	}
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	let checkboxes = document.querySelectorAll(".binary-field-checkbox");
+	
+	checkboxes.forEach(checkbox => {
+		let fieldName = checkbox.dataset.fieldname;
+		
+		if (!checkbox.checked) {
+			showFileInput(document.querySelector(`input[name="${fieldName}"]`));
+		} else {
+			hideFileInput(document.querySelector(`input[name="${fieldName}"]`));
+		}
+		
+		checkbox.addEventListener('change', function(e) {
+			if (!e.target.checked) {
+				showFileInput(document.querySelector(`input[name="${fieldName}"]`));				 
+			} else {
+				hideFileInput(document.querySelector(`input[name="${fieldName}"]`));
+			}
+
+		});
+	});
+});

src/main/resources/static/js/table.js

@@ -1,15 +1,23 @@
 function updateBulkActions(table, selected) {
 	let divs = document.querySelectorAll(".bulk-actions");
 	divs.forEach(div => {
-		div.innerHTML = `${selected} items selected <input type="submit" form="delete-form" class="ui-btn btn btn-secondary" value="Delete">`;
+		div.innerHTML = `${selected} items selected <input type="submit" form="multi-delete-form" class="ui-btn btn btn-secondary" value="Delete">`;
 	});
 }
 
 document.addEventListener("DOMContentLoaded", () => {
 	let selected = 0;
 
-	if (document.getElementById('delete-form') != null) {
-		document.getElementById('delete-form').addEventListener('submit', function(e) {
+	document.querySelectorAll(".delete-form").forEach(form => {
+		form.addEventListener('submit', function(e) {
+			if (!confirm('Are you sure you want to delete this item?')) {
+				e.preventDefault();
+			}
+		});
+	});
+
+	if (document.getElementById('multi-delete-form') != null) {
+		document.getElementById('multi-delete-form').addEventListener('submit', function(e) {
 			if (selected == 0) {
 				e.preventDefault();
 				alert('No items selected');