Add shortcuts to tagging page and improved usability of tagging inputs

GeniJaho · Jan 17, 2024 · 46332b8 · 46332b8
1 parent 21ef798
commit 46332b8
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/resources/js/Components/TagBox.vue b/resources/js/Components/TagBox.vue
@@ -12,6 +12,7 @@ import {
 const props = defineProps({
     items: Array,
     modelValue: Object,
+    autofocus: Boolean,
 });
 
 defineEmits(['update:modelValue']);
@@ -44,8 +45,10 @@ let filteredItems = computed(() => {
                 >
                     <ComboboxInput
                         class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                        :displayValue="(item) => item.name"
+                        :displayValue="(item) => item?.name"
                         @change="query = $event.target.value"
+                        @focus="$event.target.select()"
+                        :autofocus="autofocus"
                     />
                     <ComboboxButton
                         class="absolute inset-y-0 right-0 flex items-center pr-2"

diff --git a/resources/js/Components/Tooltip.vue b/resources/js/Components/Tooltip.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="tooltip absolute -top-2 left-1/2 transform -translate-x-1/2 -translate-y-full hidden group-hover:block max-w-sm">
+        <div class="tooltip-text rounded-lg shadow-lg overflow-hidden bg-black/75 px-2 py-1.5">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.tooltip .tooltip-text::after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgba(0,0,0,0.75) transparent transparent transparent;
+}
+</style>
diff --git a/resources/js/Pages/Photo/Show.vue b/resources/js/Pages/Photo/Show.vue
@@ -1,13 +1,14 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
-import {onMounted, ref} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
 import PhotoItem from "@/Pages/Photo/PhotoItem.vue";
 import {Link} from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import debounce from 'lodash.debounce'
 import { router } from '@inertiajs/vue3'
 import IconDangerButton from "@/Components/IconDangerButton.vue";
 import TagBox from "@/Components/TagBox.vue";
+import Tooltip from "@/Components/Tooltip.vue";
 
 const props = defineProps({
     photoId: Number,
@@ -19,10 +20,16 @@ const props = defineProps({
 
 const photo = ref(null);
 const photoItems = ref([]);
-const selectedItem = ref(props.items[0]);
+const selectedItem = ref(null);
 
 onMounted(() => {
     getPhoto();
+
+    window.addEventListener('keydown', onKeyDown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', onKeyDown);
 });
 
 const getPhoto = () => {
@@ -100,6 +107,17 @@ const updateItemQuantity = debounce((photoItemId, quantity) => {
         getPhoto();
     });
 }, 1000, {leading: true, trailing: true});
+
+const onKeyDown = (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.code === "ArrowLeft" && props.previousPhotoUrl) {
+        event.preventDefault();
+        router.visit(props.previousPhotoUrl);
+    } else if ((event.ctrlKey || event.metaKey) && event.code === "ArrowRight" && props.nextPhotoUrl) {
+        event.preventDefault();
+        router.visit(props.nextPhotoUrl);
+    }
+};
+
 </script>
 
 <template>
@@ -130,17 +148,28 @@ const updateItemQuantity = debounce((photoItemId, quantity) => {
                         </div>
                         <div v-if="previousPhotoUrl || nextPhotoUrl" class="flex justify-between mt-4">
                             <Link v-if="previousPhotoUrl" :href="previousPhotoUrl">
-                                <PrimaryButton>Previous</PrimaryButton>
+                                <PrimaryButton class="group relative">
+                                    <Tooltip>
+                                        <span class="whitespace-nowrap">Ctrl (⌘) + &larr;</span>
+                                    </Tooltip>
+                                    Previous
+                                </PrimaryButton>
                             </Link>
                             <Link v-if="nextPhotoUrl" :href="nextPhotoUrl" class="ml-auto">
-                                <PrimaryButton>Next</PrimaryButton>
+                                <PrimaryButton class="group relative">
+                                    <Tooltip>
+                                        <span class="whitespace-nowrap">Ctrl (⌘) + &rarr;</span>
+                                    </Tooltip>
+                                    Next
+                                </PrimaryButton>
                             </Link>
                         </div>
                     </div>
 
                     <div class="w-full md:w-1/2 xl:w-2/3 px-4">
                         <div class="flex flex-row mt-6 md:mt-0">
                             <TagBox
+                                :autofocus="true"
                                 class="w-full sm:w-96"
                                 :items="items"
                                 v-model="selectedItem"