Text white when item is active in asset manager

This commit is contained in:
Dennis Postma 2024-11-17 17:00:07 +01:00
parent 84939a7d32
commit 2c96caee4f
4 changed files with 4 additions and 4 deletions

View File

@ -14,7 +14,7 @@
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
<a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)"> <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<span>{{ characterType.name }}</span> <span :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>

View File

@ -16,7 +16,7 @@
<div class="h-7 w-16 max-w-16 flex justify-center"> <div class="h-7 w-16 max-w-16 flex justify-center">
<img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" /> <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
</div> </div>
<span>{{ object.name }}</span> <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>

View File

@ -12,7 +12,7 @@
<div v-bind="wrapperProps" ref="elementToScroll"> <div v-bind="wrapperProps" ref="elementToScroll">
<a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)"> <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<span>{{ sprite.name }}</span> <span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>

View File

@ -16,7 +16,7 @@
<div class="h-7 w-16 max-w-16 flex justify-center"> <div class="h-7 w-16 max-w-16 flex justify-center">
<img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" /> <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
</div> </div>
<span>{{ tile.name }}</span> <span :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
</div> </div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div> <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</a> </a>