From ec6f3031b86825f3f29f10ea7c4e1bd28f194655 Mon Sep 17 00:00:00 2001 From: Colin Kallemein Date: Thu, 6 Feb 2025 23:20:30 +0100 Subject: [PATCH] Rebuilt side panel for object & tile lists Reorganised file structure --- .../icons/mapEditor/dropdown-chevron.svg | 4 + public/assets/icons/mapEditor/search.svg | 3 + src/assets/scss/main.scss | 8 +- .../mapEditor/partials/ListPanel.vue | 68 +++++ .../mapEditor/partials/MapObjectList.vue | 132 ---------- .../mapEditor/partials/TileList.vue | 176 ------------- .../gameMaster/mapEditor/partials/Toolbar.vue | 7 +- .../partials/lists/MapObjectList.vue | 84 +++++++ .../mapEditor/partials/lists/TileList.vue | 232 ++++++++++++++++++ src/components/screens/MapEditor.vue | 15 +- 10 files changed, 406 insertions(+), 323 deletions(-) create mode 100644 public/assets/icons/mapEditor/dropdown-chevron.svg create mode 100644 public/assets/icons/mapEditor/search.svg create mode 100644 src/components/gameMaster/mapEditor/partials/ListPanel.vue delete mode 100644 src/components/gameMaster/mapEditor/partials/MapObjectList.vue delete mode 100644 src/components/gameMaster/mapEditor/partials/TileList.vue create mode 100644 src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue create mode 100644 src/components/gameMaster/mapEditor/partials/lists/TileList.vue diff --git a/public/assets/icons/mapEditor/dropdown-chevron.svg b/public/assets/icons/mapEditor/dropdown-chevron.svg new file mode 100644 index 0000000..72dfae8 --- /dev/null +++ b/public/assets/icons/mapEditor/dropdown-chevron.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/assets/icons/mapEditor/search.svg b/public/assets/icons/mapEditor/search.svg new file mode 100644 index 0000000..88fba4f --- /dev/null +++ b/public/assets/icons/mapEditor/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index ff9d857..7e61873 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -73,7 +73,7 @@ input { } .input-field { - @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300; + @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300 font-default; &:focus-visible { @apply outline-none border-cyan rounded bg-gray-900; } @@ -88,6 +88,12 @@ input { } } +select { + &.input-field { + @apply appearance-none bg-[url('/assets/icons/mapEditor/dropdown-chevron.svg')] bg-no-repeat bg-[calc(100%_-_10px)_center] bg-[length:20px] text-white; + } +} + .form-field-full { @apply w-full flex flex-col mb-5; label { diff --git a/src/components/gameMaster/mapEditor/partials/ListPanel.vue b/src/components/gameMaster/mapEditor/partials/ListPanel.vue new file mode 100644 index 0000000..fb9e776 --- /dev/null +++ b/src/components/gameMaster/mapEditor/partials/ListPanel.vue @@ -0,0 +1,68 @@ + + + diff --git a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue deleted file mode 100644 index 557427a..0000000 --- a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue +++ /dev/null @@ -1,132 +0,0 @@ - - - diff --git a/src/components/gameMaster/mapEditor/partials/TileList.vue b/src/components/gameMaster/mapEditor/partials/TileList.vue deleted file mode 100644 index cf8b576..0000000 --- a/src/components/gameMaster/mapEditor/partials/TileList.vue +++ /dev/null @@ -1,176 +0,0 @@ - - - diff --git a/src/components/gameMaster/mapEditor/partials/Toolbar.vue b/src/components/gameMaster/mapEditor/partials/Toolbar.vue index 8a92fca..4ca311e 100644 --- a/src/components/gameMaster/mapEditor/partials/Toolbar.vue +++ b/src/components/gameMaster/mapEditor/partials/Toolbar.vue @@ -76,7 +76,7 @@ -
+
@@ -93,7 +93,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue' const mapEditor = useMapEditorComposable() -const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list', 'close-lists']) +const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-lists', 'close-lists']) // track when clicked outside of toolbar items const toolbar = ref(null) @@ -113,8 +113,7 @@ defineExpose({ tileListShown, mapObjectListShown }) function setDrawMode(value: string) { if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil' || mapEditor.tool.value === 'eraser') { emit('close-lists') - if (value === 'tile') emit('open-tile-list') - if (value === 'map_object') emit('open-map-object-list') + if (value === 'tile' || value === 'map_object') emit('open-lists') } mapEditor.setDrawMode(value) diff --git a/src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue b/src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue new file mode 100644 index 0000000..2bb0a81 --- /dev/null +++ b/src/components/gameMaster/mapEditor/partials/lists/MapObjectList.vue @@ -0,0 +1,84 @@ + + + diff --git a/src/components/gameMaster/mapEditor/partials/lists/TileList.vue b/src/components/gameMaster/mapEditor/partials/lists/TileList.vue new file mode 100644 index 0000000..576b6ea --- /dev/null +++ b/src/components/gameMaster/mapEditor/partials/lists/TileList.vue @@ -0,0 +1,232 @@ + + + diff --git a/src/components/screens/MapEditor.vue b/src/components/screens/MapEditor.vue index ec4d43f..ef14987 100644 --- a/src/components/screens/MapEditor.vue +++ b/src/components/screens/MapEditor.vue @@ -12,14 +12,11 @@ @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @close-editor="mapEditor.toggleActive" - @close-lists="tileList?.close" - @closeLists="objectList?.close" - @open-tile-list="tileList?.open" - @open-map-object-list="objectList?.open" + @close-lists="list?.close" + @open-lists="list?.open" /> - - +
@@ -34,10 +31,9 @@ import 'phaser' import type { Map as MapT } from '@/application/types' import Map from '@/components/gameMaster/mapEditor/Map.vue' import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue' -import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue' +import ListPanel from '@/components/gameMaster/mapEditor/partials/ListPanel.vue' import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue' import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue' -import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue' import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue' import { useMapEditorComposable } from '@/composables/useMapEditorComposable' import { loadAllTileTextures } from '@/services/mapService' @@ -51,8 +47,7 @@ const mapEditor = useMapEditorComposable() const gameStore = useGameStore() const mapModal = useTemplateRef('mapModal') -const tileList = useTemplateRef('tileList') -const objectList = useTemplateRef('objectList') +const list = useTemplateRef('list') const mapSettingsModal = useTemplateRef('mapSettingsModal') const isLoaded = ref(false)