@dodona/papyros
Version:
Scratchpad for multiple programming languages in the browser.
48 lines • 2.76 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { customElement, property } from "lit/decorators.js";
import { html } from "lit";
import "./ThemedButton";
import "@material/web/icon/icon";
import "@material/web/iconbutton/icon-button";
import { PapyrosElement } from "../../PapyrosElement";
let ThemePicker = class ThemePicker extends PapyrosElement {
constructor() {
super(...arguments);
this.picking = false;
}
setTheme(theme) {
this.picking = false;
this.papyros.constants.activeTheme = theme;
}
render() {
if (!this.picking) {
return html `
<md-icon-button @click=${() => (this.picking = true)}>
<md-icon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#currentCollor">
<path
d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z"
/>
</svg>
</md-icon>
</md-icon-button>
`;
}
return Object.values(this.papyros.constants.themes).map((t) => html `
<p-themed-button .theme=${t.theme} .dark=${t.dark} @click=${() => this.setTheme(t)}></p-themed-button>
`);
}
};
__decorate([
property({ state: true })
], ThemePicker.prototype, "picking", void 0);
ThemePicker = __decorate([
customElement("p-theme-picker")
], ThemePicker);
export { ThemePicker };
//# sourceMappingURL=ThemePicker.js.map