Enable deleting files in the Web IDE

1 files changed, 58 insertions, 5 deletions

diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 442a5e07a86..a346bd04ad3 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -77,6 +77,7 @@
     .ide-file-icon-holder {
       display: flex;
       align-items: center;
+      color: $theme-gray-700;
     }
 
     .ide-file-changed-icon {
@@ -164,12 +165,23 @@
       background-color: $white-light;
       border-bottom-color: $white-light;
     }
+
+    &:not(.disabled) {
+      .multi-file-tab {
+        cursor: pointer;
+      }
+    }
+
+    &.disabled {
+      .multi-file-tab-close {
+        cursor: default;
+      }
+    }
   }
 }
 
 .multi-file-tab {
   @include str-truncated(141px);
-  cursor: pointer;
 
   svg {
     vertical-align: middle;
@@ -244,6 +256,38 @@
     }
   }
 
+  .is-deleted {
+    .editor.modified {
+      .margin-view-overlays,
+      .lines-content,
+      .decorationsOverviewRuler {
+        // !important to override monaco inline styles
+        display: none !important;
+      }
+    }
+
+    .diffOverviewRuler.modified {
+      // !important to override monaco inline styles
+      display: none !important;
+    }
+  }
+
+  .is-added {
+    .editor.original {
+      .margin-view-overlays,
+      .lines-content,
+      .decorationsOverviewRuler {
+        // !important to override monaco inline styles
+        display: none !important;
+      }
+    }
+
+    .diffOverviewRuler.original {
+      // !important to override monaco inline styles
+      display: none !important;
+    }
+  }
+
   .monaco-diff-editor.vs {
     .editor.modified {
       box-shadow: none;
@@ -560,16 +604,21 @@
   }
 }
 
-.multi-file-addition,
-.multi-file-addition-solid {
+.ide-file-addition,
+.ide-file-addition-solid {
   color: $green-500;
 }
 
-.multi-file-modified,
-.multi-file-modified-solid {
+.ide-file-modified,
+.ide-file-modified-solid {
   color: $orange-500;
 }
 
+.ide-file-deletion,
+.ide-file-deletion-solid {
+  color: $red-500;
+}
+
 .multi-file-commit-list-collapsed {
   display: flex;
   flex-direction: column;
@@ -1017,6 +1066,10 @@
   .ide-new-btn {
     margin-left: auto;
   }
+
+  button {
+    color: $gl-text-color;
+  }
 }
 
 .ide-sidebar-branch-title {