djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improved settings layout and UX, added bake button, fixed icons, added icon colours, improved BoolBox appearance, added snowflake icon, removed unused BeatLikeLoopSettings, added disabled buttons

Browse Source
This commit is contained in:
Daniel Ledda
2022-03-13 22:28:17 +01:00
parent 7fca44f6c0
commit 95b514b336
11 changed files with 142 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/ui/Widgets/ActionButton/ActionButtonView.ts
View File

@@ -4,7 +4,9 @@ import IconView, {IconName} from "@/ui/Widgets/Icon/IconView";
export type ActionButtonUINodeOptions = UINodeOptions & {
type?: "primary" | "secondary",
onClick?: (isChecked: boolean) => void,
onClick?: (event: MouseEvent) => void,
alt?: string,
disabled?: boolean,
} & ({
icon: IconName,
label?: never,
@@ -17,8 +19,10 @@ export default class ActionButtonView extends UINode {
private label: string | null = null;
private icon: IconName | null = null;
private buttonElement!: HTMLButtonElement;
private onClick: (isChecked: boolean) => void;
private onClick: (event: MouseEvent) => void;
private type: "primary" | "secondary";
private alt: string | null;
private disabled: boolean;
constructor(options: ActionButtonUINodeOptions) {
super(options);
@@ -27,22 +31,41 @@ export default class ActionButtonView extends UINode {
} else if (typeof options.label !== "undefined") {
this.label = options.label;
}
this.disabled = options.disabled ?? false;
this.alt = options.alt ?? null;
this.type = options.type ?? "primary";
this.onClick = options.onClick ?? (() => { /* dummy */ });
}
setDisabled(isDisabled: boolean): void {
this.disabled = isDisabled;
this.buttonElement.disabled = this.disabled;
if (isDisabled) {
this.buttonElement.classList.add("disabled");
} else {
this.buttonElement.classList.remove("disabled");
}
}
protected build(): HTMLButtonElement {
this.buttonElement = UINode.make("button", {
classes: ["action-button", `action-button-${this.type}`],
onclick: this.onClick,
onclick: (event: MouseEvent) => this.disabled || this.onClick(event),
subs: [
this.icon !== null ? new IconView({
iconName: this.icon
iconName: this.icon,
color: "var(--color-p-light)",
}).render() : UINode.make("span", {
innerText: this.label ?? ""
}),
],
});
if (this.alt) {
this.buttonElement.title = this.alt;
}
if (this.disabled) {
this.buttonElement.classList.add("disabled");
}
return this.buttonElement;
}
}