cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 Wiki Activity

Fix some broken tooltips.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4700 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-12-29 18:12:14 +00:00
parent 7964524e0a
commit f3518b3d0f
2 changed files with 23 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
core/client.js
View File

@ -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() { render() {
let self = this; let self = this;
return html` return html`
<style> <style>
${k_global_style} ${k_global_style}
.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;
}
</style> </style>
<div style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center"> <div style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center">
<span style="cursor: pointer" @click=${() => this.show_version = !this.show_version}>😎</span> <span style="cursor: pointer" @click=${() => this.show_version = !this.show_version}>😎</span>
<span ?hidden=${!this.show_version} style="flex: 0 0; white-space: nowrap" title=${this.version?.name + ' ' + Object.entries(this.version || {}).filter(x => ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number}</span> <span ?hidden=${!this.show_version} style="flex: 0 0; white-space: nowrap" title=${this.version?.name + ' ' + Object.entries(this.version || {}).filter(x => ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number}</span>
<a accesskey="h" data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a> <a accesskey="h" @mouseover=${this.set_access_key_title} data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
<a accesskey="a" data-tip="Open apps list." href="/~core/apps/">apps</a> <a accesskey="a" @mouseover=${this.set_access_key_title} data-tip="Open apps list." href="/~core/apps/">apps</a>
<a accesskey="e" data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a> <a accesskey="e" @mouseover=${this.set_access_key_title} data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a>
<a accesskey="p" data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a> <a accesskey="p" @mouseover=${this.set_access_key_title} data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a>
<span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span> <span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
<span id="requests"></span> <span id="requests"></span>
${this.render_permissions()} ${this.render_permissions()}
@ -1077,30 +1096,6 @@ window.addEventListener("load", function() {
event.preventDefault(); event.preventDefault();
trace(); 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); connectSocket(window.location.pathname);
if (window.localStorage.getItem('editing') == '1') { if (window.localStorage.getItem('editing') == '1') {

28
core/style.css
View File

@ -125,34 +125,6 @@ a:active {
.cyan { color: #2aa198; } .cyan { color: #2aa198; }
.green { color: #859900; } .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 { .permissions {
position: absolute; position: absolute;
display: block; display: block;