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

Converted more Tailwind

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-07 01:12:23 +02:00
parent ffac3bcbfd
commit ff2f890cb6
6 changed files with 34 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@
src="/assets/zone/blank_tile.png"
alt="Blank tile"
@click="zoneEditorStore.setSelectedTile('blank_tile')"
:class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
:class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
/>
<img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
@ -29,7 +29,7 @@
:src="`${config.server_endpoint}/assets/tiles/${tile}.png`"
alt="Tile"
@click="zoneEditorStore.setSelectedTile(tile)"
:class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
:class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
/>
</div>
</div>
@ -56,9 +56,3 @@ onMounted(async () => {
})
})
</script>
<style lang="scss">
img.selected {
@apply border-2 border-solid border-red;
}
</style>

36
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -2,18 +2,18 @@
<div class="flex justify-center m-2.5">
<div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
<div class="tools flex gap-2.5">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
</button>
<div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ zoneEditorStore.drawMode }}
<img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
<div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
@ -35,12 +35,12 @@
<div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ zoneEditorStore.drawMode }}
<img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
<div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
@ -62,7 +62,7 @@
<div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
</button>
@ -152,23 +152,3 @@ function clear() {
zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
}
</script>
<style scoped lang="scss">
.toolbar {
.tools {
.active {
@apply border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5;
.select {
.select-trigger {
&.open {
img {
@apply rotate-180;
}
}
}
}
}
}
}
</style>