forked from noxious/client
#351 : Added map editor settings modal
This commit is contained in:
parent
838610d041
commit
7542fd70ed
59
public/assets/icons/mapEditor/settings.svg
Normal file
59
public/assets/icons/mapEditor/settings.svg
Normal file
@ -0,0 +1,59 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M490.667,405.333h-56.811C424.619,374.592,396.373,352,362.667,352s-61.931,22.592-71.189,53.333H21.333
|
||||
C9.557,405.333,0,414.891,0,426.667S9.557,448,21.333,448h270.144c9.237,30.741,37.483,53.333,71.189,53.333
|
||||
s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,405.333,490.667,405.333z M362.667,458.667
|
||||
c-17.643,0-32-14.357-32-32s14.357-32,32-32s32,14.357,32,32S380.309,458.667,362.667,458.667z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M490.667,64h-56.811c-9.259-30.741-37.483-53.333-71.189-53.333S300.736,33.259,291.477,64H21.333
|
||||
C9.557,64,0,73.557,0,85.333s9.557,21.333,21.333,21.333h270.144C300.736,137.408,328.96,160,362.667,160
|
||||
s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,64,490.667,64z M362.667,117.333
|
||||
c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32s32,14.357,32,32C394.667,102.976,380.309,117.333,362.667,117.333z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M490.667,234.667H220.523c-9.259-30.741-37.483-53.333-71.189-53.333s-61.931,22.592-71.189,53.333H21.333
|
||||
C9.557,234.667,0,244.224,0,256c0,11.776,9.557,21.333,21.333,21.333h56.811c9.259,30.741,37.483,53.333,71.189,53.333
|
||||
s61.931-22.592,71.189-53.333h270.144c11.797,0,21.333-9.557,21.333-21.333C512,244.224,502.464,234.667,490.667,234.667z
|
||||
M149.333,288c-17.643,0-32-14.357-32-32s14.357-32,32-32c17.643,0,32,14.357,32,32S166.976,288,149.333,288z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -72,8 +72,7 @@
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
|
||||
<input @change="handleCheck" v-model="checkboxValue" type="checkbox" />
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="isMapEditorSettingsModalOpen = !isMapEditorSettingsModalOpen"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/settings.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(S)</span></button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
|
||||
@ -84,9 +83,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal :isModalOpen="isMapEditorSettingsModalOpen" @modal:close="() => (isMapEditorSettingsModalOpen = false)" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Map editor settings</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="m-4 flex items-center space-x-2">
|
||||
<input id="continuous-drawing" @change="handleCheck" v-model="checkboxValue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
|
||||
<label for="continuous-drawing" class="text-sm font-medium text-gray-200 cursor-pointer"> Continuous Drawing </label>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
@ -95,17 +107,14 @@ const mapEditor = useMapEditorComposable()
|
||||
|
||||
const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list', 'close-lists'])
|
||||
|
||||
// track when clicked outside of toolbar items
|
||||
// States
|
||||
const toolbar = ref(null)
|
||||
|
||||
// track select state
|
||||
let selectPencilOpen = ref(false)
|
||||
let selectEraserOpen = ref(false)
|
||||
|
||||
let tileListShown = ref(false)
|
||||
let mapObjectListShown = ref(false)
|
||||
|
||||
let checkboxValue = ref<Boolean>(false)
|
||||
const isMapEditorSettingsModalOpen = ref(false)
|
||||
const selectPencilOpen = ref(false)
|
||||
const selectEraserOpen = ref(false)
|
||||
const tileListShown = ref(false)
|
||||
const mapObjectListShown = ref(false)
|
||||
const checkboxValue = ref<Boolean>(false)
|
||||
|
||||
defineExpose({ tileListShown, mapObjectListShown })
|
||||
|
||||
@ -143,6 +152,10 @@ function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
|
||||
}
|
||||
|
||||
function handleClick(tool: string) {
|
||||
if (tool === 'mapEditorSettings') {
|
||||
isMapEditorSettingsModalOpen.value = true
|
||||
emit('close-lists')
|
||||
}
|
||||
if (tool === 'settings') {
|
||||
emit('open-settings')
|
||||
emit('close-lists')
|
||||
@ -180,7 +193,8 @@ function initKeyShortcuts(event: KeyboardEvent) {
|
||||
p: 'pencil',
|
||||
e: 'eraser',
|
||||
b: 'paint',
|
||||
z: 'settings'
|
||||
z: 'settings',
|
||||
s: 'mapEditorSettings'
|
||||
}
|
||||
|
||||
if (keyActions.hasOwnProperty(event.key)) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user