feat: cleaned up mouse behaviour and saving
This commit is contained in:
Daniel Ledda
@@ -2,62 +2,63 @@
|
||||
<div
|
||||
class="root"
|
||||
:class="{ 'sidebar-visible': sidebarActive, 'vertical-mode': currentOrientation === 'vertical' }">
|
||||
<div class="root-sidebar">
|
||||
<div class="root-sidebar-left-strip">
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-left-strip">
|
||||
<div v-for="(beat, i) in beats"
|
||||
:key="beat.name.value"
|
||||
class="root-sidebar-left-tab"
|
||||
class="sidebar-left-tab"
|
||||
:class="{ 'active': i === activeBeatIndex }"
|
||||
@click="activeBeatIndex = i">
|
||||
{{ beat.name.value }}
|
||||
</div>
|
||||
<div
|
||||
class="root-sidebar-add-beat"
|
||||
class="sidebar-add-beat"
|
||||
@click="addNewBeat()">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
<div class="root-settings">
|
||||
<h1 class="root-title">{{ title }}</h1>
|
||||
<div class="settings">
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<beat-settings :beat-index="activeBeatIndex" />
|
||||
</div>
|
||||
<div class="root-sidebar-toggle">
|
||||
<div class="sidebar-toggle">
|
||||
<div
|
||||
class="root-quick-access-button"
|
||||
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="root-quick-access-button"
|
||||
class="quick-access-button"
|
||||
title="Change orientation"
|
||||
@click="toggleOrientation">
|
||||
<icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
|
||||
</div>
|
||||
<div
|
||||
class="root-quick-access-button"
|
||||
class="quick-access-button"
|
||||
title="Bake all tracks"
|
||||
@click="bakeAll">
|
||||
<icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
|
||||
</div>
|
||||
<div
|
||||
class="root-quick-access-button"
|
||||
class="quick-access-button"
|
||||
title="Reset all"
|
||||
@click="resetActiveBeat">
|
||||
<icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
|
||||
</div>
|
||||
<div
|
||||
class="root-quick-access-button"
|
||||
title="Reset all"
|
||||
class="quick-access-button"
|
||||
:class="{ 'unclickable': !saveDirty }"
|
||||
:title="saveDirty ? 'Save changes' : 'No unsaved changes'"
|
||||
@click="save('localStorage')">
|
||||
Save
|
||||
<icon icon-name="download" color="var(--color-ui-neutral-dark)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="root-beat-stage-container">
|
||||
<div class="beat-stage-container">
|
||||
<toolbox />
|
||||
<div class="root-beat-stage">
|
||||
<div class="beat-stage">
|
||||
<beat-view
|
||||
:beat-index="activeBeatIndex"
|
||||
:orientation="currentOrientation" />
|
||||
@@ -67,7 +68,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, provide, ref } from "vue";
|
||||
import { onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
|
||||
import BeatSettings from "@/ui/BeatSettings/BeatSettings.vue";
|
||||
import BeatView from "@/ui/Beat/Beat.vue";
|
||||
import Icon from "@/ui/Widgets/Icon/Icon.vue";
|
||||
@@ -95,8 +96,19 @@
|
||||
beats,
|
||||
addNewBeat,
|
||||
bakeAll,
|
||||
saveDirty,
|
||||
} = beatStore;
|
||||
|
||||
const TITLE = 'Drum Slayer';
|
||||
|
||||
watch(saveDirty, (dirty) => {
|
||||
if (dirty) {
|
||||
document.title = `${ TITLE } (unsaved changes)`;
|
||||
} else {
|
||||
document.title = TITLE;
|
||||
}
|
||||
});
|
||||
|
||||
const mediaQueryList = window.matchMedia("screen and (max-width: 900px)");
|
||||
const onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
|
||||
sidebarActive.value = event.matches;
|
||||
@@ -107,6 +119,7 @@
|
||||
function windowMouseUp() {
|
||||
appStateStore.selectingUnits.value = false;
|
||||
appStateStore.deselectingUnits.value = false;
|
||||
appStateStore.unitMouseStart.value = null;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -134,142 +147,149 @@
|
||||
background-color: var(--color-bg-dark);
|
||||
height: 100vh;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.root-sidebar {
|
||||
position: absolute;
|
||||
left: -28em;
|
||||
width: 30em;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
transition: left 400ms;
|
||||
}
|
||||
|
||||
.sidebar-visible .root-sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.root-settings {
|
||||
z-index: 1;
|
||||
width: 28em;
|
||||
background-color: var(--color-bg-light);
|
||||
overflow: scroll;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.root-settings .root-title {
|
||||
color: var(--color-title-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.root-sidebar-toggle {
|
||||
z-index: 1;
|
||||
height: 100vh;
|
||||
min-width: 2em;
|
||||
background-color: var(--color-bg-light);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.root-quick-access-button {
|
||||
right: 0;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.root-beat-stage-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: left 400ms, width 400ms;
|
||||
}
|
||||
|
||||
.sidebar-visible .root-beat-stage-container {
|
||||
left: 30em;
|
||||
width: calc(100vw - 30em);
|
||||
}
|
||||
|
||||
.root-beat-stage {
|
||||
position: relative;
|
||||
max-height: 100vh;
|
||||
margin: auto;
|
||||
max-width: 100vw;
|
||||
transition: max-width 400ms;
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
.vertical-mode .root-beat-stage {
|
||||
margin: auto auto;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar-visible .root-beat-stage {
|
||||
max-width: calc(100vw - 30em);
|
||||
}
|
||||
|
||||
.root-sidebar-left-strip {
|
||||
writing-mode: vertical-rl;
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.root-sidebar-left-strip > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.root-sidebar-left-tab {
|
||||
transform: rotate(-180deg);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 8px 3px 8px 3px;
|
||||
}
|
||||
|
||||
.root-sidebar-left-tab.active {
|
||||
background-color: var(--color-bg-medium);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.root-sidebar-add-beat {
|
||||
width: 100%;
|
||||
padding: 8px 3px 8px 3px;
|
||||
}
|
||||
|
||||
.root-sidebar-add-beat:hover,
|
||||
.root-sidebar-left-tab:hover:not(.active) {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-ui-neutral-dark);
|
||||
transition: background-color 200ms;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.sidebar-visible .root-sidebar {
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
left: -28em;
|
||||
width: 30em;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
transition: left 400ms;
|
||||
}
|
||||
.root-sidebar {
|
||||
left: calc(-100vw + 2em);
|
||||
width: 100vw;
|
||||
|
||||
&.sidebar-visible {
|
||||
.beat-stage {
|
||||
max-width: calc(100vw - 30em);
|
||||
}
|
||||
|
||||
.beat-stage-container {
|
||||
left: 30em;
|
||||
width: calc(100vw - 30em);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.root-settings {
|
||||
width: calc(100vw - 2em);
|
||||
|
||||
.settings {
|
||||
z-index: 1;
|
||||
width: 28em;
|
||||
background-color: var(--color-bg-light);
|
||||
overflow: scroll;
|
||||
display: inline-block;
|
||||
}
|
||||
.sidebar-visible .root-beat-stage-container {
|
||||
left: 100vw;
|
||||
|
||||
.settings .title {
|
||||
color: var(--color-title-light);
|
||||
text-align: center;
|
||||
}
|
||||
.root-beat-stage-container {
|
||||
|
||||
.sidebar-toggle {
|
||||
z-index: 1;
|
||||
height: 100vh;
|
||||
min-width: 2em;
|
||||
background-color: var(--color-bg-light);
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-visible .root-beat-stage {
|
||||
|
||||
.quick-access-button {
|
||||
right: 0;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&.unclickable {
|
||||
opacity: 50%;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.beat-stage-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: left 400ms, width 400ms;
|
||||
}
|
||||
|
||||
.beat-stage {
|
||||
position: relative;
|
||||
max-height: 100vh;
|
||||
margin: auto;
|
||||
max-width: 100vw;
|
||||
transition: max-width 400ms;
|
||||
padding-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
&.vertical-mode .beat-stage {
|
||||
margin: auto auto;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar-left-strip {
|
||||
writing-mode: vertical-rl;
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.sidebar-left-strip > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-left-tab {
|
||||
transform: rotate(-180deg);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 8px 3px 8px 3px;
|
||||
}
|
||||
|
||||
.sidebar-left-tab.active {
|
||||
background-color: var(--color-bg-medium);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-add-beat {
|
||||
width: 100%;
|
||||
padding: 8px 3px 8px 3px;
|
||||
}
|
||||
|
||||
.sidebar-add-beat:hover,
|
||||
.sidebar-left-tab:hover:not(.active) {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-ui-neutral-dark);
|
||||
transition: background-color 200ms;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
&.sidebar-visible .sidebar {
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
.sidebar {
|
||||
left: calc(-100vw + 2em);
|
||||
width: 100vw;
|
||||
}
|
||||
.settings {
|
||||
width: calc(100vw - 2em);
|
||||
}
|
||||
.sidebar-visible .beat-stage-container {
|
||||
left: 100vw;
|
||||
}
|
||||
.beat-stage-container {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-visible .beat-stage {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user