diff --git a/static/css/index.css b/static/css/index.css index 6957ab1..b5497b8 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -2,9 +2,6 @@ --line-color: #ccc; --line-color-record: #eee; - --type-background: #ddd; - --type-foreground: #000; - --label-first: #800033; --label-rest: #666; @@ -12,6 +9,16 @@ --label-border: #ccc; --copy-color: #d48700; + + --header-line: #d0d0d0; + + --record-A: #89a02c; + --record-AAAA: #2f4858; + --record-CNAME: #f6ae2d; + --record-FWD: #f26419; + --record-TXT: #86bbd8; + --record-NXDOMAIN: #aa0000; + --record-other: #888; } html { @@ -149,17 +156,52 @@ button { &>.records { padding-left: 30px; + padding-top: 8px; + padding-bottom: 8px; + margin-left: 10px; display: grid; - grid-template-columns: repeat(3, min-content) 1fr; - grid-gap: 4px 10px; + grid-template-columns: repeat(5, min-content); + width: min-content; + /*grid-gap: 4px 10px;*/ align-items: center; border-left: 1px solid var(--line-color); - &>img { - display: block; - padding-left: 4px; + .header { + font-weight: bold; + font-size: 0.75em; + background: #eee; + padding: 2px 8px; + border-left: 1px solid var(--header-line); + border-top: 1px solid var(--header-line); + border-bottom: 1px solid var(--header-line); + + &:first-child { + grid-column: 1 / 3; + border-top-left-radius: 4px; + } + + &.last { + border-right: 1px solid var(--header-line); + border-top-right-radius: 4px; + } + } + + &>:not(.header) { + height: 40px; + } + + &>.record-icon { + border-left: 1px solid var(--header-line); + align-content: center; + padding-left: 8px; + border-bottom: 1px solid var(--header-line); + + img { + display: block; + padding-left: 4px; + } } .copy { @@ -174,6 +216,10 @@ button { cursor: pointer; user-select: none; display: flex; + padding: 0 16px 0 8px; + border-bottom: 1px solid var(--header-line); + height: 100%; + align-items: center; &.created { * { @@ -202,20 +248,69 @@ button { } .type { - background-color: var(--type-background); - color: var(--type-foreground); - padding: 4px 8px; - border-radius: 4px; - margin-top: 2px; - margin-bottom: 2px; - width: min-content; - font-weight: bold; - font-size: 0.85em; + padding: 2px 8px; + border-bottom: 1px solid var(--header-line); + border-left: 1px solid var(--header-line); + align-content: center; + cursor: pointer; + + div { + background-color: var(--record-other); + color: #fff; + + padding: 4px 8px; + border-radius: 4px; + width: min-content; + height: min-content; + font-weight: bold; + font-size: 0.85em; + } + + &.A div { + background-color: var(--record-A); + } + + &.AAAA div { + background-color: var(--record-AAAA); + } + + &.CNAME div { + background-color: var(--record-CNAME); + color: #000; + } + + &.FWD div { + background-color: var(--record-FWD); + } + + &.TXT div { + background-color: var(--record-TXT); + color: #000; + } + + &.NXDOMAIN div { + background-color: var(--record-NXDOMAIN); + } } .value { cursor: pointer; user-select: none; + border-left: 1px solid var(--header-line); + border-bottom: 1px solid var(--header-line); + padding: 0px 8px; + height: 100%; + align-content: center; + } + + .ttl { + cursor: pointer; + border-left: 1px solid var(--header-line); + border-right: 1px solid var(--header-line); + border-bottom: 1px solid var(--header-line); + padding: 0px 8px; + height: 100%; + align-content: center; } .separator { diff --git a/static/js/dns.mjs b/static/js/dns.mjs index 431521c..de534d1 100644 --- a/static/js/dns.mjs +++ b/static/js/dns.mjs @@ -232,7 +232,12 @@ class Folder { ${firstLabel}${restLabels != '' ? '.' + restLabels : ''}
-
+
+
FQDN
+
Type
+
Value
+
TTL
+
` this.divSubfolders = this.div.querySelector('.subfolders') this.divRecords = this.div.querySelector('.records') @@ -249,11 +254,16 @@ class Folder { this.divSubfolders.append(folder.render()) // Records are refreshed. + if (this.records.length == 0) + this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'none') + else + this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'block') + for (const rec of Array.from(this.records)) this.divRecords.append(...rec.render()) // Open this folder automatically if it is a toplevel folder and the settings change to open. - _mbus.subscribe('settings_updated', ({ detail: { key, value }}) => { + _mbus.subscribe('settings_updated', ({ detail: { key, value } }) => { if (key !== 'toplevel_open') return @@ -274,7 +284,7 @@ class Record { this.divFQDN = null this.divType = null this.divValue = null - this.divSeparator = null + this.divTTL = null }// }}} id() {// {{{ @@ -332,18 +342,22 @@ class Record { }// }}} render() {// {{{ if (this.divFQDN === null) { - this.imgIcon = document.createElement('img') + this.imgIcon = document.createElement('div') this.divFQDN = document.createElement('div') this.divType = document.createElement('div') this.divValue = document.createElement('div') - this.divSeparator = document.createElement('div') + this.divTTL = document.createElement('div') + + this.imgIcon.innerHTML = `` + this.imgIcon.classList.add("record-icon") - this.imgIcon.src = `/images/${_VERSION}/icon_record.svg` this.divFQDN.classList.add('fqdn') this.divType.classList.add('type') + this.divType.classList.add(this.type()) this.divValue.classList.add('value') - this.divSeparator.classList.add('separator') + this.divTTL.classList.add('ttl') + this.divType.innerHTML = `
` this.divFQDN.innerHTML = ` *. @@ -356,13 +370,14 @@ class Record { else this.edit() }) - this.divValue.addEventListener('click', event => { if (event.shiftKey) this.copy(event.target.closest('.value'), this.value()) else this.edit() }) + this.divType.addEventListener('click', () => this.edit()) + this.divTTL.addEventListener('click', () => this.edit()) } // FQDN is updated. @@ -376,10 +391,11 @@ class Record { this.divFQDN.querySelector('.first-label').innerText = fl this.divFQDN.querySelector('.rest-label').innerText = rl != '' ? `.${rl}` : '' - this.divType.innerText = this.type() + this.divType.querySelector('div').innerText = this.type() this.divValue.innerText = this.value() + this.divTTL.innerText = this.ttl() - return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divSeparator] + return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL] }// }}} save() {// {{{ const created = (this.id() == '') @@ -505,7 +521,7 @@ class RecordDialog { class Settings { constructor() {// {{{ this.settings = new Map([ - ['boxed_folders', true], + ['boxed_folders', false], ['toplevel_open', true], ])