UX: Add /all route for finding all matches (no quality filter) #859

frontend/src/component/navigation.vue

@@ -81,7 +81,7 @@
             </v-list-tile-content>
           </v-list-tile>
 
-          <v-list-tile :to="{name: 'photos', query: { q: 'mono:true quality:3 photo:true' }}" :exact="true" @click.stop="">
+          <v-list-tile :to="{name: 'browse', query: { q: 'mono:true quality:3 photo:true' }}" :exact="true" @click.stop="">
             <v-list-tile-content>
               <v-list-tile-title>
                 <translate>Monochrome</translate>
@@ -89,7 +89,7 @@
             </v-list-tile-content>
           </v-list-tile>
 
-          <v-list-tile :to="{name: 'photos', query: { q: 'panorama:true' }}" :exact="true" class="nav-panoramas"
+          <v-list-tile :to="{name: 'browse', query: { q: 'panorama:true' }}" :exact="true" class="nav-panoramas"
                        @click.stop="">
             <v-list-tile-content>
               <v-list-tile-title>

frontend/src/component/photo/cards.vue

@@ -143,7 +143,7 @@
               </div>
             </v-card-title>
 
-            <v-card-actions v-if="photo.Quality < 3 && context === 'review'">
+            <v-card-actions v-if="photo.Quality < 3 && context === 'review'" class="card-details">
               <v-layout row wrap align-center>
                 <v-flex xs12>
                   <div class="text-xs-center">

frontend/src/css/search.css

@@ -305,17 +305,21 @@
     text-align: left;
 }
 
-
 #photoprism .cards-view .v-card .card-details {
     z-index: 1;
     position: relative;
 }
 
 #photoprism .cards-view .v-card.is-selected .card-details,
-#photoprism .cards-view .v-card.is-selected .card-background {
+#photoprism .cards-view .v-card.is-selected .card-details .v-icon {
-    filter: invert(1);
+    color: #fff;
+    background-color: #333;
 }
 
+#photoprism .cards-view .v-card.is-selected,
+#photoprism .cards-view .v-card.is-selected .card-background {
+    background-color: #333 !important;
+}
 
 #photoprism .search-results.list-view .input-select,
 #photoprism .search-results.list-view .input-play {

frontend/src/dialog/photo/labels.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="p-tab p-tab-photo-labels">
     <v-data-table
+        v-model="selected"
         :headers="listColumns"
         :items="model.Labels"
         hide-actions
         class="elevation-0 p-files p-files-list p-results"
         disable-initial-sort
         item-key="ID"
-        v-model="selected"
         :no-data-text="$gettext('No labels found')"
     >
-      <template v-slot:items="props" class="p-file">
+      <template #items="props" class="p-file">
         <td>
           <v-edit-dialog
               :return-value.sync="props.item.Label.Name"
               lazy
-              @save="renameLabel(props.item.Label)"
               class="p-inline-edit"
+              @save="renameLabel(props.item.Label)"
           >
             {{ props.item.Label.Name | capitalize }}
-            <template v-slot:input>
+            <template #input>
               <v-text-field
                   v-model="props.item.Label.Name"
                   :rules="[nameRule]"
@@ -58,7 +58,7 @@
           </v-btn>
         </td>
       </template>
-      <template v-slot:footer v-if="!disabled">
+      <template v-if="!disabled" #footer>
         <td>
           <v-text-field
               v-model="newLabel"
@@ -69,8 +69,8 @@
               single-line
               flat solo hide-details
               autofocus
-              @keyup.enter.native="addLabel"
               class="input-label"
+              @keyup.enter.native="addLabel"
           ></v-text-field>
         </td>
         <td class="text-xs-left">{{ sourceName('manual') }}</td>
@@ -91,7 +91,7 @@
 import Label from "model/label";
 
 export default {
-  name: 'p-tab-photo-labels',
+  name: 'PTabPhotoLabels',
   props: {
     model: Object,
     uid: String,
@@ -130,7 +130,7 @@ export default {
     },
     removeLabel(label) {
       if (!label) {
-        return
+        return;
       }
 
       const name = label.Name;
@@ -141,7 +141,7 @@ export default {
     },
     addLabel() {
       if (!this.newLabel) {
-        return
+        return;
       }
 
       this.model.addLabel(this.newLabel).then((m) => {
@@ -152,21 +152,20 @@ export default {
     },
     activateLabel(label) {
       if (!label) {
-        return
+        return;
       }
 
       this.model.activateLabel(label.ID);
     },
     renameLabel(label) {
       if (!label) {
-        return
+        return;
       }
 
       this.model.renameLabel(label.ID, label.Name);
     },
     searchLabel(label) {
-      this.$router.push({name: 'photos', query: {q: 'label:' + label.Slug}}).catch(err => {
+      this.$router.push({name: 'all', query: {q: 'label:' + label.Slug}}).catch(() => {});
-      });
       this.$emit('close');
     },
   },

frontend/src/pages/albums.vue

@@ -154,7 +154,7 @@
                   <button v-else-if="album.PhotoCount > 0">
                     <translate :translate-params="{n: album.PhotoCount}">Contains %{n} entries.</translate>
                   </button>
-                  <button v-else @click.stop.prevent="$router.push({name: 'photos'})">
+                  <button v-else @click.stop.prevent="$router.push({name: 'browse'})">
                     <translate>Add photos or videos from search results by selecting them.</translate>
                   </button>
                 </div>

frontend/src/pages/discover/colors.vue

@@ -15,7 +15,7 @@
             xs3 d-flex grow
         >
           <v-hover>
-            <v-card :to="{name: 'photos', query: { color: color.name }}" :dark="useDark(color)"
+            <v-card :to="{name: 'browse', query: { color: color.name }}" :dark="useDark(color)"
                     :color="color.example" slot-scope="{ hover }" :flat="!hover"
                     class="clickable py-1">
               <v-card-text class="px-0 py-5 body-2">{{ color.label }}</v-card-text>

frontend/src/pages/labels.vue

@@ -64,7 +64,7 @@
                     :data-uid="label.UID"
                     class="result accent lighten-3"
                     :class="label.classes(selection.includes(label.UID))"
-                    :to="{name: 'browse', query: {q: 'label:' + (label.CustomSlug ? label.CustomSlug : label.Slug)}}"
+                    :to="{name: 'all', query: {q: 'label:' + (label.CustomSlug ? label.CustomSlug : label.Slug)}}"
                     @contextmenu="onContextMenu($event, index)"
             >
               <div class="card-background accent lighten-3"></div>

frontend/src/routes.js

@@ -84,11 +84,24 @@ export default [
     component: Login,
     meta: { auth: false },
   },
+  {
+    name: "browse",
+    path: "/browse",
+    component: Photos,
+    meta: { title: c.name, auth: true },
+  },
+  {
+    name: "all",
+    path: "/all",
+    component: Photos,
+    meta: { title: $gettext("Search"), auth: true },
+    props: { staticFilter: { quality: 0 } },
+  },
   {
     name: "photos",
     path: "/photos",
     component: Photos,
-    meta: { title: c.name, auth: true },
+    meta: { title: $gettext("Photos"), auth: true },
     props: { staticFilter: { photo: "true" } },
   },
   {
@@ -235,13 +248,6 @@ export default [
     component: Labels,
     meta: { title: $gettext("Labels"), auth: true },
   },
-  {
-    name: "browse",
-    path: "/browse",
-    component: Photos,
-    meta: { title: $gettext("Search"), auth: true },
-    props: { staticFilter: { quality: 0 } },
-  },
   {
     name: "people",
     path: "/people",