terbshaeusser/website
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Activity

make buttons disablable

Browse Source 
Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
This commit is contained in:
Tobias Erbshäußer
2026-05-24 09:22:38 +02:00
parent b49126ded4
commit 35d3211615
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/button.njk
+8 -4
View File
@@ -27,13 +27,17 @@
font-weight: 800; font-weight: 800;
} }
button:focus, a:focus { :host([disabled]) button, :host([disabled]) a {
color: var(--gray);
}
:host(:not([disabled])) button:focus, :host(:not([disabled])) a:focus {
outline-color: var(--gold); outline-color: var(--gold);
outline-offset: 0.2rem; outline-offset: 0.2rem;
outline-style: solid; outline-style: solid;
} }
button:hover, a:hover { :host(:not([disabled])) button:hover, :host(:not([disabled])) a:hover {
background-color: var(--gold) !important; background-color: var(--gold) !important;
color: var(--gray); color: var(--gray);
cursor: pointer; cursor: pointer;
@@ -43,11 +47,11 @@
fill: var(--light-gray); fill: var(--light-gray);
} }
:host([selected]) ::slotted(svg) { :host([selected]) ::slotted(svg), :host([disabled]) ::slotted(svg) {
fill: var(--gray); fill: var(--gray);
} }
button:hover ::slotted(svg), a:hover ::slotted(svg) { :host(:not([disabled])) button:hover ::slotted(svg), :host(:not([disabled])) a:hover ::slotted(svg) {
fill: var(--gray); fill: var(--gray);
} }
</style> </style>
frontend/src/components/button.ts
+10 -2
View File
@@ -1,7 +1,7 @@
import {TesoftComponent} from "../scripts/main.ts"; import {TesoftComponent} from "../scripts/main.ts";
export class TesoftButton extends TesoftComponent { export class TesoftButton extends TesoftComponent {
static observedAttributes = ["href", "selected"]; static observedAttributes = ["disabled", "href", "selected"];
private readonly rootDiv: HTMLDivElement; private readonly rootDiv: HTMLDivElement;
@@ -19,7 +19,15 @@ export class TesoftButton extends TesoftComponent {
// noinspection JSUnusedGlobalSymbols // noinspection JSUnusedGlobalSymbols
attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) { attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
if (name === "href") { if (name === "disabled") {
if (newValue === null) {
this.rootDiv.onclick = null;
} else {
this.rootDiv.onclick = (e) => {
e.stopPropagation();
};
}
} else if (name === "href") {
this.rootDiv.innerHTML = ""; this.rootDiv.innerHTML = "";
let linkOrButton: HTMLElement; let linkOrButton: HTMLElement;