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

feat: more fonts, more styling

Browse Source
This commit is contained in:
Daniel Ledda
2021-09-05 16:06:48 +02:00
parent e82a0878cd
commit f3f966c9ca
17 changed files with 101 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,3 @@
.beat:first-child {
padding-left: 5px;
}
.beat:last-child {
padding-right: 0;
}
.beat > * {
padding-right: 1em;
padding-left: 1em;

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

@@ -2,9 +2,9 @@
width: 2em;
height: 2em;
margin-right: 0.2em;
background-color: white;
background-color: var(--color-ui-neutral-dark);
border-width: 0.1em 0.1em 0.1em 0.1em;
border-color: black;
border-color: var(--color-ui-neutral-dark);
border-style: solid;
display: inline-block;
transition: background-color 150ms;
@@ -12,7 +12,8 @@
}
.beat-unit:hover {
background-color: #f1c3b6;
border-color: var(--color-ui-neutral-dark-hover);
background-color: var(--color-ui-neutral-dark-hover);
transition: none;
}
@@ -21,7 +22,8 @@
}
.beat-unit.beat-unit-on {
background-color: darksalmon;
background-color: var(--color-ui-accent-light);
border-color: var(--color-ui-neutral-light);
transition: none;
}

5
src/ui/BeatGroup/BeatGroupView.ts
View File

@@ -1,6 +1,5 @@
import UINode, {UINodeOptions} from "../UINode";
import BeatGroup from "../../BeatGroup";
import BeatGroupSettingsView from "../BeatGroupSettings/BeatGroupSettingsView";
import BeatView from "./Beat/BeatView";
export type BeatGroupUINodeOptions = UINodeOptions & {
@@ -11,7 +10,6 @@ export type BeatGroupUINodeOptions = UINodeOptions & {
export default class BeatGroupView extends UINode {
private title: string;
private beatGroup: BeatGroup;
private beatGroupSettingsView!: BeatGroupSettingsView;
private beatViews: BeatView[] = [];
constructor(options: BeatGroupUINodeOptions) {
@@ -25,12 +23,9 @@ export default class BeatGroupView extends UINode {
for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {
this.beatViews.push(new BeatView({beat: this.beatGroup.getBeatByIndex(i)}));
}
this.beatGroupSettingsView = new BeatGroupSettingsView({beatGroup: this.beatGroup});
return UINode.make("div", {
classes: ["beat-group"],
subs: [
UINode.make("h3", {innerText: this.title}),
this.beatGroupSettingsView.render(),
...this.beatViews.map(bv => bv.render())
],
});