imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Reverted toolbar position after feedback

Browse Source
This commit is contained in:
Dennis Postma 2024-07-12 23:58:06 +02:00
parent 4b4cc9f8f8
commit 5561373e33
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<div class="flex justify-center p-5"> <div class="flex justify-center p-5">
<div class="toolbar fixed bottom-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-[90%] h-10"> <div class="toolbar fixed top-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
<div class="tools flex gap-2.5" v-if="zoneEditorStore.zone"> <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
<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')"> <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" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
@ -15,7 +15,7 @@
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<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" /> <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>
<div class="flex flex-col absolute bottom-[100%] mb-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'"> <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/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/50" @click="setDrawMode('tile')"> <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
Tile Tile
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div> <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
@ -42,7 +42,7 @@
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<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" /> <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>
<div class="flex flex-col absolute bottom-[100%] mb-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen"> <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/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/50" @click="setDrawMode('tile')"> <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
Tile Tile
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div> <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>