From f40297485f299c11024eab4a9541d60a4c142a91 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 6 Jul 2024 18:47:07 +0200
Subject: [PATCH] More Tailwind conversion
---
src/components/forms/ChipsInput.vue | 40 ++------------
src/components/utilities/GmTools.vue | 11 +---
src/components/utilities/Notifications.vue | 8 +--
.../assetManager/partials/ObjectDetails.vue | 15 +----
.../assetManager/partials/ObjectList.vue | 55 ++++---------------
.../assetManager/partials/TileDetails.vue | 11 +---
.../assetManager/partials/TileList.vue | 52 +++---------------
src/components/utilities/zoneEditor/Tiles.vue | 28 ++--------
tailwind.config.js | 3 +-
9 files changed, 35 insertions(+), 188 deletions(-)
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 2ac6b78..5ef2a05 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -1,8 +1,8 @@
<template>
- <div class="chip-container">
- <div v-for="(chip, i) in modelValue" :key="i" class="chip">
+ <div class="chip-container flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
+ <div v-for="(chip, i) in modelValue" :key="i" class="chip flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
<span>{{ chip }}</span>
- <i class="delete-icon" @click="deleteChip(i)">X</i>
+ <i class="delete-icon cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
</div>
<input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
</div>
@@ -31,36 +31,4 @@ const backspaceDelete = (event) => {
modelValue.value = modelValue.value.slice(0, -1)
}
}
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/scss/main.scss';
-
-.chip-container {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- border-bottom: 1px solid #e0e0e0;
-
- .chip {
- display: flex;
- gap: 10px;
- align-items: center;
- background-color: $cyan;
- border-radius: 5px;
- padding: 5px 10px;
- margin: 4px;
-
- .delete-icon {
- cursor: pointer;
- color: $white;
- font-weight: 300;
- font-family: $default;
- font-style: normal;
- &:hover {
- color: $light-gray;
- }
- }
- }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/GmTools.vue b/src/components/utilities/GmTools.vue
index 32c084a..6c0ce9e 100644
--- a/src/components/utilities/GmTools.vue
+++ b/src/components/utilities/GmTools.vue
@@ -4,7 +4,7 @@
<h3 class="m-0 font-medium shrink-0">GM tools</h3>
</template>
<template #modalBody>
- <div class="content">
+ <div class="content flex flex-col gap-2.5 m-[15px] h-[80px]">
<button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
<button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
</div>
@@ -20,12 +20,3 @@ const zoneEditorStore = useZoneEditorStore()
const gmPanelStore = useGmPanelStore()
</script>
-<style lang="scss">
-.content {
- display: flex;
- flex-direction: column;
- gap: 0.8rem;
- margin: 15px;
- height: calc(100% - 30px);
-}
-</style>
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index e42f684..c7f4e5d 100644
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@@ -5,7 +5,7 @@
<h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
</template>
<template #modalBody v-if="notification.message">
- <p class="modal-notif">{{ notification.message }}</p>
+ <p class="modal-notif m-[15px]">{{ notification.message }}</p>
</template>
</Modal>
</div>
@@ -54,9 +54,3 @@ onBeforeUnmount(() => {
}
})
</script>
-
-<style lang="scss">
-.modal-notif {
- margin: 15px;
-}
-</style>
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 2065211..980d226 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -1,5 +1,5 @@
<template>
- <div class="object-manager">
+ <div class="object-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="objectImageUrl" :alt="'Object ' + selectedObject" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
@@ -66,15 +66,4 @@ onMounted(() => {
onBeforeUnmount(() => {
assetManagerStore.setSelectedObject('')
})
-</script>
-
-<style lang="scss">
-
-.asset-info {
- .object-manager {
- height: 100%;
- overflow: auto;
- }
-}
-
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index f243a3b..0185b4b 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,17 +1,18 @@
<template>
- <div class="asset add-new relative p-2.5">
- <label for="upload-asset" class="file-upload">
- <input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+ <div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
+ <label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+ <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s)
</label>
- <input class="input-cyan search-field" placeholder="Search..." />
+ <input class="input-cyan search-field w-full" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
- <a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
+ <a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
<div class="asset-details flex items-center gap-2.5">
- <!-- @TODO make all img have same width so text aligns nicely -->
- <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
- <span class="asset-name">{{ object.name }}</span>
+ <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
+ <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
+ </div>
+ <span class="asset-name flex-shrink-0">{{ object.name }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
@@ -53,40 +54,4 @@ onMounted(() => {
assetManagerStore.setObjectList(response)
})
})
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/main';
-
-.asset {
- cursor: pointer;
-
- &.add-new {
- display: flex;
- gap: 10px 20px;
- flex-wrap: wrap;
- .asset-name {
- flex-shrink: 0;
- }
- }
- .search-field {
- width: calc(100% - 20px);
- }
- .file-upload {
- background-color: rgba($cyan, 0.5);
- border: 1px solid $white;
- border-radius: 5px;
- text-shadow: 0 3px 6px rgba($black, 0.2);
- padding: 6px 15px;
- display: inline-flex;
-
- &:hover {
- background-color: $cyan;
- cursor: pointer;
- }
- input[type='file'] {
- display: none;
- }
- }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 4d4f106..f69727c 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -1,5 +1,5 @@
<template>
- <div class="tile-manager">
+ <div class="tile-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
@@ -87,12 +87,3 @@ onBeforeUnmount(() => {
assetManagerStore.setSelectedTile('')
})
</script>
-
-<style lang="scss">
-.asset-info {
- .tile-manager {
- height: 100%;
- overflow: auto;
- }
-}
-</style>
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 5de8548..c29aaf6 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,17 +1,17 @@
<template>
- <div class="asset add-new relative p-2.5">
- <label for="upload-asset" class="file-upload">
- <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+ <div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
+ <label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+ <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload tile(s)
</label>
- <input class="input-cyan search-field" placeholder="Search..." />
+ <input class="input-cyan search-field w-full" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
</div>
- <a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+ <a class="asset relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<div class="asset-details flex items-center gap-2.5">
- <!-- @TODO make all img have same width so text aligns nicely -->
+ <!-- TODO make all img have same width so text aligns nicely -->
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
- <span class="asset-name">{{ tile }}</span>
+ <span class="asset-name flex-shrink-0">{{ tile }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
@@ -52,40 +52,4 @@ onMounted(() => {
assetManagerStore.setTileList(response)
})
})
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/main';
-
-.asset {
- cursor: pointer;
-
- &.add-new {
- display: flex;
- gap: 10px 20px;
- flex-wrap: wrap;
- .asset-name {
- flex-shrink: 0;
- }
- }
- .search-field {
- width: calc(100% - 20px);
- }
- .file-upload {
- background-color: rgba($cyan, 0.5);
- border: 1px solid $white;
- border-radius: 5px;
- text-shadow: 0 3px 6px rgba($black, 0.2);
- padding: 6px 15px;
- display: inline-flex;
-
- &:hover {
- background-color: $cyan;
- cursor: pointer;
- }
- input[type='file'] {
- display: none;
- }
- }
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index 82c1bc0..8a8038f 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -5,10 +5,10 @@
<h3 class="m-0 font-medium shrink-0">Tiles</h3>
</template>
<template #modalBody>
- <div class="m-[15px] tiles">
- <div class="tiles">
- <img src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
- <img v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
+ <div class="m-[15px]">
+ <div class="flex flex-wrap gap-2.5">
+ <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
+ <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
</div>
</div>
</template>
@@ -37,23 +37,7 @@ onMounted(async () => {
</script>
<style lang="scss">
-@import '@/assets/scss/main.scss';
-
-.tiles {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
-}
-
-.tiles img {
- width: 64px;
- height: 32px;
- cursor: pointer;
- border: 2px solid transparent;
- transition: border 0.3s ease;
-}
-
-.tiles img.selected {
- border: 2px solid $red;
+img.selected {
+ @apply border-2 border-solid border-red;
}
</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 220ad0f..2053f71 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,8 @@ export default {
},
extend: {
dropShadow: {
- 'default': '0 3px 6px rgb(0, 0, 0)'
+ 'default': '0 3px 6px rgb(0, 0, 0)',
+ '20': '0 3px 6px rgba(0, 0, 0, 0.2)'
},
colors: {
red: {