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

feat: more styling, bug fixes, deleting rows, removing unnecessary features

Browse Source
This commit is contained in:
Daniel Ledda
2021-09-06 14:21:20 +02:00
parent 6b0395b453
commit 342e65345d
15 changed files with 225 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/ui/BeatGroup/Beat/Beat.css
View File

@@ -8,8 +8,8 @@
}
.beat-title {
line-height: 2em;
width: 3em;
line-height: 32px;
margin: 0;
}
@@ -29,4 +29,5 @@
.beat {
width: max-content;
margin-bottom: 4px;
}

2
src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css
View File

@@ -1,7 +1,7 @@
.beat-unit {
width: 2em;
height: 2em;
margin-right: 0.2em;
margin-right: 4px;
background-color: var(--color-ui-neutral-dark);
border-width: 0.1em 0.1em 0.1em 0.1em;
border-color: var(--color-ui-neutral-dark);

37
src/ui/BeatGroupSettings/BeatGroupSettingsView.ts
View File

@@ -17,11 +17,9 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
private beatGroup: BeatGroup;
private barCountInput!: NumberInputView;
private timeSigUpInput!: NumberInputView;
private loopSettingsView!: BeatLikeLoopSettingsView;
private autoBeatLengthCheckbox!: BoolBoxView;
private beatSettingsViews: BeatSettingsView[] = [];
private beatSettingsContainer!: HTMLDivElement;
private autoBeatOptions!: HTMLElement;
constructor(options: BeatGroupSettingsUINodeOptions) {
super(options);
@@ -31,6 +29,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
BeatGroupEvents.TimeSigUpChanged,
BeatEvents.DisplayTypeChanged,
BeatGroupEvents.BeatListChanged,
BeatGroupEvents.LockingChanged,
]);
}
@@ -39,14 +38,14 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
this.barCountInput.setValue(this.beatGroup.getBarCount());
} else if (event === BeatGroupEvents.TimeSigUpChanged) {
this.timeSigUpInput.setValue(this.beatGroup.getTimeSigUp());
} else if (event === BeatEvents.DisplayTypeChanged) {
if (this.beatGroup.isLooping()) {
this.autoBeatOptions.classList.add("visible");
} else {
this.autoBeatOptions.classList.remove("visible");
}
} else if (event === BeatGroupEvents.BeatListChanged) {
this.remakeBeatSettingsViews();
} else if (event === BeatGroupEvents.LockingChanged) {
if (this.beatGroup.barsLocked()) {
this.barCountInput.disable();
} else {
this.barCountInput.enable();
}
}
}
@@ -70,7 +69,6 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
}
rebuild(): HTMLElement {
this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beatGroup});
this.barCountInput = new NumberInputView({
label: "Bars:",
initialValue: this.beatGroup.getBarCount(),
@@ -88,17 +86,6 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
value: this.beatGroup.autoBeatLengthOn(),
onInput: (isChecked: boolean) => this.beatGroup.setIsUsingAutoBeatLength(isChecked),
});
this.autoBeatOptions = UINode.make("div", {
classes: ["beat-group-settings-option-group"],
subs: [
UINode.make("div", {
classes: ["beat-group-settings-autobeat-option", "beat-group-settings-option"],
subs: [
this.autoBeatLengthCheckbox.render(),
],
}),
]
});
this.remakeBeatSettingsViews();
this.node = UINode.make("div", {
classes: ["beat-group-settings"],
@@ -118,13 +105,17 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
this.barCountInput.render(),
],
}),
this.loopSettingsView.render(),
this.autoBeatOptions,
UINode.make("div", {
classes: ["beat-group-settings-bar-count", "beat-group-settings-option"],
subs: [
this.autoBeatLengthCheckbox.render(),
],
}),
this.beatSettingsContainer,
UINode.make("button", {
innerText: "New Track",
onclick: () => this.beatGroup.addBeat(),
}),
this.beatSettingsContainer
],
}),
],

25
src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css
View File

@@ -1,25 +0,0 @@
.loop-settings {
}
.loop-settings-option-group {
}
.loop-settings-option > label {
width: 5em;
text-align: left;
}
.loop-settings > p {
margin: 0;
font-weight: bold;
text-align: center;
}
.loop-settings-option {
display: flex;
justify-content: center;
}
.loop-settings-option.hide {
display: none;
}

30
src/ui/BeatSettings/BeatSettings.css
View File

@@ -1,8 +1,17 @@
.beat-settings {
padding: 1em;
display: inline-flex;
margin-bottom: 0.5em;
display: flex;
height: 3.5em;
text-align: center;
justify-content: space-evenly;
align-items: center;
justify-content: space-between;
}
.beat-settings > * {
margin-right: 0.2em;
}
.beat-settings:last-child {
margin-right: 0;
}
.beat-settings-time-sig-up {
@@ -26,6 +35,19 @@
}
.beat-settings-name-field {
margin: auto auto auto auto;
width: 5em;
}
.beat-settings .loop-settings {
text-align: left;
flex: auto;
}
.beat-settings .loop-settings-option.hide {
display: none;
}
.beat-settings .loop-settings-option {
flex: auto;
padding-right: 1em;
}

62
src/ui/BeatSettings/BeatSettingsView.ts
View File

@@ -4,6 +4,9 @@ import UINode, {UINodeOptions} from "../UINode";
import ISubscriber from "../../Subscriber";
import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
import {IPublisher} from "../../Publisher";
import BeatLike from "../../BeatLike";
import NumberInputView from "../Widgets/NumberInput/NumberInputView";
import BoolBoxView from "../Widgets/BoolBox/BoolBoxView";
export type BeatSettingsViewUINodeOptions = UINodeOptions & {
beat: Beat,
@@ -12,7 +15,11 @@ export type BeatSettingsViewUINodeOptions = UINodeOptions & {
export default class BeatSettingsView extends UINode implements ISubscriber {
private beat: Beat;
private nameInput!: HTMLInputElement;
private loopSettingsView!: BeatLikeLoopSettingsView;
private deleteButton!: HTMLButtonElement;
private loopLengthInput!: NumberInputView;
private loopCheckbox!: BoolBoxView;
private loopLengthSection!: HTMLDivElement;
private sub!: { unbind: () => void };
constructor(options: BeatSettingsViewUINodeOptions) {
super(options);
@@ -21,34 +28,79 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
}
private setupBindings() {
this.beat.addSubscriber(this, "all");
this.sub = this.beat.addSubscriber(this, "all");
}
setBeat(beat: Beat): void {
this.sub.unbind();
this.beat = beat;
this.loopSettingsView.setBeatLike(beat);
this.setupBindings();
this.notify(null, BeatEvents.NewName);
this.notify(null, BeatEvents.LoopLengthChanged);
this.notify(null, BeatEvents.DisplayTypeChanged);
}
notify<T extends string | number>(publisher: IPublisher<T> | null, event: "all" | T[] | T): void {
if (event === BeatEvents.NewName) {
this.nameInput.value = this.beat.getName();
} else if (event === BeatEvents.LoopLengthChanged) {
this.loopLengthInput.setValue(this.beat.getLoopLength());
} else if (event === BeatEvents.DisplayTypeChanged) {
this.loopCheckbox.setValue(this.beat.isLooping());
if (this.beat.isLooping()) {
this.loopLengthSection.classList.remove("hide");
} else {
this.loopLengthSection.classList.add("hide");
}
}
}
rebuild(): HTMLElement {
this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
this.nameInput = UINode.make("input", {
value: this.beat.getName(),
classes: ["beat-settings-name-field"],
type: "text",
oninput: (event: Event) => this.beat.setName((event.target as HTMLInputElement).value),
});
this.deleteButton = UINode.make("button", {
classes: ["beat-settings-delete"],
innerText: "Delete",
onclick: () => this.beat.delete(),
});
this.loopLengthInput = new NumberInputView({
initialValue: this.beat.getLoopLength(),
onDecrement: () => this.beat.setLoopLength(this.beat.getLoopLength() - 1),
onIncrement: () => this.beat.setLoopLength(this.beat.getLoopLength() + 1),
onNewInput: (input: number) => this.beat.setLoopLength(input),
});
this.loopCheckbox = new BoolBoxView({
label: "Loop:",
value: this.beat.isLooping(),
onInput: (isChecked: boolean) => this.beat.setLooping(isChecked),
});
this.loopLengthSection = UINode.make("div", {
classes: ["loop-settings-option"],
subs: [
this.loopLengthInput.render(),
],
});
if (this.beat.isLooping()) {
this.loopLengthSection.classList.remove("hide");
} else {
this.loopLengthSection.classList.add("hide");
}
this.node = UINode.make("div", {
classes: ["beat-settings"],
subs: [
this.nameInput,
this.loopSettingsView.render(),
UINode.make("div", {
classes: ["loop-settings"],
subs: [
this.loopCheckbox.render(),
]
}),
this.loopLengthSection,
this.deleteButton,
],
});
return this.node;

2
src/ui/Root/Root.css
View File

@@ -25,7 +25,7 @@
background-color: var(--color-bg-light);
height: 100%;
width: 30em;
padding: 0 3em 0 3em;
padding: 0 2em 0 2em;
overflow: scroll;
display: inline-block;
}

24
src/ui/Widgets/NumberInput/NumberInput.css
View File

@@ -3,9 +3,19 @@
}
.number-input-label {
display: none;
}
.number-input-label.top {
display: block;
margin-bottom: 0.5em;
}
.number-input-label.left {
display: inline-block;
margin-right: 0.5em;
}
input[type="number"].number-input-input {
-webkit-appearance: textfield;
-moz-appearance: textfield;
@@ -41,3 +51,17 @@ input[type="number"].number-input-input::-webkit-outer-spin-button {
.number-input-dec {
border-radius: 0.5em 0 0 0.5em;
}
.number-input.disabled {
filter: brightness(0.8);
}
.number-input.disabled input[type="number"].number-input-input {
color: var(--color-p-light);
background-color: var(--color-ui-neutral-dark);
}
.number-input.disabled .number-input-button {
cursor: default;
}
.number-input.disabled .number-input-button:hover {
background-color: var(--color-ui-neutral-dark);
}

15
src/ui/Widgets/NumberInput/NumberInputView.ts
View File

@@ -4,6 +4,7 @@ import "./NumberInput.css";
type NumberInputUINodeOptionsBase = UINodeOptions & {
label?: string,
initialValue?: number,
labelPosition?: "top" | "left",
}
type NumberInputUINodeOptionsIncDecInput = NumberInputUINodeOptionsBase & {
@@ -28,6 +29,7 @@ export default class NumberInputView extends UINode {
private labelElement!: HTMLLabelElement;
private mainElement!: HTMLDivElement;
private inputElement!: HTMLInputElement;
private labelPosition: "top" | "left";
private value: number;
private label: string | null;
private onIncrement: (() => void) | null;
@@ -38,6 +40,7 @@ export default class NumberInputView extends UINode {
constructor(options: NumberInputUINodeOptions) {
super(options);
this.labelPosition = options.labelPosition ?? "top";
this.label = options.label ?? "";
this.value = options.initialValue ?? 0;
this.onDecrement = options.onDecrement ?? null;
@@ -59,6 +62,16 @@ export default class NumberInputView extends UINode {
}
}
disable(): void {
this.mainElement.classList.add("disabled");
this.inputElement.disabled = true;
}
enable(): void {
this.mainElement.classList.remove("disabled");
this.inputElement.disabled = false;
}
setValue(value: number): void {
this.value = value;
this.inputElement.valueAsNumber = value;
@@ -66,7 +79,7 @@ export default class NumberInputView extends UINode {
rebuild(): HTMLDivElement {
this.labelElement = UINode.make("label", {
classes: ["number-input-label"],
classes: ["number-input-label", this.labelPosition],
innerText: this.label ?? "",
});
if (this.label !== null) {