Show tagged icon in photo page

GeniJaho · Mar 19, 2024 · 678fe50 · 678fe50
1 parent 2c1d4db
commit 678fe50
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/resources/js/Components/TaggedIcon.vue b/resources/js/Components/TaggedIcon.vue
@@ -0,0 +1,5 @@
+<template>
+<span class="flex items-center justify-center bg-gray-50 w-8 h-8 rounded-full">
+    <i class="fas fa-tags text-green-700 mt-0.5 ml-0.5"></i>
+</span>
+</template>
diff --git a/resources/js/Pages/Photos/Index.vue b/resources/js/Pages/Photos/Index.vue
@@ -7,6 +7,7 @@ import BulkTag from "@/Pages/Photos/Partials/BulkTag.vue";
 import {ref, watch} from "vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import SelectInput from "@/Components/SelectInput.vue";
+import TaggedIcon from "@/Components/TaggedIcon.vue";
 
 const props = defineProps({
     photos: Object,
@@ -166,9 +167,7 @@ const filter = (filters) => {
                                         <img :src="photo.full_path" :alt="photo.id" class="w-full h-64 object-cover rounded-lg">
                                     </a>
 
-                                    <span v-if="photo.items_exists" class="absolute top-2 right-2 flex items-center justify-center bg-gray-50 w-8 h-8 rounded-full">
-                                    <i class="fas fa-tags text-green-700  mt-0.5 ml-0.5"></i>
-                                </span>
+                                    <TaggedIcon v-if="photo.items_exists" class="absolute top-2 right-2" />
 
                                     <IconDangerButton
                                         v-if="!isSelecting"

diff --git a/resources/js/Pages/Photos/Show.vue b/resources/js/Pages/Photos/Show.vue
@@ -9,6 +9,7 @@ import { router } from '@inertiajs/vue3'
 import IconDangerButton from "@/Components/IconDangerButton.vue";
 import TagBox from "@/Components/TagBox.vue";
 import Tooltip from "@/Components/Tooltip.vue";
+import TaggedIcon from "@/Components/TaggedIcon.vue";
 
 const props = defineProps({
     photoId: Number,
@@ -148,6 +149,8 @@ const onKeyDown = (event) => {
                                 class="w-full sm:max-w-2xl sm:overflow-hidden rounded-lg shadow-lg"
                             >
 
+                            <TaggedIcon v-if="photoItems.length" class="absolute top-4 left-4" />
+
                             <IconDangerButton
                                 class="absolute top-4 right-4"
                                 @click="deletePhoto"