Merge branch 'ide-alignment-fixes' into 'master'

Fixed alignment issues with IDE sidebar

Closes #47244

See merge request gitlab-org/gitlab-ce!19272

2 files changed, 27 insertions, 6 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..2b3cc33c8ae 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -183,7 +183,7 @@
 
   svg {
     position: relative;
-    top: -1px;
+    top: -2px;
   }
 
   .ide-file-changed-icon {
@@ -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;