Re-added SearchBar + linting

client/components/projects/ProjectDetail.vue

@@ -83,14 +83,15 @@
       </v-list-item>
     </v-list>
     <v-divider />
-    <main-menu :project="{_id: project._id}" display="list"/>
+    <main-menu :project="{_id: project._id}" display="list" />
   </div>
 </template>
 
 <script>
 import TextRenderingMixin from "/imports/ui/mixins/TextRenderingMixin.js";
 import DatesMixin from "/imports/ui/mixins/DatesMixin.js";
 import MainMenu from "/imports/ui/ui/MainMenu";
+
 export default {
   components: {
     MainMenu

client/components/widgets/search/SearchInput.vue

@@ -1,27 +1,38 @@
 <template>
-  <div v-click-outside="onClickOutside" class="search-input">
-    <v-text-field
-      ref="input"
-      solo-inverted
-      dense
-      color="primary"
-      clearable
-      hide-details
-      prepend-inner-icon="mdi-magnify"
-      :label="$t('Search') + '...'"
-      class="hidden-sm-and-down align-remaining"
-      @focus="onFocus"
-      @input="debouncedFilter"
-      @keyup.esc="showMenu = false"
-      @keyup.enter="showMenu = true"
-    />
+  <v-menu
+    v-if="value"
+    class="search-input-menu"
+    v-model="showMenu"
+    :nudge-bottom="10"
+    offset-y
+    :close-on-content-click="false"
+    @click-outside="onClickOutside"
+  >
+    <template v-slot:activator="{ on }">
+      <div class="search-input radius">
+        <v-text-field
+          ref="input"
+          solo
+          color="#fff"
+          clearable
+          hide-details
+          prepend-inner-icon="mdi-magnify"
+          :label="$t('Search') + '...'"
+          class="hidden-sm-and-down align-remaining"
+          v-on="on"
+          @focus="onFocus"
+          @input="debouncedFilter"
+          @keyup.esc="showMenu = false"
+          @keyup.enter="showMenu = true"
+        />
+      </div>
+    </template>
     <search-results
-      v-if="showMenu"
       :filter="filter"
       :active.sync="showMenu"
       :width="width"
     />
-  </div>
+  </v-menu>
 </template>
 
 <script>
@@ -32,6 +43,12 @@ export default {
   directives: {
     clickOutside: vClickOutside.directive
   },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       debouncedFilter: "",
@@ -75,22 +92,25 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.v-menu__content {
+  border-radius: 10px;
+}
 .search-input {
-  align-items: flex-start;
+  width: 100%;
+  max-width: 35%;
   display: flex;
-  flex: 1 1 auto;
-  font-size: 16px;
   letter-spacing: normal;
-  max-width: 480px;
   text-align: left;
+  &.radius {
+    border-radius: 40px;
+    overflow: hidden;
+    mask-image: -webkit-radial-gradient(white, black);
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+  }
 }
 .search-results {
-  position: absolute;
-  top: 58px;
-  width: 500px;
-  overflow-y: auto;
-  max-height: calc(100vh - 58px);
   box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
 }
 

imports/ui/App.vue

@@ -5,7 +5,7 @@
         <v-navigation-drawer
           v-if="hasLeftDrawer && $vuetify.breakpoint.lgAndUp"
           v-model="leftDrawer"
-          width="360"
+          width="320"
           app
           clipped
         >

imports/ui/dashboard/common/DashboardTaskTabs.vue

@@ -18,29 +18,29 @@
       <v-tab>{{ $t("Late") }}</v-tab>
       <v-tab-item :transition="false" :reverse-transition="false">
         <dashboard-task-list
+          :key="key('recent')"
           :user="user"
           type="recent"
           :organization-id="organizationId"
           :project-id="projectId"
-          :key="key('recent')"
         />
       </v-tab-item>
       <v-tab-item :transition="false" :reverse-transition="false">
         <dashboard-task-list
+          :key="key('assignedToMe')"
           :user="user"
           type="assignedToMe"
           :organization-id="organizationId"
           :project-id="projectId"
-          :key="key('assignedToMe')"
         />
       </v-tab-item>
       <v-tab-item :transition="false" :reverse-transition="false">
         <dashboard-task-list
+          :key="key('late')"
           :user="user"
           type="late"
           empty-illustration="celebration"
           :organization-id="organizationId"
-          :key="key('late')"
         />
       </v-tab-item>
     </v-tabs>
@@ -87,10 +87,8 @@ export default {
     },
     key() {
       return function(type) {
-        if (this.projectId) return type + '-' + this.projectId;
-        if (this.organizationId) return type + '-' + this.organizationId;
-        return type;
-      }
+        return [this.projectId, this.organizationId, type].filter((part) => part).join("-");
+      };
     }
   },
   methods: {

imports/ui/ui/TopBar.vue

@@ -10,14 +10,20 @@
       :project="currentProject"
     />
     <!-- [ProjectMenu|OrganizationMenu] -->
+    <search-input v-model="isSearchEnabled" @blur="isSearchEnabled = false" />
     <main-menu
+      v-show="!isSearchEnabled"
       v-if="$vuetify.breakpoint.lgAndUp && (currentProject || currentOrganization)"
       :project="currentProject"
       :organization="currentOrganization"
       radius
     />
     <!-- SearchBar, Notification and Profile -->
-    <top-bar-additional-menu v-if="$vuetify.breakpoint.mdAndUp" />
+    <top-bar-additional-menu
+      v-if="$vuetify.breakpoint.mdAndUp"
+      :is-search-enabled="isSearchEnabled"
+      @toggle-search="isSearchEnabled = $event"
+    />
   </v-app-bar>
 </template>
 <script>
@@ -38,6 +44,11 @@ export default {
       default: true
     }
   },
+  data() {
+    return {
+      isSearchEnabled: false
+    };
+  },
   computed: {
     ...mapState("project", ["currentProject"]),
     ...mapState("organization", ["currentOrganization"]),
@@ -58,6 +69,11 @@ export default {
         return this.$store.state.showMobileDrawer;
       }
     }
+  },
+  watch: {
+    "$route.fullPath"() {
+      this.isSearchEnabled = false;
+    }
   }
 };
 </script>

imports/ui/ui/TopBarAdditionalMenu.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="additional-menu">
     <v-btn
-      v-show="!showSearchInput"
       class="prevent-search-blur"
       icon
-      @click="showSearchInput = !showSearchInput"
+      @click="$emit('toggle-search', !isSearchEnabled)"
     >
       <v-icon>mdi-magnify</v-icon>
     </v-btn>
-    <search-input v-show="showSearchInput" @blur="showSearchInput = false" />
     <notification-button />
     <v-avatar dark>
       <v-menu offset-y eager>
@@ -29,10 +27,11 @@
 import { mapState, mapGetters } from "vuex";
 
 export default {
-  data() {
-    return {
-      showSearchInput: false
-    };
+  props: {
+    isSearchEnabled: {
+      type: Boolean,
+      default: false
+    }
   },
   computed: {
     ...mapState(["currentUserId"]),