DoorPlacer component
This commit is contained in:
parent
2db63db8db
commit
22d58f94b6
2 changed files with 44 additions and 29 deletions
|
@ -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
40
ui/src/components/door_map/DoorPlacer.vue
Normal 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>
|
Loading…
Reference in a new issue