Creating records in folders

static/css/index.css

@@ -138,7 +138,7 @@ button {
 
 		&>.label {
 			display: grid;
-			grid-template-columns: min-content min-content 1fr;
+			grid-template-columns: repeat(4, min-content);
 			align-items: center;
 			padding: 5px 0px;
 			cursor: pointer;
@@ -149,6 +149,18 @@ button {
 				margin-right: 6px;
 				display: none;
 			}
+
+			img.create {
+				display: none;
+				height: 16px;
+				margin-left: 8px;
+			}
+
+			&:hover {
+				img.create {
+					display: block;
+				}
+			}
 		}
 
 		&>.subfolders {

static/js/dns.mjs

@@ -234,6 +234,7 @@ class Folder {
 					<img class="closed" src="/images/${_VERSION}/icon_folder.svg">
 					<img class="open"   src="/images/${_VERSION}/icon_folder_open.svg">
 					<span>${firstLabel}</span><span>${restLabels != '' ? '.' + restLabels : ''}</span>
+					<img class="create" src="/images/${_VERSION}/icon_create.svg">
 				</div>
 				<div class="subfolders"></div>
 				<div class="records">
@@ -248,6 +249,7 @@ class Folder {
 			this.divRecords = this.div.querySelector('.records')
 
 			this.div.querySelector('.label').addEventListener('click', event => this.toggleFolder(event))
+			this.div.querySelector('.label .create').addEventListener('click', event => this.createRecord(event))
 		}
 
 
@@ -265,7 +267,6 @@ class Folder {
 			this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'block')
 
 		// Remove old ones
-		console.log(`removing records from ${this.name()}`)
 		for (const recdiv of this.divRecords.children) {
 			if (recdiv?.classList?.contains('fqdn')) {
 				const rec = this.records.find(r => r.id() == recdiv.dataset.record_id)
@@ -289,6 +290,11 @@ class Folder {
 
 		return this.div
 	}// }}}
+	createRecord(event) {// {{{
+		event.stopPropagation()
+		const record = new Record({ Name: this.name() })
+		new RecordDialog(record).show()
+	}// }}}
 }
 
 class Record {