noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Global margin for modals, cleaned up gm-panel styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-20 21:39:30 +02:00
parent 79f804d5f5
commit 98e9ae1a80
9 changed files with 97 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/utilities/zoneEditor/Decorations.vue
View File

@ -5,15 +5,17 @@
<h3 class="modal-title">Decorations</h3>
</template>
<template #modalBody>
<div class="buttons">
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
</div>
<hr>
<canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
<div class="decorations">
<img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
<div class="container decorations">
<div class="buttons">
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
</div>
<hr>
<canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
<div class="decorations">
<img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
</div>
</div>
</template>
</Modal>
@ -91,6 +93,8 @@ onMounted(async () => {
</script>
<style lang="scss">
@import '@/assets/scss/main';
.decorations {
display: flex;
flex-wrap: wrap;
@ -111,6 +115,6 @@ onMounted(async () => {
}
.decorations img.selected {
border: 2px solid #ff0000;
border: 2px solid $red;
}
</style>

15
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -5,9 +5,11 @@
<h3 class="modal-title">Tiles</h3>
</template>
<template #modalBody>
<canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
<div class="tiles">
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
<div class="container tiles">
<canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
<div class="tiles">
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
</div>
</div>
</template>
</Modal>
@ -85,6 +87,8 @@ onMounted(async () => {
</script>
<style lang="scss">
@import '@/assets/scss/main.scss';
.tiles {
display: flex;
flex-wrap: wrap;
@ -100,6 +104,7 @@ onMounted(async () => {
}
.tiles img.selected {
border: 2px solid #ff0000;
border: 2px solid $red;
}
</style>
</style>

40
src/components/utilities/zoneEditor/ZoneSettings.vue
View File

@ -5,28 +5,30 @@
</template>
<template #modalBody>
<form method="post" @submit.prevent="" class="modal-form">
<div class="form-fields">
<div class="form-field">
<label for="name">Name</label>
<input class="input-cyan" v-model="name" name="name" id="name" />
</div>
<div class="form-field two-col">
<div class="field">
<label for="name">Width</label>
<input class="input-cyan" v-model="width" name="name" id="name" type="number" />
<div class="container settings">
<form method="post" @submit.prevent="" class="modal-form">
<div class="form-fields">
<div class="form-field">
<label for="name">Name</label>
<input class="input-cyan" v-model="name" name="name" id="name" />
</div>
<div class="field">
<label for="name">Height</label>
<input class="input-cyan" v-model="height" name="name" id="name" type="number" />
<div class="form-field two-col">
<div class="field">
<label for="name">Width</label>
<input class="input-cyan" v-model="width" name="name" id="name" type="number" />
</div>
<div class="field">
<label for="name">Height</label>
<input class="input-cyan" v-model="height" name="name" id="name" type="number" />
</div>
</div>
<div class="form-field">
<label for="name">PVP enabled</label>
<input class="input-cyan" name="name" id="name" />
</div>
</div>
<div class="form-field">
<label for="name">PVP enabled</label>
<input class="input-cyan" name="name" id="name" />
</div>
</div>
</form>
</form>
</div>
</template>
</Modal>
</template>