Creation modal quality of life changes

frontend/components/Base/Modal.vue

@@ -41,6 +41,10 @@
       type: Boolean,
       default: true,
     },
+    clickOutsideToClose: {
+      type: Boolean,
+      default: false,
+    }
   });
 
   const modalBox = ref();
@@ -51,9 +55,11 @@
     }
   }
 
-  onClickOutside(modalBox, () => {
-    close();
-  });
+  if (props.clickOutsideToClose) {
+    onClickOutside(modalBox, () => {
+      close();
+    });
+  }
 
   function close() {
     if (props.readonly) {

frontend/components/Form/Multiselect.vue

@@ -4,7 +4,7 @@
       <span class="label-text">{{ label }}</span>
     </label>
     <div class="dropdown dropdown-top sm:dropdown-end">
-      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-gray-400 p-4">
+      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content border-opacity-20 p-4">
         <span v-for="itm in value" :key="itm.id" class="badge">
           {{ itm.name }}
         </span>
@@ -20,7 +20,7 @@
       <div
         tabindex="0"
         style="display: inline"
-        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-gray-400 bg-base-100 shadow"
+        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-base-content border-opacity-20 bg-base-100 shadow"
       >
         <div class="m-2">
           <input v-model="search" placeholder="Search…" class="input input-bordered input-sm w-full" />

frontend/components/Item/CreateModal.vue

@@ -3,6 +3,7 @@
     <template #title> {{ $t("components.item.create_modal.title") }} </template>
     <form @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
+      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
       <FormTextField
         ref="nameInput"
         v-model="form.name"
@@ -17,7 +18,6 @@
         :label="$t('components.item.create_modal.item_description')"
         :max-length="1000"
       />
-      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
 
       <div class="modal-action mb-6">
         <div>
@@ -141,20 +141,24 @@
     }
   }
 
-  whenever(
+  watch(
     () => modal.value,
-    () => {
-      focused.value = true;
-
-      if (locationId.value) {
-        const found = locations.value.find(l => l.id === locationId.value);
-        if (found) {
-          form.location = found;
+    (open) => {
+      if (open) {
+        useTimeoutFn(() => { focused.value = true }, 50);
+
+        if (locationId.value) {
+          const found = locations.value.find(l => l.id === locationId.value);
+          if (found) {
+            form.location = found;
+          }
         }
-      }
-
-      if (labelId.value) {
-        form.labels = labels.value.filter(l => l.id === labelId.value);
+
+        if (labelId.value) {
+          form.labels = labels.value.filter(l => l.id === labelId.value);
+        }
+      } else {
+        focused.value = false;
       }
     }
   );

frontend/components/Label/CreateModal.vue

@@ -64,10 +64,13 @@
     loading.value = false;
   }
 
-  whenever(
+  watch(
     () => modal.value,
-    () => {
-      focused.value = true;
+    (open) => {
+      if (open)
+        useTimeoutFn(() => { focused.value = true}, 50);
+      else
+        focused.value = false;
     }
   );
 

frontend/components/Location/CreateModal.vue

@@ -2,6 +2,7 @@
   <BaseModal v-model="modal">
     <template #title>{{ $t("components.location.create_modal.title") }}</template>
     <form @submit.prevent="create()">
+      <LocationSelector v-model="form.parent" />
       <FormTextField
         ref="locationNameRef"
         v-model="form.name"
@@ -17,7 +18,6 @@
         :label="$t('components.location.create_modal.location_description')"
         :max-length="1000"
       />
-      <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">
           <BaseButton class="rounded-r-none" type="submit" :loading="loading">{{ $t("global.create") }}</BaseButton>
@@ -59,10 +59,21 @@
     parent: null as LocationSummary | null,
   });
 
-  whenever(
+  watch(
     () => modal.value,
-    () => {
-      focused.value = true;
+    (open) => {
+      if (open) {
+        useTimeoutFn(() => { focused.value = true}, 50);
+
+        if (locationId.value) {
+          const found = locations.value.find(l => l.id === locationId.value);
+          if (found) {
+            form.parent = found;
+          }
+        }
+      } else {
+        focused.value = false;
+      }
     }
   );
 
@@ -77,8 +88,20 @@
   const api = useUserApi();
   const toast = useNotifier();
 
+  const locationsStore = useLocationStore();
+  const locations = computed(() => locationsStore.allLocations);
+
+  const route = useRoute();
+
   const { shift } = useMagicKeys();
 
+  const locationId = computed(() => {
+    if (route.fullPath.includes("/location/")) {
+      return route.params.id;
+    }
+    return null;
+  });
+
   async function create(close = true) {
     if (loading.value) {
       toast.error("Already creating a location");

frontend/components/global/QuickMenu/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseModal v-model="modal" :show-close-button="false">
+  <BaseModal v-model="modal" :show-close-button="false" :click-outside-to-close="true">
     <div class="relative">
       <span class="text-neutral-400">{{ $t("components.quick_menu.shortcut_hint") }}</span>
       <QuickMenuInput

frontend/layouts/default.vue

@@ -68,7 +68,7 @@
                       <button class="group" @click="btn.action">
                         {{ btn.name.value }}
 
-                        <kbd v-if="btn.shortcut" class="ml-auto hidden text-neutral-400 group-hover:inline">{{
+                        <kbd v-if="btn.shortcut" class="kbd kbd-sm ml-auto hidden text-neutral-400 group-hover:inline">{{
                           btn.shortcut
                         }}</kbd>
                       </button>
@@ -143,9 +143,14 @@
 
   const displayOutdatedWarning = computed(() => !isDev && !hasHiddenLatest.value && isOutdated.value);
 
+  const activeElement = useActiveElement();
   const keys = useMagicKeys({
     aliasMap: {
       "⌃": "control_",
+      "Shift+": "ShiftLeft_",
+      "!": "ShiftLeft_digit1",
+      "@": "ShiftLeft_digit2",
+      "#": "ShiftLeft_digit3",
     },
   });
 
@@ -171,33 +176,36 @@
     {
       id: 0,
       name: computed(() => t("menu.create_item")),
-      shortcut: "⌃1",
+      shortcut: "!",
       action: () => {
         modals.item = true;
       },
     },
     {
       id: 1,
       name: computed(() => t("menu.create_location")),
-      shortcut: "⌃2",
+      shortcut: "@",
       action: () => {
         modals.location = true;
       },
     },
     {
       id: 2,
       name: computed(() => t("menu.create_label")),
-      shortcut: "⌃3",
+      shortcut: "#",
       action: () => {
         modals.label = true;
       },
     },
   ];
 
   dropdown.forEach(option => {
-    if (option.shortcut) {
-      whenever(keys[option.shortcut], () => {
-        option.action();
+    if (option?.shortcut) {
+      const shortcutKeycode = option.shortcut.replace(/([0-9])/, "digit$&");
+      whenever(keys[shortcutKeycode], () => {
+        if (activeElement.value?.tagName !== "INPUT") {
+          option.action();
+        }
       });
     }
   });