From 4e322d0778ddce02749de8973a4fe0b3b4dfec77 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 31 May 2018 11:18:21 +0100
Subject: [PATCH] Fixed alignment issues with IDE sidebar Fixed sidebar
 tooltips not hiding after clicking

---
 .../javascripts/ide/components/activity_bar.vue | 14 +++++++++++---
 app/assets/stylesheets/pages/repo.scss          | 17 +++++++++++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 05dbc1410de..6efcad6adea 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -1,4 +1,5 @@
 <script>
+import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
@@ -20,6 +21,13 @@ export default {
   },
   methods: {
     ...mapActions(['updateActivityBarView']),
+    changedActivityView(e, view) {
+      e.currentTarget.blur();
+
+      this.updateActivityBarView(view);
+
+      $(e.currentTarget).tooltip('hide');
+    },
   },
   activityBarViews,
 };
@@ -54,7 +62,7 @@ export default {
           :class="{
             active: currentActivityView === $options.activityBarViews.edit
           }"
-          @click.prevent="updateActivityBarView($options.activityBarViews.edit)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
           :title="s__('IDE|Edit')"
           :aria-label="s__('IDE|Edit')"
         >
@@ -73,7 +81,7 @@ export default {
           :class="{
             active: currentActivityView === $options.activityBarViews.review
           }"
-          @click.prevent="updateActivityBarView($options.activityBarViews.review)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
           :title="s__('IDE|Review')"
           :aria-label="s__('IDE|Review')"
         >
@@ -92,7 +100,7 @@ export default {
           :class="{
             active: currentActivityView === $options.activityBarViews.commit
           }"
-          @click.prevent="updateActivityBarView($options.activityBarViews.commit)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
           :title="s__('IDE|Commit')"
           :aria-label="s__('IDE|Commit')"
         >
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 6bbcb15329c..55e8dbfa59f 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -458,6 +458,10 @@
     width: auto;
     margin-right: 0;
 
+    a {
+      height: 60px;
+    }
+
     a:hover,
     a:focus {
       text-decoration: none;
@@ -718,9 +722,17 @@
 }
 
 .ide-new-btn {
+  .btn {
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+
+  .dropdown {
+    display: flex;
+  }
+
   .dropdown-toggle svg {
-    margin-top: -2px;
-    margin-bottom: 2px;
+    top: 0;
   }
 
   .dropdown-menu {
@@ -877,6 +889,7 @@
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   outline: 0;
+  cursor: pointer;
 
   svg {
     margin: 0 auto;