Integrated Side Panels

6 files changed, 135 insertions, 120 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index fb862e7bf01..82eb6aa8ea7 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -32,58 +32,30 @@
 </script>
 
 <template>
-  <div class="multi-file-commit-panel-section">
-    <header
-      class="multi-file-commit-panel-header"
-      :class="{
-        'is-collapsed': collapsed,
-      }"
-    >
-      <icon
-        name="list-bulleted"
-        :size="18"
-        css-classes="append-right-default"
-      />
-      <template v-if="!collapsed">
-        {{ title }}
-        <button
-          type="button"
-          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
-          @click="toggleCollapsed"
+  <div class="multi-file-commit-list">
+    <list-collapsed
+      v-if="collapsed"
+    />
+    <template v-else>
+      <ul
+        v-if="fileList.length"
+        class="list-unstyled append-bottom-0"
+      >
+        <li
+          v-for="file in fileList"
+          :key="file.key"
         >
-          <i
-            aria-hidden="true"
-            class="fa fa-angle-double-right"
-          >
-          </i>
-        </button>
-      </template>
-    </header>
-    <div class="multi-file-commit-list">
-      <list-collapsed
-        v-if="collapsed"
-      />
-      <template v-else>
-        <ul
-          v-if="fileList.length"
-          class="list-unstyled append-bottom-0"
-        >
-          <li
-            v-for="file in fileList"
-            :key="file.key"
-          >
-            <list-item
-              :file="file"
-            />
-          </li>
-        </ul>
-        <div
-          v-else
-          class="help-block prepend-top-0"
-        >
-          No changes
-        </div>
-      </template>
-    </div>
+          <list-item
+            :file="file"
+          />
+        </li>
+      </ul>
+      <div
+        v-else
+        class="help-block prepend-top-0"
+      >
+        No changes
+      </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 03ed6935b54..5a985d3aed9 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -46,33 +46,29 @@ export default {
 
 <template>
   <div 
-    class="multi-file ide-view page-gutter page-with-contextual-sidebar page-with-sidebar right-sidebar-collapsed"
+    class="ide-view page-gutter page-with-contextual-sidebar page-with-sidebar right-sidebar-collapsed"
   >
     <ide-sidebar/>
-    <div class="panel-right content-wrapper page-with-new-nav">
-      <div class="content" id="content-body">
-        <ide-contextbar/>
-        <div
-          class="multi-file-edit-pane"
-        >
-          <template
-            v-if="activeFile">
-            <repo-tabs/>
-            <component
-              class="multi-file-edit-pane-content"
-              :is="currentBlobView"
-            />
-            <repo-file-buttons/>
-            <ide-status-bar/>
-          </template>
-          <template
-            v-else>
-            <br/><br/><br/><br/><br/>
-            <h4 class="muted text-center">Welcome to the GitLab IDE</h4>
-          </template>
-        </div>
-      </div>
+    <div
+      class="multi-file-edit-pane"
+    >
+      <template
+        v-if="activeFile">
+        <repo-tabs/>
+        <component
+          class="multi-file-edit-pane-content"
+          :is="currentBlobView"
+        />
+        <repo-file-buttons/>
+        <ide-status-bar/>
+      </template>
+      <template
+        v-else>
+        <br/><br/><br/><br/><br/>
+        <h4 class="muted text-center">Welcome to the GitLab IDE</h4>
+      </template>
     </div>
+    <ide-contextbar/>
   </div>
     
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue
index eea01a77f63..ac7545723f6 100644
--- a/app/assets/javascripts/ide/components/ide_context_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_context_bar.vue
@@ -1,32 +1,64 @@
 <script>
 import { mapGetters } from 'vuex';
 import RepoCommitSection from './repo_commit_section.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
 export default {
+  components: {
+    RepoCommitSection,
+    icon,
+  },
+  data() {
+    return {
+      collapsed: true,
+    };
+  },
   computed: {
     ...mapGetters([
       'changedFiles',
     ]),
+    currentIcon() {
+      return this.collapsed ? 'angle-double-left' : 'angle-double-right';
+    }
   },
-  components: {
-    RepoCommitSection,
+  methods: {
+    toggleCollapsed() {
+      this.collapsed = !this.collapsed;
+    },
   },
 };
 </script>
 
 <template>
-  <aside aria-live="polite" class="js-issuable-sidebar js-right-sidebar right-sidebar right-sidebar-collapsed" data-signed-in="">
-    <div class="issuable-sidebar" data-endpoint="/h5bp/html5-boilerplate/issues/11.json">
-      <div class="block issuable-sidebar-header">
-        <span class="issuable-header-text hide-collapsed pull-left">
-          IDE
-        </span>
-        <a aria-label="Toggle sidebar" class="gutter-toggle pull-right js-sidebar-toggle" href="#" role="button">
-          <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-left"></i>
-        </a>
+  <div
+    class="multi-file-commit-panel"
+    :class="{
+      'is-collapsed': collapsed,
+    }"
+  >
+    <div class="multi-file-commit-panel-section">
+      <header
+        class="multi-file-commit-panel-header"
+        :class="{
+          'is-collapsed': collapsed,
+          }"
+        >
+        <button
+          type="button"
+          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
+          @click="toggleCollapsed"
+        >
+          <icon
+            :name="currentIcon"
+            :size="18"
+          />
+        </button>
+      </header>
+      <div>
       </div>
-      
-      <repo-commit-section />
+      <repo-commit-section 
+        :collapsed="collapsed"
+        class=""/>
     </div>
-  </aside>
+  </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue
index 7e1f0fdbd47..0c45864c09b 100644
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
@@ -38,12 +38,6 @@ export default {
 <div>
   <div class="ide-file-list">
     <table class="table">
-      <thead>
-        <tr>
-          <th>
-          </th>
-        </tr>
-      </thead>
       <tbody
         v-if="treeId">
         <repo-previous-directory
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 320a0a9a7e4..9e69bedd4a7 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -14,13 +14,18 @@ export default {
   directives: {
     tooltip,
   },
+  props: {
+    collapsed: {
+      type: Boolean,
+      required: true,
+    },
+  },
   data() {
     return {
       showNewBranchDialog: false,
       submitCommitsLoading: false,
       startNewMR: false,
       commitMessage: '',
-      collapsed: true,
     };
   },
   computed: {
@@ -93,13 +98,8 @@ export default {
 </script>
 
 <template>
-<div
-  class="multi-file-commit-panel"
-  :class="{
-    'is-collapsed': collapsed,
-  }"
->
-  <popup-dialog
+<div class="multi-file-commit-panel-section">
+  <popup-di1og
     v-if="showNewBranchDialog"
     :primary-button-label="__('Create new branch')"
     kind="primary"
@@ -108,18 +108,16 @@ export default {
     @toggle="showNewBranchDialog = false"
     @submit="makeCommit(true)"
   />
-  <button
-    v-if="collapsed"
-    type="button"
-    class="btn btn-transparent multi-file-commit-panel-collapse-btn is-collapsed prepend-top-10 append-bottom-10"
-    @click="toggleCollapsed"
-  >
-    <i
-      aria-hidden="true"
-      class="fa fa-angle-double-left"
-    >
-    </i>
-  </button>
+  <div>
+    <icon
+      name="list-bulleted"
+      :size="18"
+      css-classes="append-right-default"
+    />
+    <template v-if="!collapsed">
+      Staged
+    </template>
+  </div>
   <commit-files-list
     title="Staged"
     :file-list="changedFiles"
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 402412eae71..027ac87b1b2 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -35,9 +35,11 @@
   }
 }
 
-.multi-file {
+.ide-view {
   display: flex;
-  height: calc(100vh - 145px);
+  height: calc(100vh - #{$header-height});
+  margin-top: $header-height;
+  color: $almost-black;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
 
@@ -50,7 +52,6 @@
 
 .ide-file-list {
   flex: 1;
-  overflow: scroll;
 
   .file {
     cursor: pointer;
@@ -72,6 +73,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 0;
+  padding: 6px 12px;
 }
 
 .multi-file-table-name {
@@ -92,7 +94,7 @@
 
 .multi-file-tabs {
   display: flex;
-  overflow: scroll;
+  overflow: hidden;
   background-color: $white-normal;
   box-shadow: inset 0 -1px $white-dark;
 
@@ -141,6 +143,10 @@
   height: 0;
 }
 
+.multi-file-editor-holder {
+  height: 100%;
+}
+
 .multi-file-editor-btn-group {
   padding: $grid-size;
   border-top: 1px solid $white-dark;
@@ -308,3 +314,20 @@
     }
   }
 }
+
+
+.nav-sidebar {
+  .toggle-sidebar-button {
+    padding: 8px 16px;
+  }
+
+  .projects-sidebar {
+    overflow-y: scroll;
+    overflow-x: auto;
+    position: absolute;
+    right: 1px;
+    top: 0;
+    bottom: 38px;
+    left: 0;
+  }
+}