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

update

Browse Source
This commit is contained in:
Daniel Ledda
2023-05-07 11:17:14 +02:00
parent f20106207c
commit a1bc636c11
6 changed files with 911 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/ui/Root/Root.vue
View File

@@ -22,42 +22,44 @@
<beat-settings :beat-index="activeBeatIndex" />
</div>
<div class="sidebar-toggle">
<div
class="quick-access-button"
:title="`${ sidebarActive ? 'Hide' : 'Show' } sidebar`"
@click="sidebarActive = !sidebarActive">
<icon icon-name="list" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Change orientation"
@click="toggleOrientation">
<icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Bake all tracks"
@click="bakeAll">
<icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Reset all"
@click="resetActiveBeat">
<icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
:class="{ 'unclickable': !saveDirty }"
:title="saveDirty ? 'Save changes' : 'No unsaved changes'"
@click="save('localStorage')">
<icon icon-name="download" color="var(--color-ui-neutral-dark)" />
<div class="buttons">
<div
class="quick-access-button"
:title="`${ sidebarActive ? 'Hide' : 'Show' } sidebar`"
@click="sidebarActive = !sidebarActive">
<icon icon-name="list" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Change orientation"
@click="toggleOrientation">
<icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Bake all tracks"
@click="bakeAll">
<icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Reset all"
@click="resetActiveBeat">
<icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
:class="{ 'unclickable': !saveDirty }"
:title="saveDirty ? 'Save changes' : 'No unsaved changes'"
@click="save('localStorage')">
<icon icon-name="download" color="var(--color-ui-neutral-dark)" />
</div>
</div>
<toolbox class="toolbox" />
</div>
</div>
<div class="beat-stage-container">
<toolbox />
<div class="beat-stage">
<beat-view
:beat-index="activeBeatIndex"
@@ -76,6 +78,8 @@
import { BeatStoreKey, createBeatStore } from "@/BeatStore";
import { AppStateStoreKey, createAppStateStore } from "@/AppState";
const TITLE = 'Drum Slayer';
defineProps<{
title: string,
}>();
@@ -99,8 +103,6 @@
saveDirty,
} = beatStore;
const TITLE = 'Drum Slayer';
watch(saveDirty, (dirty) => {
if (dirty) {
document.title = `${ TITLE } (unsaved changes)`;
@@ -110,9 +112,9 @@
});
const mediaQueryList = window.matchMedia("screen and (max-width: 900px)");
const onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
function onMediaChange(event: MediaQueryListEvent | MediaQueryList) {
sidebarActive.value = event.matches;
};
}
mediaQueryList.addEventListener('change', onMediaChange);
onMediaChange(mediaQueryList);
@@ -178,11 +180,11 @@
background-color: var(--color-bg-light);
overflow: scroll;
display: inline-block;
}
.settings .title {
color: var(--color-title-light);
text-align: center;
.title {
color: var(--color-title-light);
text-align: center;
}
}
.sidebar-toggle {
@@ -191,18 +193,31 @@
min-width: 2em;
background-color: var(--color-bg-light);
left: 0;
}
display: flex;
flex-direction: column;
.quick-access-button {
right: 0;
width: 2em;
height: 2em;
cursor: pointer;
margin-bottom: 0.5em;
&.unclickable {
opacity: 50%;
cursor: auto;
.buttons {
flex: 1;
.quick-access-button {
flex: 1;
right: 0;
width: 2em;
height: 2em;
cursor: pointer;
margin-bottom: 0.5em;
&.unclickable {
opacity: 50%;
cursor: auto;
}
}
}
.toolbox {
flex: 1;
width: 2em;
}
}