diff --git a/static/css/index.css b/static/css/index.css index f28e824..cf514f9 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,5 +1,6 @@ :root { --header-background: #acbb78; + --header-border: 1px solid #869a41; --line-color: #ccc; --line-color-record: #eee; @@ -22,7 +23,7 @@ --record-NXDOMAIN: #aa0000; --record-other: #888; - --record-hover: #fffff4; + --record-hover: #fafafa; } html { @@ -34,6 +35,9 @@ html { *:after { box-sizing: inherit; } +*:focus { + outline: none; +} [onClick] { cursor: pointer; @@ -103,18 +107,21 @@ select, button { font-size: 1em; padding: 4px 8px; + border-radius: 4px; + border: 1px solid #444; } #application-header { display: grid; - grid-template-columns: min-content 1fr min-content min-content; + grid-template-columns: min-content min-content 1fr min-content; align-items: center; - border-bottom: 1px solid #a4bc52; + justify-items: end; + border-bottom: var(--header-border); background-color: var(--header-background); - .device-select { - padding: 16px 16px 16px 32px; + padding: 16px; + border-right: var(--header-border); .device-name { font-weight: bold; @@ -127,11 +134,13 @@ button { grid-template-columns: min-content min-content; grid-gap: 0px 8px; + &>* { display: none; } &.show { + border-right: var(--header-border); &>* { display: initial; } @@ -269,6 +278,10 @@ button { padding-left: 8px; border-bottom: 1px solid var(--header-line); + &.mouse-over { + background-color: var(--record-hover); + } + img { display: block; padding-left: 4px; @@ -332,6 +345,8 @@ button { border-left: 1px solid var(--header-line); align-content: center; cursor: pointer; + display: grid; + justify-items: center; &.mouse-over { background-color: var(--record-hover); diff --git a/static/js/dns.mjs b/static/js/dns.mjs index 08d9302..766e39d 100644 --- a/static/js/dns.mjs +++ b/static/js/dns.mjs @@ -71,6 +71,7 @@ export class Application { async connectDevice(devName) {// {{{ this.resetDeviceState() if (devName == '-') { + this.settings.set('last_device', '') return } @@ -84,6 +85,9 @@ export class Application { const records = await this.currentDevice.retrieveRecords() this.records = this.parseRecords(records) + + this.settings.set('last_device', this.currentDevice.name()) + this.createFolders() this.renderDevice() } catch (err) { @@ -184,6 +188,9 @@ export class Application { } this.deviceSelector.render() + const lastDevice = this.settings.get('last_device') + if (lastDevice !== '') + this.deviceSelector.selectDevice(lastDevice) }// }}} // renderDevice creates the device specific elements and also updates them. @@ -293,7 +300,7 @@ export class Application { break case 'f': - this.searchField.focus() + this.searchWidget.searchField.focus() break default: @@ -317,7 +324,6 @@ export class Application { document.body.classList.remove('boxed-folders') }// }}} - // search sets the search filter and re-renders the records tree. search() {// {{{ this.recordsTree.remove() @@ -325,6 +331,7 @@ export class Application { this.recordsTree = null this.createFolders() + this.topFolder.openFolder(true) this.renderDevice() }// }}} } @@ -435,6 +442,10 @@ class DeviceSelectWidget { this.currentlySelected = devName _mbus.dispatch('device_selected', { devName }) }// }}} + selectDevice(devname) {// {{{ + this.elDeviceSelect.value = devname + this.notifyDeviceSelect() + }// }}} } class Folder { @@ -742,6 +753,7 @@ class Record { return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL, this.divActions] }// }}} mouseEnter() {// {{{ + this.imgIcon.classList.add('mouse-over') this.divFQDN.classList.add('mouse-over') this.divType.classList.add('mouse-over') this.divValue.classList.add('mouse-over') @@ -749,6 +761,7 @@ class Record { this.divActions.classList.add('mouse-over') }// }}} mouseLeave() {// {{{ + this.imgIcon.classList.remove('mouse-over') this.divFQDN.classList.remove('mouse-over') this.divType.classList.remove('mouse-over') this.divValue.classList.remove('mouse-over') @@ -899,6 +912,7 @@ class Settings { this.settings = new Map([ ['boxed_folders', false], ['toplevel_open', false], + ['last_device', ''], ]) // Read any configured settings from local storage, but keeping default value