cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 28 Wiki Activity

Set more button tooltips.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4731 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2024-01-03 23:52:05 +00:00
parent 08989f54d9
commit 4c8eab2692
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
core/client.js
View File

@ -120,12 +120,6 @@ 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`
@ -148,10 +142,10 @@ class TfNavigationElement extends LitElement {
<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" @mouseover=${this.set_access_key_title} data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a> <a accesskey="h" @mouseover=${set_access_key_title} data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
<a accesskey="a" @mouseover=${this.set_access_key_title} data-tip="Open apps list." href="/~core/apps/">apps</a> <a accesskey="a" @mouseover=${set_access_key_title} data-tip="Open apps list." href="/~core/apps/">apps</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="e" @mouseover=${set_access_key_title} data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</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> <a accesskey="p" @mouseover=${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()}
@ -294,8 +288,8 @@ class TfFilesPaneElement extends LitElement {
<div id="files_content"> <div id="files_content">
<tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files> <tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
<br> <br>
<div><button @click=${() => newFile()}>New File</button></div> <div><button @click=${() => newFile()} accesskey="n" @mouseover=${set_access_key_title} data-tip="Add a new, empty file to the app">New File</button></div>
<div><button @click=${() => removeFile()}>Remove File</button></div> <div><button @click=${() => removeFile()} accesskey="r" @mouseover=${set_access_key_title} data-tip="Remove the selected file from the app">Remove File</button></div>
</div> </div>
`; `;
return html` return html`

17
core/index.html
View File

@ -5,18 +5,25 @@
<link type="text/css" rel="stylesheet" href="/static/style.css"> <link type="text/css" rel="stylesheet" href="/static/style.css">
<link type="image/png" rel="shortcut icon" href="/static/favicon.png"> <link type="image/png" rel="shortcut icon" href="/static/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function set_access_key_title(event) {
if (!event.srcElement.title) {
event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || ('⌨️' + event.srcElement.accessKey)).toUpperCase()}]`;
}
}
</script>
</head> </head>
<body style="display: flex; flex-flow: column"> <body style="display: flex; flex-flow: column">
<tf-navigation></tf-navigation> <tf-navigation></tf-navigation>
<div id="content" class="hbox" style="flex: 1 1; width: 100%"> <div id="content" class="hbox" style="flex: 1 1; width: 100%">
<div id="editPane" class="vbox" style="flex: 1 1; display: none"> <div id="editPane" class="vbox" style="flex: 1 1; display: none">
<div class="navigation hbox"> <div class="navigation hbox">
<input type="button" id="closeEditor" name="closeEditor" value="Close"> <button id="closeEditor" name="closeEditor" accesskey="c" onmouseover="set_access_key_title(event)" data-tip="Close the editor">Close</button>
<input type="button" id="save" name="save" value="Save"> <button id="save" name="save" accesskey="s" onmouseover="set_access_key_title(event)" data-tip="Save the app under the given path">Save</button>
<input type="button" id="icon" name="icon" value="📦"> <button id="icon" name="icon" accesskey="i" onmouseover="set_access_key_title(event)" data-tip="Set an icon/emoji for the app">📦</button>
<input type="text" id="name" name="name" style="flex: 1 1; min-width: 1em"></input> <input type="text" id="name" name="name" style="flex: 1 1; min-width: 1em"></input>
<input type="button" id="delete" name="delete" value="Delete"> <button id="delete" name="delete" accesskey="d" onmouseover="set_access_key_title(event)" data-tip="Delete the app">Delete</button>
<input type="button" id="trace_button" value="Trace"> <button id="trace_button" accesskey="t" onmouseover="set_access_key_title(event)" data-tip="Open a performance trace for the server">Trace</button>
</div> </div>
<div class="hbox" style="height: 100%"> <div class="hbox" style="height: 100%">
<tf-files-pane></tf-files-pane> <tf-files-pane></tf-files-pane>