Add popover menu for crafter // trigger search filter on crafter click

dmstern · Nov 26, 2018 · ec06143 · ec06143
1 parent bd1c07c
commit ec06143
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 11 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -40,12 +40,13 @@
       <v-btn icon @click.stop="menuVisible = !menuVisible">
         <v-icon>{{$vuetify.icons.menu}}</v-icon>
       </v-btn>
-      <router-link to="/" class="home-button">
-        <v-toolbar-title>
-          <img src="@/../art/logo.svg" alt="npmFrog" class="v-btn--icon">
-          <span class="label hidden-sm-and-down">{{title}}</span>
-        </v-toolbar-title>    
-      </router-link>
+      <v-toolbar-title
+        @click="goHome"
+        class="home-button"
+      >
+        <img src="@/../art/logo.svg" alt="npmFrog" class="v-btn--icon">
+        <span class="label hidden-sm-and-down">{{title}}</span>
+      </v-toolbar-title>    
       <v-autocomplete
         ref="searchbar"
         placeholder="Search package..."
@@ -226,6 +227,9 @@ export default class App extends Vue {
     });
 
     EventBus.$on(Events.TRIGGER_FILTER_SEARCH, (args: { filters: Searchable[], query: string }) => {
+      while(this.activeFilters.length > 0) {
+        this.activeFilters.pop();
+      }
       this.activeFilters.push(...args.filters);
     });
 
@@ -235,6 +239,13 @@ export default class App extends Vue {
     return this.$refs.searchbar.$el.querySelector('input');
   }
 
+  private goHome() {
+    router.push('/');
+    this.$nextTick(() => {
+      EventBus.$emit(Events.TRIGGER_FILTER_SEARCH, { filters: [] });
+    });
+  }
+
   private loadPackages(): void {
     DataStore.Instance.getPackages().then((packages: Package[]) => {
       this.searchItems =
@@ -455,6 +466,8 @@ code.hljs {
 
 
 .home-button {
+  cursor: pointer;
+
   img {
     background-color: $color-white;
   }

diff --git a/src/components/CrafterAvatar.vue b/src/components/CrafterAvatar.vue
@@ -2,7 +2,6 @@
 
 <div class="CrafterAvatar">
   <v-avatar
-    :title="crafter.name"
     :color="`${crafter.color} darken-2`"
     size="32"
     :class="`grey--text text--${

diff --git a/src/components/PackageList.vue b/src/components/PackageList.vue
@@ -81,7 +81,10 @@ export default class Packages extends Vue {
 
     this.loadConfig();
 
-    EventBus.$on([Events.FILTER_SEARCH, Events.TRIGGER_FILTER_SEARCH], async ( args: { filters: Searchable[], query: string} ) => {
+    EventBus.$on([
+      Events.FILTER_SEARCH,
+      Events.TRIGGER_FILTER_SEARCH,
+    ], async ( args: { filters: Searchable[], query: string} ) => {
       this.packages.loading = true;
       this.packages.all = await DataStore.Instance.getPackages();
       this.packages.loading = false;

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -32,6 +32,7 @@ const icons = {
   website: 'fas fa-globe',
   externalLink: 'fas fa-external-link-alt',
   terminal: 'fas fa-terminal',
+  email: 'far fa-envelope',
 };
 
 icons.keywords = icons.tags;

diff --git a/src/views/PackageDetail.vue b/src/views/PackageDetail.vue
@@ -181,9 +181,54 @@
             <timeago :datetime="data.packageDetail.time.modified"></timeago>
           </PackageDetailItem>
           <PackageDetailItem title="Crafted by" v-if="data.currentPackage.author" :icon="$vuetify.icons.author" :bigContent="false">
-            <!-- <a v-if="data.currentPackage.author.email" :href="`mailto:${data.currentPackage.author.email}`">{{data.currentPackage.author.name}}</a>
-            <span v-else>{{data.currentPackage.displayName}}</span> -->
-            <CrafterAvatar v-for="(crafter, index) in data.currentPackage.crafters" :key="index" :crafter="crafter"></CrafterAvatar>
+            <v-menu
+              open-on-hover
+              auto
+              v-for="(crafter, index) in data.currentPackage.crafters"
+              :key="index"
+              top
+              offset-y
+            >
+              <CrafterAvatar
+                :crafter="crafter"
+                slot="activator"
+              ></CrafterAvatar>
+              <v-card>
+                <v-list>
+                  <v-list-tile avatar>
+                    <v-list-tile-avatar>
+                       <CrafterAvatar :crafter="crafter"></CrafterAvatar>
+                    </v-list-tile-avatar>
+
+                    <v-list-tile-content>
+                      <v-list-tile-title>{{crafter.name}}</v-list-tile-title>
+                      <v-list-tile-sub-title>{{crafter.url}}</v-list-tile-sub-title>
+                    </v-list-tile-content>
+
+                  </v-list-tile>
+                </v-list>
+
+                <v-divider></v-divider>
+
+                <v-list>
+                  <v-list-tile @click="onKeywordClick(crafter)">
+                    <v-list-tile-action>
+                      <v-icon>{{$vuetify.icons.arrowTopLeft}}</v-icon>
+                    </v-list-tile-action>
+                    <v-list-tile-title>Search for packages by this crafter</v-list-tile-title>
+                  </v-list-tile>
+
+                  <a :href="`mailto:${crafter.email}`" target="_blank">
+                    <v-list-tile v-if="crafter.email">
+                      <v-list-tile-action>
+                        <v-icon>{{$vuetify.icons.email}}</v-icon>
+                      </v-list-tile-action>
+                      <v-list-tile-title>mailto:{{crafter.email}}</v-list-tile-title>
+                    </v-list-tile>
+                  </a>
+                </v-list>
+              </v-card>
+            </v-menu>
           </PackageDetailItem>
           <PackageDetailItem title="Keywords" :bigContent="false" v-if="data.currentPackage.tags" :icon="$vuetify.icons.tags">
             <v-chip