Merge branch 'ide-sidebar-spacing' into 'master'

Fixed inconsistent spacing in web IDE  sidebar

Closes #46162

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

4 files changed, 63 insertions, 45 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 4a645c827ad..81961fe3c57 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -5,7 +5,7 @@ import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CommitMessageField from './message_field.vue';
 import Actions from './actions.vue';
 import SuccessMessage from './success_message.vue';
-import { activityBarViews, MAX_WINDOW_HEIGHT_COMPACT, COMMIT_ITEM_PADDING } from '../../constants';
+import { activityBarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
 
 export default {
   components: {
@@ -70,7 +70,7 @@ export default {
         ? this.$refs.formEl && this.$refs.formEl.offsetHeight
         : this.$refs.compactEl && this.$refs.compactEl.offsetHeight;
 
-      this.componentHeight = elHeight + COMMIT_ITEM_PADDING;
+      this.componentHeight = elHeight;
     },
     enterTransition() {
       this.$nextTick(() => {
@@ -78,7 +78,7 @@ export default {
           ? this.$refs.compactEl && this.$refs.compactEl.offsetHeight
           : this.$refs.formEl && this.$refs.formEl.offsetHeight;
 
-        this.componentHeight = elHeight + COMMIT_ITEM_PADDING;
+        this.componentHeight = elHeight;
       });
     },
     afterEndTransition() {
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 14946f8c9fa..7bc865058c6 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -122,11 +122,11 @@ export default {
     <div
       class="file"
       :class="fileClass"
+      @click="clickFile"
+      role="button"
     >
       <div
         class="file-name"
-        @click="clickFile"
-        role="button"
       >
         <span
           class="ide-file-name str-truncated"
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 48d4cc43198..83fe22f40a4 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -5,8 +5,6 @@ export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33;
 
 export const MAX_WINDOW_HEIGHT_COMPACT = 750;
 
-export const COMMIT_ITEM_PADDING = 32;
-
 // Commit message textarea
 export const MAX_TITLE_LENGTH = 50;
 export const MAX_BODY_LENGTH = 72;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 7637a3f577c..175d2779bb7 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -39,12 +39,15 @@
 
 .ide-file-list {
   flex: 1;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+  padding-bottom: $grid-size;
 
   .file {
     cursor: pointer;
 
     &.file-open {
-      background: $link-active-background;
+      background: $white-normal;
     }
 
     &.file-active {
@@ -84,12 +87,11 @@
 
     .ide-new-btn {
       display: none;
-      margin-right: -8px;
     }
 
     &:hover,
     &:focus {
-      background: $link-active-background;
+      background: $white-normal;
 
       .ide-new-btn {
         display: block;
@@ -111,12 +113,11 @@
   }
 }
 
-.file-name,
-.file-col-commit-message {
+.file-name {
   display: flex;
   overflow: visible;
   align-items: center;
-  padding: 6px 12px;
+  width: 100%;
 }
 
 .multi-file-loading-container {
@@ -507,7 +508,7 @@
   align-items: center;
   margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
-  padding: $gl-btn-padding $gl-padding;
+  padding: 12px 0;
 }
 
 .multi-file-commit-panel-header-title {
@@ -529,32 +530,31 @@
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
-  padding: $gl-padding;
+  padding: $grid-size 0;
+  margin-left: -$grid-size;
+  margin-right: -$grid-size;
   min-height: 60px;
+
+  .multi-file-commit-list-item {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  &.help-block {
+    margin-left: 0;
+    right: 0;
+  }
 }
 
 .multi-file-commit-list-item {
-  display: flex;
-  padding: 0;
-  align-items: center;
-  border-radius: $border-radius-default;
-
   .multi-file-discard-btn {
     display: none;
     margin-top: -2px;
     margin-left: auto;
-    margin-right: $grid-size;
     color: $gl-link-color;
-
-    &:focus,
-    &:hover {
-      text-decoration: underline;
-    }
   }
 
   &:hover {
-    background: $white-normal;
-
     .multi-file-discard-btn {
       display: flex;
     }
@@ -590,25 +590,39 @@
   }
 }
 
+.multi-file-commit-list-item,
+.ide-file-list .file {
+  display: flex;
+  align-items: center;
+  margin-left: -$grid-size;
+  margin-right: -$grid-size;
+  padding: $grid-size / 2 $grid-size;
+  border-radius: $border-radius-default;
+  text-align: left;
+
+  &:hover,
+  &:focus {
+    background: $white-normal;
+  }
+}
+
 .multi-file-commit-list-path {
-  padding: $grid-size / 2;
-  padding-left: $grid-size;
+  padding: 0;
   background: none;
   border: 0;
   text-align: left;
   width: 100%;
-  min-width: 0;
+
+  &:hover,
+  &:focus {
+    outline: 0;
+  }
 
   svg {
     min-width: 16px;
     vertical-align: middle;
     display: inline-block;
   }
-
-  &:hover,
-  &:focus {
-    outline: 0;
-  }
 }
 
 .multi-file-commit-list-file-path {
@@ -625,12 +639,18 @@
 
 .multi-file-commit-form {
   position: relative;
-  padding: $gl-padding;
   background-color: $white-light;
-  border-top: 1px solid $white-dark;
   border-left: 1px solid $white-dark;
   transition: all 0.3s ease;
 
+  > form,
+  > .commit-form-compact {
+    padding: $gl-padding 0;
+    margin-left: $gl-padding;
+    margin-right: $gl-padding;
+    border-top: 1px solid $white-dark;
+  }
+
   .btn {
     font-size: $gl-font-size;
   }
@@ -793,8 +813,9 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  width: 100%;
   min-height: 140px;
+  margin-left: $gl-padding;
+  margin-right: $gl-padding;
 
   &.is-first {
     border-bottom: 1px solid $white-dark;
@@ -985,9 +1006,8 @@
 .ide-tree-header {
   display: flex;
   align-items: center;
-  padding: 10px 0;
-  margin-left: 10px;
-  margin-right: 10px;
+  margin-bottom: 8px;
+  padding: 12px 0;
   border-bottom: 1px solid $white-dark;
 
   .ide-new-btn {
@@ -1018,9 +1038,9 @@
 .commit-form-slide-up-enter-active,
 .commit-form-slide-up-leave-active {
   position: absolute;
-  top: 16px;
-  left: 16px;
-  right: 16px;
+  top: 0;
+  left: 0;
+  right: 0;
   transition: all 0.3s ease;
 }