Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

DoorPlacer component

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-01-19 17:59:18 +00:00
parent 2db63db8db
commit 22d58f94b6
2 changed files with 44 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
ui/src/components/DoorMapEditor.vue
View file

@ -15,46 +15,21 @@
</ul> </ul>
</div> </div>
<section v-if="current_step === 0"> <DoorPlacer v-if="current_step === 0" />
<div class="content">
<ul>
<li>Linksklick + Ziehen: Neues Türchen erstellen</li>
<li>Rechtsklick + Ziehen: Türchen verschieben</li>
<li>Doppel- oder Mittelklick: Türchen löschen</li>
</ul>
</div>
<figure class="image">
<img src="@/assets/adventskalender.jpg" />
<RectPad />
</figure>
</section>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Vue, Options } from "vue-class-component";
import RectPad from "./rects/RectPad.vue"; import DoorPlacer from "./door_map/DoorPlacer.vue";
@Options({ @Options({
components: { components: {
RectPad, DoorPlacer,
}, },
}) })
export default class CalendarImage extends Vue { export default class DoorMapEditor extends Vue {
private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"]; private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
private current_step = 0; private current_step = 0;
} }
</script> </script>
<style lang="scss" scoped>
figure {
user-select: none;
img + * {
position: absolute;
left: 0;
top: 0;
z-index: auto;
}
}
</style>

40
ui/src/components/door_map/DoorPlacer.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<section>
<div class="content">
<ul>
<li>Linksklick + Ziehen: Neues Türchen erstellen</li>
<li>Rechtsklick + Ziehen: Türchen verschieben</li>
<li>Doppel- oder Mittelklick: Türchen löschen</li>
</ul>
</div>
<figure class="image">
<img src="@/assets/adventskalender.jpg" />
<RectPad />
</figure>
</section>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import RectPad from "../rects/RectPad.vue";
@Options({
components: {
RectPad,
},
})
export default class DoorPlacer extends Vue {}
</script>
<style lang="scss" scoped>
section > figure {
user-select: none;
img + * {
position: absolute;
left: 0;
top: 0;
z-index: auto;
}
}
</style>