Side bar Buttons fixed

4 files changed, 74 insertions, 19 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 5a985d3aed9..e962a5487d1 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -46,7 +46,7 @@ export default {
 
 <template>
   <div 
-    class="ide-view page-gutter page-with-contextual-sidebar page-with-sidebar right-sidebar-collapsed"
+    class="ide-view"
   >
     <ide-sidebar/>
     <div
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 0600aee28cc..894763a55b3 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,34 +1,61 @@
 <script>
 import { mapState } from 'vuex';
 import ProjectTree from './ide_project_tree.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
 export default {
   components: {
     ProjectTree,
+    icon,
+  },
+  data() {
+    return {
+      collapsed: false,
+    };
   },
   computed: {
     ...mapState([
       'loading',
       'projects',
     ]),
+    currentIcon() {
+      return this.collapsed ? 'angle-double-right' : 'angle-double-left';
+    }
+  },
+  methods: {
+    toggleCollapsed() {
+      this.collapsed = !this.collapsed;
+    },
   },
 };
 </script>
 
 <template>
-<div class="nav-sidebar">
-  <div class="nav-sidebar-inner-scroll">
-    {{ projects.length }}
+<div
+    class="multi-file-commit-panel"
+    :class="{
+      'is-collapsed': collapsed,
+    }"
+  >
+  <div class="multi-file-commit-panel-inner-scroll">
     <project-tree
       v-for="(project, index) in projects"
       :key="project.id"
       :project="project"/>
-
-    <a class="toggle-sidebar-button js-toggle-sidebar" role="button" title="Toggle sidebar" type="button">
-      <svg class=" icon-angle-double-left"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons-f1e1e3187fbe3fe3aa42a17cb2558778f1a2ddc2a1914f0ea7ea59d27b4e425c.svg#angle-double-left"></use></svg>
-      <svg class=" icon-angle-double-right"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons-f1e1e3187fbe3fe3aa42a17cb2558778f1a2ddc2a1914f0ea7ea59d27b4e425c.svg#angle-double-right"></use></svg>
-      <span class="collapse-text">Collapse sidebar</span>
-    </a>
   </div>
+  <button
+    type="button"
+    class="btn btn-transparent left-collapse-btn"
+    @click="toggleCollapsed"
+  >
+    <icon
+      :name="currentIcon"
+      :size="18"
+    />
+    <span
+      v-if="!collapsed"
+      class="collapse-text"
+    >Collapse sidebar</span>
+  </button>
 </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 9e69bedd4a7..3362ce4e10d 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -108,11 +108,10 @@ export default {
     @toggle="showNewBranchDialog = false"
     @submit="makeCommit(true)"
   />
-  <div>
+  <div class="multi-file-context-bar-icon text-center">
     <icon
       name="list-bulleted"
       :size="18"
-      css-classes="append-right-default"
     />
     <template v-if="!collapsed">
       Staged
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 027ac87b1b2..ce4d4afc175 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -186,13 +186,44 @@
   flex-direction: column;
   height: 100%;
   width: 290px;
-  padding: $gl-padding;
+  padding: 0;
   background-color: $gray-light;
   border-left: 1px solid $white-dark;
 
+  .multi-file-commit-panel-inner-scroll {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: auto;
+    border-bottom: solid 1px $gray-normal;
+    margin-bottom: 1px;
+  }
+
   &.is-collapsed {
     width: 60px;
-    padding: 0;
+
+    .multi-file-commit-list {
+      padding-top: $gl-padding;
+      overflow: hidden;
+    }
+
+    .multi-file-context-bar-icon {
+      align-items: center;
+
+      svg {
+        float: none;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.multi-file-context-bar-icon {
+  padding: 10px;
+
+  svg {
+    margin-right: 10px;
+    float: left;
   }
 }
 
@@ -205,7 +236,6 @@
 .multi-file-commit-panel-header {
   display: flex;
   align-items: center;
-  padding: 0 0 12px;
   margin-bottom: 12px;
   border-bottom: 1px solid $white-dark;
 
@@ -220,10 +250,8 @@
 }
 
 .multi-file-commit-panel-collapse-btn {
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-left: auto;
-  font-size: 20px;
+  padding-top: 10px;
+  width: 100%;
 
   &.is-collapsed {
     margin-right: auto;
@@ -233,6 +261,7 @@
 .multi-file-commit-list {
   flex: 1;
   overflow: scroll;
+  padding: $gl-padding;
 }
 
 .multi-file-commit-list-item {