fixed spacing

removed need for custom dropdown stuff

5 files changed, 52 insertions, 25 deletions

diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index fdf191b3352..945a7b981f5 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,4 +1,5 @@
 <script>
+import $ from 'jquery';
 import { mapState, mapGetters } from 'vuex';
 import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -70,19 +71,31 @@ export default {
         this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
       });
     },
-    showMergeRequestsDropdown() {
-      if (this.showMergeRequestsDropdown) {
-        document.addEventListener('click', this.hideMergeRequestDropdown);
-      } else {
-        document.removeEventListener('click', this.hideMergeRequestDropdown);
+    loading() {
+      if (!this.loading) {
+        this.$nextTick(() => {
+          this.addDropdownListeners();
+        });
       }
     },
   },
+  mounted() {
+    this.addDropdownListeners();
+  },
+  beforeDestroy() {
+    $(this.$refs.mergeRequestDropdown)
+      .off('show.bs.dropdown')
+      .off('hide.bs.dropdown');
+  },
   methods: {
-    hideMergeRequestDropdown(e) {
-      if (this.$refs.mergeRequestDropdown.contains(e.target)) return;
-
-      this.showMergeRequestsDropdown = false;
+    addDropdownListeners() {
+      $(this.$refs.mergeRequestDropdown)
+        .on('show.bs.dropdown', () => {
+          this.toggleMergeRequestDropdown();
+        })
+        .on('hide.bs.dropdown', () => {
+          this.toggleMergeRequestDropdown();
+        });
     },
     toggleMergeRequestDropdown() {
       this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown;
@@ -113,15 +126,12 @@ export default {
       <template v-else>
         <div
           class="context-header ide-context-header dropdown"
-          :class="{
-            show: showMergeRequestsDropdown
-          }"
           ref="mergeRequestDropdown"
         >
           <a
             href="#"
             role="button"
-            @click.prevent="toggleMergeRequestDropdown"
+            data-toggle="dropdown"
           >
             <div
               v-if="currentProject.avatar_url"
@@ -178,7 +188,7 @@ export default {
             />
           </a>
           <merge-request-dropdown
-            v-if="showMergeRequestsDropdown"
+            :show="showMergeRequestsDropdown"
             @hide="toggleMergeRequestDropdown"
           />
         </div>
diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
index 5e29712a8df..1b29b71062a 100644
--- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
@@ -10,23 +10,27 @@ export default {
     Tab,
     List,
   },
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     ...mapGetters('mergeRequests', ['assignedData', 'createdData']),
     createdMergeRequestLength() {
       return this.createdData.mergeRequests.length;
     },
   },
-  methods: {
-    hideDropdown() {
-      this.$emit('hide');
-    },
-  },
 };
 </script>
 
 <template>
   <div class="dropdown-menu ide-merge-requests-dropdown p-0">
-    <tabs stop-propagation>
+    <tabs
+      v-if="show"
+      stop-propagation
+    >
       <tab active>
         <template slot="title">
           {{ __('Created by me') }}
@@ -37,7 +41,6 @@ export default {
         <list
           type="created"
           :empty-text="__('You have not created any merge requests')"
-          @hide="hideDropdown"
         />
       </tab>
       <tab>
@@ -50,7 +53,6 @@ export default {
         <list
           type="assigned"
           :empty-text="__('You do not have any assigned merge requests')"
-          @hide="hideDropdown"
         />
       </tab>
     </tabs>
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
index 89f71fcb325..907c274bf4d 100644
--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -55,7 +55,7 @@ export default {
       <strong>
         {{ item.title }}
       </strong>
-      <span class="d-block mt-1">
+      <span class="ide-merge-request-project-path d-block mt-1">
         {{ pathWithID }}
       </span>
     </span>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 77511de97af..47b7d01791d 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -58,7 +58,6 @@ export default {
       this.fetchMergeRequests({ type: this.type, search: this.search });
     },
     viewMergeRequest(item) {
-      this.$emit('hide');
       this.openMergeRequest({
         projectPath: item.projectPathWithNamespace,
         id: item.iid,
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index b07e12c79e0..741b4179e80 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1137,7 +1137,7 @@
   }
 
   .ide-merge-requests-dropdown.dropdown-menu {
-    width: 350px;
+    width: 385px;
     max-height: initial;
   }
 }
@@ -1298,6 +1298,16 @@
       }
     }
   }
+
+  .dropdown-input {
+    padding-left: $gl-padding;
+    padding-right: $gl-padding;
+  }
+
+  .btn-link {
+    padding-top: $gl-padding;
+    padding-bottom: $gl-padding;
+  }
 }
 
 .ide-merge-request-current-icon {
@@ -1312,3 +1322,9 @@
   min-height: 230px;
   max-height: 470px;
 }
+
+.ide-merge-request-project-path {
+  font-size: 12px;
+  line-height: 16px;
+  color: $gl-text-color-secondary;
+}