diff --git a/static/css/index.css b/static/css/index.css index e54174e..7fa616d 100644 --- a/static/css/index.css +++ b/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 { diff --git a/static/js/dns.mjs b/static/js/dns.mjs index 3148375..a4fe589 100644 --- a/static/js/dns.mjs +++ b/static/js/dns.mjs @@ -234,6 +234,7 @@ class Folder { ${firstLabel}${restLabels != '' ? '.' + restLabels : ''} +
@@ -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 {