Color icons in search, add "package:" search prefix

dmstern · Nov 26, 2018 · 1935ba4 · 1935ba4
1 parent 028d684
commit 1935ba4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git 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
@@ -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() : '',
     ]