diff --git a/core/client.js b/core/client.js index 1e7c509b..deedf6e2 100644 --- a/core/client.js +++ b/core/client.js @@ -120,19 +120,38 @@ class TfNavigationElement extends LitElement { } } + set_access_key_title(event) { + if (!event.srcElement.title) { + event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || event.srcElement.accessKey).toUpperCase()}]`; + } + } + render() { let self = this; return html`
this.show_version = !this.show_version}>😎 ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number} - TF - apps - edit - self.show_permissions = !self.show_permissions}>🎛️ + TF + apps + edit + self.show_permissions = !self.show_permissions}>🎛️ ${this.status.message} ${this.render_permissions()} @@ -1077,30 +1096,6 @@ window.addEventListener("load", function() { event.preventDefault(); trace(); }); - for (let tag of document.getElementsByTagName('a')) { - if (tag.accessKey) { - tag.classList.add('tooltip_parent'); - let tooltip = document.createElement('div'); - tooltip.classList.add('tooltip'); - if (tag.dataset.tip) { - let description = document.createElement('div'); - description.innerText = tag.dataset.tip; - tooltip.appendChild(description); - } - let parts = tag.accessKeyLabel ? tag.accessKeyLabel.split('+') : []; - for (let i = 0; i < parts.length; i++) - { - let key = parts[i]; - let kbd = document.createElement('kbd'); - kbd.innerText = key; - tooltip.appendChild(kbd); - if (i < parts.length - 1) { - tooltip.appendChild(document.createTextNode('+')); - } - } - tag.appendChild(tooltip); - } - } connectSocket(window.location.pathname); if (window.localStorage.getItem('editing') == '1') { diff --git a/core/style.css b/core/style.css index 42e7393d..7e157281 100644 --- a/core/style.css +++ b/core/style.css @@ -125,34 +125,6 @@ a:active { .cyan { color: #2aa198; } .green { color: #859900; } -.tooltip { - position: absolute; - z-index: 1; - display: none; - border: 1px solid black; - padding: 4px; - color: black; - background: white; -} - -.tooltip_parent:hover .tooltip { - display: inline-block; -} - -kbd { - background-color: #eee; - border-radius: 3px; - border: 1px solid #b4b4b4; - box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset; - color: #333; - display: inline-block; - font-size: .85em; - font-weight: 700; - line-height: 1; - padding: 2px 4px; - white-space: nowrap; -} - .permissions { position: absolute; display: block;