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

fix: stuff

Browse Source
This commit is contained in:
Daniel Ledda
2023-01-04 13:17:44 +01:00
parent f5a6ad745e
commit 4955bf6c92
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/ui/Root/Toolbox.css
View File

@@ -1,6 +1,4 @@
.root-toolbox { .root-toolbox { }
position: relative;
}
.root-toolbox .main-row { .root-toolbox .main-row {
height: 2.5em; height: 2.5em;
@@ -12,11 +10,8 @@
} }
.root-toolbox .details { .root-toolbox .details {
position: absolute;
top: 2.5em;
left: 0;
right: 0;
margin: auto; margin: auto;
height: 4em;
width: min-content; width: min-content;
border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em;
padding: 0.5em; padding: 0.5em;
@@ -25,6 +20,10 @@
justify-content: center; justify-content: center;
} }
.root-toolbox .details.hidden {
visibility: hidden;
}
.root-toolbox .track-unit { .root-toolbox .track-unit {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -43,4 +42,12 @@
background-color: var(--color-ui-neutral-dark-active); background-color: var(--color-ui-neutral-dark-active);
} }
.root-toolbox .details .toolbox-button.active {
background-color: var(--color-ui-neutral-dark);
}
.root-toolbox .details .toolbox-button:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
.root-toolbox .details .toolbox-button {
background-color: var(--color-ui-neutral-dark-active);
}

10
src/ui/Root/ToolboxView.tsx
View File

@@ -28,25 +28,25 @@ export default class ToolboxView extends Rung<HTMLDivElement> implements ISubscr
switch (this.state.selectedTool) { switch (this.state.selectedTool) {
case "track-unit-type": case "track-unit-type":
return <div className={"details"}>{...TrackUnitTypeList.map(type => ( return <div className={"details"}>{...TrackUnitTypeList.map(type => (
<button <div
className={`toolbox-button${type === this.state.activeTrackUnitType ? " active" : ""}`} className={`toolbox-button${type === this.state.activeTrackUnitType ? " active" : ""}`}
onclick={() => this.state.selectTrackUnitTypePaint(type)}> onclick={() => this.state.selectTrackUnitTypePaint(type)}>
<div classes={TrackUnitView.getClasses({ on: true, type, stickingType: "none" })} /> <div classes={TrackUnitView.getClasses({ on: true, type, stickingType: "none" })} />
</button> </div>
))}</div>; ))}</div>;
case "sticking": case "sticking":
return <div className={"details"}>{...TrackUnitStickingTypeList.reduce((prev, stickingType) => { return <div className={"details"}>{...TrackUnitStickingTypeList.reduce((prev, stickingType) => {
if (stickingType !== "none") { if (stickingType !== "none") {
prev.push(<button prev.push(<div
className={`toolbox-button${stickingType === this.state.activeStickingType ? " active" : ""}`} className={`toolbox-button${stickingType === this.state.activeStickingType ? " active" : ""}`}
onclick={() => this.state.selectStickingTypePaint(stickingType)}> onclick={() => this.state.selectStickingTypePaint(stickingType)}>
{new IconView({ iconName: StickingTypeIconMap[stickingType] })} {new IconView({ iconName: StickingTypeIconMap[stickingType] })}
</button> as HTMLButtonElement); </div> as HTMLButtonElement);
} }
return prev; return prev;
}, [] as HTMLElement[])}</div>; }, [] as HTMLElement[])}</div>;
case "eraser": case "eraser":
return <></>; return <div className={"details hidden"} />;
} }
} }