cory/tildefriends
5
6
Fork 2
Code Issues 39 Pull Requests Actions Releases 33 Wiki Activity

Use some w3.css in the core HTML.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4784 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2024-01-19 02:32:55 +00:00
parent 1ddad6be93
commit 1f0b9012e3
4 changed files with 257 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/client.js
View File

@ -105,16 +105,17 @@ class TfNavigationElement extends LitElement {
render_permissions() {
if (this.show_permissions) {
return html`
<link type="text/css" rel="stylesheet" href="/static/w3.css">
<div style="position: absolute; top: 0; padding: 0; margin: 0; z-index: 100; display: flex; justify-content: center; width: 100%">
<div style="background-color: #444; padding: 1em; margin: 0 auto; border-left: 4px solid #fff; border-right: 4px solid #fff; border-bottom: 4px solid #fff">
<div>This app has the following permissions:</div>
${Object.keys(this.permissions).map(key => html`
<div>
<span>${key}</span>: ${this.permissions[key] ? '✅ Allowed' : '❌ Denied'}
<button @click=${() => this.reset_permission(key)} style='min-width: 3em; min-height: 3em">Reset</button>
<button @click=${() => this.reset_permission(key)} class='w3-button w3-red">Reset</button>
</div>
`)}
<button @click=${() => this.show_permissions = false} style="min-width: 3em; min-height: 3em">Close</button>
<button @click=${() => this.show_permissions = false} class="w3-button w3-blue">Close</button>
</div>
</div>
`;
@ -286,11 +287,12 @@ class TfFilesPaneElement extends LitElement {
html`<span @click=${() => self.set_expanded(false)} class="expander">«</span>` :
html`<span @click=${() => self.set_expanded(true)} class="expander">»</span>`;
let content = html`
<link type="text/css" rel="stylesheet" href="/static/w3.css">
<div id="files_content">
<tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
<br>
<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()} accesskey="r" @mouseover=${set_access_key_title} data-tip="Remove the selected file from the app">Remove File</button></div>
<div><button class="w3-button w3-blue" style="width: 100%" @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 class="w3-button w3-blue" style="width: 100%" @click=${() => removeFile()} accesskey="r" @mouseover=${set_access_key_title} data-tip="Remove the selected file from the app">🚮Remove File</button></div>
</div>
`;
return html`
@ -707,6 +709,8 @@ function api_requestPermission(permission, id) {
let check = document.createElement('input');
check.id = 'permissions_remember_check';
check.type = 'checkbox';
check.classList.add('w3-check');
check.classList.add('w3-blue');
div.appendChild(check);
let label = document.createElement('label');
label.htmlFor = check.id;
@ -732,8 +736,8 @@ function api_requestPermission(permission, id) {
div = document.createElement('div');
for (let option of k_options) {
let button = document.createElement('button');
button.style.minWidth = '3em';
button.style.minHeight = '3em';
button.classList.add('w3-button');
button.classList.add('w3-blue');
button.innerText = option.text;
button.id = option.id;
button.onclick = function() {