UX: Add Ctrl-F and Ctrl-R keyboard shortcuts for search and reload #1131

lastzero · lastzero · commit 40b4ab8020e1 · 2025-02-11T14:35:18.000+01:00
Signed-off-by: Michael Mayer &lt;michael@photoprism.app&gt;
diff --git a/frontend/src/common/view.js b/frontend/src/common/view.js
@@ -337,11 +337,11 @@ export class View {
 
   // Returns true if the specified view component is currently inactive, e.g. hidden in the background.
   isHidden(c) {
-    return !this.isVisible(c);
+    return !this.hasFocus(c);
   }
 
   // Returns true if the specified view component is currently active, e.g. visible in the foreground.
-  isVisible(c) {
+  hasFocus(c) {
     if (!c || this.isApp()) {
       return true;
     }
diff --git a/frontend/src/component/label/edit/dialog.vue b/frontend/src/component/label/edit/dialog.vue
@@ -12,6 +12,7 @@
       validate-on="invalid-input"
       class="form-label-edit"
       accept-charset="UTF-8"
+      tabindex="1"
       @submit.prevent="confirm"
     >
       <v-card>
diff --git a/frontend/src/component/people/edit/dialog.vue b/frontend/src/component/people/edit/dialog.vue
@@ -12,6 +12,7 @@
       validate-on="invalid-input"
       class="form-person-edit"
       accept-charset="UTF-8"
+      tabindex="1"
       @submit.prevent="confirm"
     >
       <v-card>
diff --git a/frontend/src/component/photo/album/dialog.vue b/frontend/src/component/photo/album/dialog.vue
@@ -6,7 +6,7 @@
     class="p-dialog p-photo-album-dialog"
     @keydown.esc="close"
   >
-    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" @submit.prevent="confirm">
+    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" tabindex="1" @submit.prevent="confirm">
       <v-card>
         <v-card-title class="d-flex justify-start align-center ga-3">
           <v-icon icon="mdi-bookmark" size="28" color="primary"></v-icon>
diff --git a/frontend/src/component/photo/edit/details.vue b/frontend/src/component/photo/edit/details.vue
@@ -5,6 +5,7 @@
       validate-on="invalid-input"
       class="p-form p-form-photo-details-meta"
       accept-charset="UTF-8"
+      tabindex="1"
       @submit.prevent="save"
     >
       <div class="form-body">
diff --git a/frontend/src/component/photo/edit/files.vue b/frontend/src/component/photo/edit/files.vue
@@ -4,8 +4,9 @@
       <v-expansion-panel
         v-for="file in view.model.fileModels().filter((f) => !f.Missing)"
         :key="file.UID"
-        class="pa-0 elevation-0"
+        tabindex="1"
         style="margin-top: 1px"
+        class="pa-0 elevation-0"
       >
         <v-expansion-panel-title>
           <div class="text-caption font-weight-bold filename">
diff --git a/frontend/src/component/photo/edit/info.vue b/frontend/src/component/photo/edit/info.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-tab p-tab-photo-advanced">
-    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" @submit.prevent>
+    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" tabindex="1" @submit.prevent>
       <div class="v-table__overflow">
         <v-table tile hover density="compact" class="bg-table">
           <tbody>
diff --git a/frontend/src/component/photo/edit/labels.vue b/frontend/src/component/photo/edit/labels.vue
@@ -5,6 +5,7 @@
       class="p-form p-form--table p-form-photo-labels"
       validate-on="invalid-input"
       accept-charset="UTF-8"
+      tabindex="1"
       @submit.prevent
     >
       <div class="form-body">
@@ -141,6 +142,7 @@
                             :rules="[nameRule]"
                             color="surface-variant"
                             autocomplete="off"
+                            autofocus
                             single-line
                             flat
                             variant="plain"
diff --git a/frontend/src/component/photo/edit/people.vue b/frontend/src/component/photo/edit/people.vue
@@ -18,7 +18,7 @@
       </v-alert>
       <div v-else class="v-row search-results face-results cards-view d-flex">
         <div v-for="m in markers" :key="m.UID" class="v-col-12 v-col-sm-6 v-col-md-4 v-col-lg-3 d-flex">
-          <v-card :data-id="m.UID" :class="m.classes()" class="result not-selectable flex-grow-1">
+          <v-card :data-id="m.UID" :class="m.classes()" class="result not-selectable flex-grow-1" tabindex="1">
             <v-img :src="m.thumbnailUrl('tile_320')" aspect-ratio="1" class="card">
               <v-btn
                 v-if="!m.SubjUID && !m.Invalid"
diff --git a/frontend/src/component/photo/upload/dialog.vue b/frontend/src/component/photo/upload/dialog.vue
@@ -8,7 +8,7 @@
     class="p-photo-upload-dialog v-dialog--upload"
     @keydown.esc="close"
   >
-    <v-form ref="form" class="p-photo-upload" validate-on="invalid-input" @submit.prevent="submit">
+    <v-form ref="form" class="p-photo-upload" validate-on="invalid-input" tabindex="1" @submit.prevent="submit">
       <input ref="upload" type="file" multiple class="d-none input-upload" @change.stop="onUpload()" />
       <v-card :tile="$vuetify.display.mdAndDown">
         <v-toolbar
diff --git a/frontend/src/component/service/add.vue b/frontend/src/component/service/add.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog :model-value="visible" persistent max-width="500" class="p-dialog p-service-add" @keydown.esc="close">
-    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" @submit.prevent>
+    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" tabindex="1" @submit.prevent>
       <v-card>
         <v-card-title class="d-flex justify-start align-center ga-3">
           <v-icon size="28" color="primary">mdi-swap-horizontal</v-icon>
diff --git a/frontend/src/component/service/edit.vue b/frontend/src/component/service/edit.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog :model-value="visible" persistent max-width="500" class="p-dialog p-service-edit" @keydown.esc="close">
-    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" @submit.prevent>
+    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" tabindex="1" @submit.prevent>
       <v-card>
         <v-card-title v-if="scope === 'sharing'" class="d-flex justify-space-between align-center ga-3">
           <h6 class="text-h6">
diff --git a/frontend/src/component/service/upload.vue b/frontend/src/component/service/upload.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog :model-value="visible" persistent max-width="400" class="p-dialog p-service-upload" @keydown.esc="close">
-    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" @submit.prevent>
+    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" tabindex="1" @submit.prevent>
       <v-card>
         <v-card-title class="d-flex justify-start align-center ga-3">
           <v-icon size="28" color="primary">mdi-cloud</v-icon>
diff --git a/frontend/src/component/settings/apps.vue b/frontend/src/component/settings/apps.vue
@@ -6,7 +6,14 @@
     class="p-dialog modal-dialog p-settings-apps"
     @keydown.esc="close"
   >
-    <v-form ref="form" validate-on="invalid-input" class="form-password" accept-charset="UTF-8" @submit.prevent>
+    <v-form
+      ref="form"
+      validate-on="invalid-input"
+      class="form-password"
+      accept-charset="UTF-8"
+      tabindex="1"
+      @submit.prevent
+    >
       <v-card>
         <v-card-title class="d-flex justify-start align-center ga-3">
           <v-icon v-if="action === 'add'" size="28" color="primary">mdi-plus</v-icon>
diff --git a/frontend/src/component/settings/passcode.vue b/frontend/src/component/settings/passcode.vue
@@ -6,7 +6,14 @@
     class="p-dialog modal-dialog p-settings-passcode"
     @keydown.esc="close"
   >
-    <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" class="form-password" @submit.prevent>
+    <v-form
+      ref="form"
+      validate-on="invalid-input"
+      accept-charset="UTF-8"
+      class="form-password"
+      tabindex="1"
+      @submit.prevent
+    >
       <v-card>
         <v-card-title class="d-flex justify-start align-center ga-3">
           <v-icon v-if="page === 'setup'" size="28" color="primary">mdi-shield-alert</v-icon>
diff --git a/frontend/src/component/settings/password.vue b/frontend/src/component/settings/password.vue
@@ -6,7 +6,7 @@
     class="p-dialog modal-dialog p-settings-password"
     @keydown.esc="close"
   >
-    <v-form ref="form" class="form-password" accept-charset="UTF-8" @submit.prevent>
+    <v-form ref="form" class="form-password" accept-charset="UTF-8" tabindex="1" @submit.prevent>
       <v-card>
         <v-card-title class="d-flex justify-start align-center ga-3">
           <v-icon size="28" color="primary">mdi-lock</v-icon>
diff --git a/frontend/src/component/share/dialog.vue b/frontend/src/component/share/dialog.vue
@@ -13,7 +13,14 @@
         ></v-btn>
       </v-card-title>
       <v-card-text>
-        <v-expansion-panels v-model="expanded" variant="accordion" density="compact" rounded="6" class="elevation-0">
+        <v-expansion-panels
+          v-model="expanded"
+          variant="accordion"
+          density="compact"
+          rounded="6"
+          tabindex="1"
+          class="elevation-0"
+        >
           <v-expansion-panel v-for="(link, index) in links" :key="link.UID" color="secondary" class="pa-0 elevation-0">
             <v-expansion-panel-title class="d-flex justify-start align-center ga-3 text-body-2 px-4">
               <v-icon icon="mdi-link"></v-icon>
diff --git a/frontend/src/page/album/photos.vue b/frontend/src/page/album/photos.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-page p-page-album-photos" tabindex="1">
+  <div :class="$config.aclClasses('photos')" class="p-page p-page-album-photos" tabindex="1" @keydown.ctrl="onCtrl">
     <p-album-toolbar
       ref="toolbar"
       :filter="filter"
@@ -212,6 +212,18 @@ export default {
     this.$view.leave(this);
   },
   methods: {
+    onCtrl(ev) {
+      if (!ev || !ev.code || !ev.ctrlKey || !this.$view.hasFocus(this)) {
+        return;
+      }
+
+      switch (ev.code) {
+        case "KeyR":
+          ev.preventDefault();
+          this.refresh();
+          break;
+      }
+    },
     hideExpansionPanel() {
       return this.$refs?.toolbar?.hideExpansionPanel();
     },
diff --git a/frontend/src/page/albums.vue b/frontend/src/page/albums.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :class="$config.aclClasses('albums')" class="p-page p-page-albums not-selectable" tabindex="1">
+  <div
+    :class="$config.aclClasses('albums')"
+    class="p-page p-page-albums not-selectable"
+    tabindex="1"
+    @keydown.ctrl="onCtrl"
+  >
     <v-form ref="form" class="p-albums-search" validate-on="invalid-input" @submit.prevent="updateQuery()">
       <v-toolbar
         flat
@@ -509,6 +514,25 @@ export default {
     this.$view.leave(this);
   },
   methods: {
+    onCtrl(ev) {
+      if (!ev || !ev.code || !ev.ctrlKey || !this.$view.hasFocus(this)) {
+        return;
+      }
+
+      switch (ev.code) {
+        case "KeyR":
+          ev.preventDefault();
+          this.refresh();
+          break;
+        case "KeyF":
+          const el = this.$el.querySelector(".input-search .v-field__field input");
+          if (el) {
+            ev.preventDefault();
+            el.focus();
+          }
+          break;
+      }
+    },
     toggleExpansionPanel() {
       this.expanded = !this.expanded;
     },
diff --git a/frontend/src/page/labels.vue b/frontend/src/page/labels.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :class="$config.aclClasses('labels')" class="p-page p-page-labels not-selectable" tabindex="1">
+  <div
+    :class="$config.aclClasses('labels')"
+    class="p-page p-page-labels not-selectable"
+    tabindex="1"
+    @keydown.ctrl="onCtrl"
+  >
     <v-form ref="form" class="p-labels-search" validate-on="invalid-input" @submit.stop.prevent="updateQuery()">
       <v-toolbar
         flat
@@ -247,6 +252,25 @@ export default {
     this.$view.leave(this);
   },
   methods: {
+    onCtrl(ev) {
+      if (!ev || !ev.code || !ev.ctrlKey || !this.$view.hasFocus(this)) {
+        return;
+      }
+
+      switch (ev.code) {
+        case "KeyR":
+          ev.preventDefault();
+          this.refresh();
+          break;
+        case "KeyF":
+          const el = this.$el.querySelector(".input-search .v-field__field input");
+          if (el) {
+            ev.preventDefault();
+            el.focus();
+          }
+          break;
+      }
+    },
     edit(label) {
       if (!label) {
         return;
diff --git a/frontend/src/page/people.vue b/frontend/src/page/people.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-page p-page-people" :class="$config.aclClasses('people')" tabindex="1">
+  <div class="p-page p-page-people" :class="$config.aclClasses('people')" tabindex="1" @keydown.ctrl="onCtrl">
     <v-tabs
       v-model="active"
       elevation="0"
@@ -111,6 +111,21 @@ export default {
     this.$view.leave(this);
   },
   methods: {
+    onCtrl(ev) {
+      if (!ev || !ev.code || !ev.ctrlKey || !this.$view.hasFocus(this)) {
+        return;
+      }
+
+      switch (ev.code) {
+        case "KeyF":
+          const el = this.$el.querySelector(".input-search .v-field__field input");
+          if (el) {
+            ev.preventDefault();
+            el.focus();
+          }
+          break;
+      }
+    },
     openTab() {
       const activeTab = this.tabs.findIndex((t) => t.name === this.$route.name);
 
diff --git a/frontend/src/page/photos.vue b/frontend/src/page/photos.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :class="$config.aclClasses('photos')" class="p-page p-page-photos not-selectable" tabindex="1">
+  <div
+    :class="$config.aclClasses('photos')"
+    class="p-page p-page-photos not-selectable"
+    tabindex="1"
+    @keydown.ctrl="onCtrl"
+  >
     <p-photo-toolbar
       ref="toolbar"
       :context="context"
@@ -264,6 +269,25 @@ export default {
     this.$view.leave(this);
   },
   methods: {
+    onCtrl(ev) {
+      if (!ev || !ev.code || !ev.ctrlKey || !this.$view.hasFocus(this)) {
+        return;
+      }
+
+      switch (ev.code) {
+        case "KeyR":
+          ev.preventDefault();
+          this.refresh();
+          break;
+        case "KeyF":
+          const el = this.$el.querySelector(".input-search .v-field__field input");
+          if (el) {
+            ev.preventDefault();
+            el.focus();
+          }
+          break;
+      }
+    },
     hideExpansionPanel() {
       return this.$refs?.toolbar?.hideExpansionPanel();
     },

Original file line number	Diff line number	Diff line change
`@@ -337,11 +337,11 @@ export class View {`
`337`	`337`
`338`	`338`	`// Returns true if the specified view component is currently inactive, e.g. hidden in the background.`
`339`	`339`	`isHidden(c) {`
`340`		`- return !this.isVisible(c);`
	`340`	`+ return !this.hasFocus(c);`
`341`	`341`	`}`
`342`	`342`
`343`	`343`	`// Returns true if the specified view component is currently active, e.g. visible in the foreground.`
`344`		`- isVisible(c) {`
	`344`	`+ hasFocus(c) {`
`345`	`345`	`if (!c \|\| this.isApp()) {`
`346`	`346`	`return true;`
`347`	`347`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`12`	`12`	`validate-on="invalid-input"`
`13`	`13`	`class="form-label-edit"`
`14`	`14`	`accept-charset="UTF-8"`
	`15`	`+ tabindex="1"`
`15`	`16`	`@submit.prevent="confirm"`
`16`	`17`	`>`
`17`	`18`	`<v-card>`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`class="p-dialog p-photo-album-dialog"`
`7`	`7`	`@keydown.esc="close"`
`8`	`8`	`>`
`9`		`- <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" @submit.prevent="confirm">`
	`9`	`+ <v-form ref="form" validate-on="invalid-input" accept-charset="UTF-8" tabindex="1" @submit.prevent="confirm">`
`10`	`10`	`<v-card>`
`11`	`11`	`<v-card-title class="d-flex justify-start align-center ga-3">`
`12`	`12`	`<v-icon icon="mdi-bookmark" size="28" color="primary"></v-icon>`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`validate-on="invalid-input"`
`6`	`6`	`class="p-form p-form-photo-details-meta"`
`7`	`7`	`accept-charset="UTF-8"`
	`8`	`+ tabindex="1"`
`8`	`9`	`@submit.prevent="save"`
`9`	`10`	`>`
`10`	`11`	`<div class="form-body">`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`class="p-photo-upload-dialog v-dialog--upload"`
`9`	`9`	`@keydown.esc="close"`
`10`	`10`	`>`
`11`		`- <v-form ref="form" class="p-photo-upload" validate-on="invalid-input" @submit.prevent="submit">`
	`11`	`+ <v-form ref="form" class="p-photo-upload" validate-on="invalid-input" tabindex="1" @submit.prevent="submit">`
`12`	`12`	`<input ref="upload" type="file" multiple class="d-none input-upload" @change.stop="onUpload()" />`
`13`	`13`	`<v-card :tile="$vuetify.display.mdAndDown">`
`14`	`14`	`<v-toolbar`