From 731fb01bf1c6a0cc4290443452fc557dfbae6483 Mon Sep 17 00:00:00 2001
From: Daniel Morgenstern <morgenstern.daniel@gmail.com>
Date: Tue, 11 Sep 2018 09:50:07 +0200
Subject: [PATCH] Color icons in search, add "package:" search prefix

---
 src/App.vue      | 29 +++++++++++++----------------
 types/Package.ts |  3 ++-
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9227804..338a888 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -93,7 +93,7 @@
             >
               <CrafterAvatar v-if="isCrafter(data.item)" :crafter="data.item"></CrafterAvatar>
               <v-avatar v-else>
-                <v-icon>{{$vuetify.icons.tag}}</v-icon>
+                <v-icon color="primary">{{$vuetify.icons.tag}}</v-icon>
               </v-avatar>
               <v-list-tile-sub-title> {{ isCrafter(data.item) ? data.item.name : data.item.value }}</v-list-tile-sub-title>
             </v-chip>
@@ -102,10 +102,13 @@
         <template slot="item" slot-scope="data">
           <template v-if="isPackage(data.item)">
             <v-list-tile-avatar>
-              <v-icon>{{$vuetify.icons.package}}</v-icon>
+              <v-icon color="accent">{{$vuetify.icons.package}}</v-icon>
             </v-list-tile-avatar>
             <v-list-tile-content>
-              <v-list-tile-title><strong v-html="data.item.name"></strong></v-list-tile-title>
+              <v-list-tile-title>
+                <span class="search--key grey--text">package:</span>
+                <strong v-html="data.item.name"></strong>
+              </v-list-tile-title>
               <v-list-tile-sub-title v-html="data.item.description"></v-list-tile-sub-title>
             </v-list-tile-content>
             <v-spacer></v-spacer>
@@ -114,17 +117,19 @@
           <template v-else>
             <v-list-tile-avatar>
               <CrafterAvatar v-if="isCrafter(data.item)" :crafter="data.item"></CrafterAvatar>
-              <v-icon v-else v-text="$vuetify.icons.tag"></v-icon>
+              <v-icon
+                v-else
+                v-text="$vuetify.icons.tag"
+                color="primary"
+              ></v-icon>
             </v-list-tile-avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                <span class="search--key grey--text text--darken-1">
-                  {{
+                <span class="search--key grey--text">{{
                     isCrafter(data.item)
                     ? `@`
                     : `#`
-                  }}
-                </span>
+                  }}</span>
                 <span v-html="isCrafter(data.item) ? data.item.name : data.item.value"></span>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -420,10 +425,6 @@ a {
     transform: none;
   }
 
-  .v-chip &,
-  .v-avatar & {
-    opacity: 0.8;
-  }
 }
 
 code,
@@ -563,10 +564,6 @@ code.hljs {
   }
 }
 
-.search--key {
-  margin-right: -3px;
-}
-
 .v-text-field {
   &__suffix {
     border: 1px solid;
diff --git a/types/Package.ts b/types/Package.ts
index 4711902..33d1c0f 100644
--- a/types/Package.ts
+++ b/types/Package.ts
@@ -124,7 +124,8 @@ export default class Package extends Searchable implements PackageMetaDataDTO {
 
   public getSearchItemText(): string[] {
     return [
-      this.name || '',
+      this.name,
+      `package:${this.name}`,
       this.description || '',
       this.author ? this.author.toString() : '',
     ]