From 6b0395b453c19691a16901997c9ce61962e93a0b Mon Sep 17 00:00:00 2001 From: Daniel Ledda Date: Sun, 5 Sep 2021 21:29:47 +0200 Subject: [PATCH] feat: better layout --- .../BeatGroupSettingsView.ts | 32 +++++++++++++++---- .../BeatLikeLoopSettings.css | 1 - .../BeatLikeLoopSettingsView.ts | 13 ++++++-- src/ui/BeatSettings/BeatSettings.css | 5 +++ src/ui/BeatSettings/BeatSettingsView.ts | 10 ++++-- src/ui/Root/Root.css | 3 +- 6 files changed, 52 insertions(+), 12 deletions(-) diff --git a/src/ui/BeatGroupSettings/BeatGroupSettingsView.ts b/src/ui/BeatGroupSettings/BeatGroupSettingsView.ts index 9079ed1..46a80e8 100644 --- a/src/ui/BeatGroupSettings/BeatGroupSettingsView.ts +++ b/src/ui/BeatGroupSettings/BeatGroupSettingsView.ts @@ -19,7 +19,8 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber private timeSigUpInput!: NumberInputView; private loopSettingsView!: BeatLikeLoopSettingsView; private autoBeatLengthCheckbox!: BoolBoxView; - private forceFullBarsCheckbox!: BoolBoxView; + private beatSettingsViews: BeatSettingsView[] = []; + private beatSettingsContainer!: HTMLDivElement; private autoBeatOptions!: HTMLElement; constructor(options: BeatGroupSettingsUINodeOptions) { @@ -29,6 +30,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber BeatGroupEvents.BarCountChanged, BeatGroupEvents.TimeSigUpChanged, BeatEvents.DisplayTypeChanged, + BeatGroupEvents.BeatListChanged, ]); } @@ -43,6 +45,27 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber } else { this.autoBeatOptions.classList.remove("visible"); } + } else if (event === BeatGroupEvents.BeatListChanged) { + this.remakeBeatSettingsViews(); + } + } + + private remakeBeatSettingsViews() { + const beatCount = this.beatGroup.getBeatCount(); + this.beatSettingsViews.splice(beatCount, this.beatSettingsViews.length - beatCount); + for (let i = 0; i < beatCount; i++) { + if (this.beatSettingsViews[i]) { + this.beatSettingsViews[i].setBeat(this.beatGroup.getBeatByIndex(i)); + } else { + this.beatSettingsViews.push(new BeatSettingsView({ beat: this.beatGroup.getBeatByIndex(i) })); + } + } + if (!this.beatSettingsContainer) { + this.beatSettingsContainer = UINode.make("div", { + subs: this.beatSettingsViews.map(view => view.render()) + }); + } else { + this.beatSettingsContainer.replaceChildren(...this.beatSettingsViews.map(view => view.render())); } } @@ -76,10 +99,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber }), ] }); - const beatSettingsViews = []; - for (let i = 0; i < this.beatGroup.getBeatCount(); i++) { - beatSettingsViews.push(new BeatSettingsView({ beat: this.beatGroup.getBeatByIndex(i) })); - } + this.remakeBeatSettingsViews(); this.node = UINode.make("div", { classes: ["beat-group-settings"], subs: [ @@ -104,7 +124,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber innerText: "New Track", onclick: () => this.beatGroup.addBeat(), }), - ...beatSettingsViews.map(view => view.render()), + this.beatSettingsContainer ], }), ], diff --git a/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css b/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css index 984e757..58a6406 100644 --- a/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css +++ b/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css @@ -1,5 +1,4 @@ .loop-settings { - margin-top: 1em; } .loop-settings-option-group { diff --git a/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts b/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts index d4fae5f..d1f1d17 100644 --- a/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts +++ b/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts @@ -9,6 +9,7 @@ import BoolBoxView from "../Widgets/BoolBox/BoolBoxView"; export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & { beatLike: BeatLike, + title?: string, }; export default class BeatLikeLoopSettingsView extends UINode implements ISubscriber { @@ -16,10 +17,12 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri private loopLengthInput!: NumberInputView; private loopCheckbox!: BoolBoxView; private loopLengthSection!: HTMLDivElement; + private title: string; constructor(options: BeatLikeLoopSettingsViewUINodeOptions) { super(options); this.beatLike = options.beatLike; + this.title = options.title ?? "Looping settings:"; this.setupBindings(); } @@ -30,7 +33,7 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri ]); } - notify(publisher: IPublisher, event: "all" | T[] | T): void { + notify(publisher: IPublisher | null, event: "all" | T[] | T): void { if (event === BeatEvents.LoopLengthChanged) { this.loopLengthInput.setValue(this.beatLike.getLoopLength()); } else if (event === BeatEvents.DisplayTypeChanged) { @@ -43,6 +46,12 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri } } + setBeatLike(beatLike: BeatLike): void { + this.beatLike = beatLike; + this.notify(null, BeatEvents.LoopLengthChanged); + this.notify(null, BeatEvents.DisplayTypeChanged); + } + rebuild(): HTMLElement { this.loopLengthInput = new NumberInputView({ initialValue: this.beatLike.getLoopLength(), @@ -70,7 +79,7 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri this.node = UINode.make("div", { classes: ["loop-settings"], subs: [ - UINode.make("p", {innerText: "Global looping settings:"}), + UINode.make("p", {innerText: this.title}), UINode.make("div", { classes: ["loop-settings-option-group"], subs: [ diff --git a/src/ui/BeatSettings/BeatSettings.css b/src/ui/BeatSettings/BeatSettings.css index d9eeadd..3dcb822 100644 --- a/src/ui/BeatSettings/BeatSettings.css +++ b/src/ui/BeatSettings/BeatSettings.css @@ -24,3 +24,8 @@ .beat-settings-time-sig input { margin: auto; } + +.beat-settings-name-field { + margin: auto auto auto auto; + width: 5em; +} \ No newline at end of file diff --git a/src/ui/BeatSettings/BeatSettingsView.ts b/src/ui/BeatSettings/BeatSettingsView.ts index 854566a..a06b1b8 100644 --- a/src/ui/BeatSettings/BeatSettingsView.ts +++ b/src/ui/BeatSettings/BeatSettingsView.ts @@ -11,7 +11,6 @@ export type BeatSettingsViewUINodeOptions = UINodeOptions & { export default class BeatSettingsView extends UINode implements ISubscriber { private beat: Beat; - private visible = false; private nameInput!: HTMLInputElement; private loopSettingsView!: BeatLikeLoopSettingsView; @@ -25,7 +24,13 @@ export default class BeatSettingsView extends UINode implements ISubscriber { this.beat.addSubscriber(this, "all"); } - notify(publisher: IPublisher, event: "all" | T[] | T): void { + setBeat(beat: Beat): void { + this.beat = beat; + this.loopSettingsView.setBeatLike(beat); + this.notify(null, BeatEvents.NewName); + } + + notify(publisher: IPublisher | null, event: "all" | T[] | T): void { if (event === BeatEvents.NewName) { this.nameInput.value = this.beat.getName(); } @@ -35,6 +40,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber { 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), }); diff --git a/src/ui/Root/Root.css b/src/ui/Root/Root.css index 850246d..38c40d7 100644 --- a/src/ui/Root/Root.css +++ b/src/ui/Root/Root.css @@ -25,7 +25,8 @@ background-color: var(--color-bg-light); height: 100%; width: 30em; - padding: 3em; + padding: 0 3em 0 3em; + overflow: scroll; display: inline-block; }