theme picker: preselect the saved theme

This commit is contained in:
Tasia Iso 2024-03-21 22:29:39 +01:00
parent a1f221879b
commit 58dbf42a3a
3 changed files with 9 additions and 4 deletions

View File

@ -21,7 +21,7 @@ tfrpc.register(async function getThemes() {
}); });
tfrpc.register(async function getTheme() { tfrpc.register(async function getTheme() {
// TODO // TODO
return 'solarized'; return 'gruvbox';
}); });
tfrpc.register(async function setTheme() { tfrpc.register(async function setTheme() {
// TODO // TODO

View File

@ -35,7 +35,7 @@ class TfIdentityManagerElement extends LitElement {
try { try {
const newID = await tfrpc.rpc.addID(words); const newID = await tfrpc.rpc.addID(words);
if (newID) alert('Successfully imported a new identity'); if (newID) alert('Successfully imported a new identity.');
else alert('This identity already exists or is invalid.'); else alert('This identity already exists or is invalid.');
await tfrpc.rpc.reload(); await tfrpc.rpc.reload();
} catch (err) { } catch (err) {

View File

@ -1,4 +1,4 @@
import {LitElement, html} from './lit-all.min.js'; import {LitElement, html, nothing} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js'; import * as tfrpc from '/static/tfrpc.js';
class TfThemePickerElement extends LitElement { class TfThemePickerElement extends LitElement {
@ -16,6 +16,10 @@ class TfThemePickerElement extends LitElement {
async load() { async load() {
this.themes = await tfrpc.rpc.getThemes(); this.themes = await tfrpc.rpc.getThemes();
this.selected = await tfrpc.rpc.getTheme();
let select = this.renderRoot?.querySelector('#theme-select');
select.value = this.selected;
} }
changed(event) { changed(event) {
@ -32,11 +36,12 @@ class TfThemePickerElement extends LitElement {
<select <select
name="theme" name="theme"
id="theme-select"
?hidden=${!this.themes?.length} ?hidden=${!this.themes?.length}
@change=${this.changed} @change=${this.changed}
> >
${(this.themes ?? []).map( ${(this.themes ?? []).map(
(id) => html`<option value=${id}>${id}</option>` (name) => html`<option value=${name}>${name}</option>`
)} )}
</select> </select>
`; `;