Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-12-24 13:33:00 +00:00
Code Issues 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>
</div>
<section 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>
<DoorPlacer v-if="current_step === 0" />
</div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import RectPad from "./rects/RectPad.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue";
@Options({
components: {
RectPad,
DoorPlacer,
},
})
export default class CalendarImage extends Vue {
export default class DoorMapEditor extends Vue {
private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
private current_step = 0;
}
</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>