Styled the sidebar

7 files changed, 181 insertions, 372 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index d9be2efe4c4..f39896e9262 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -67,10 +67,9 @@ export default {
       <template
         v-else>
         <br/><br/><br/><br/><br/>
-        <h4 class="muted text-center">Welcome to the GitLab IDE</h4>
+        <h4 class="clgray text-center">Welcome to the GitLab IDE</h4>
       </template>
     </div>
     <ide-contextbar/>
   </div>
-    
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
index 27ba384e14b..483d4fc0033 100644
--- a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
@@ -1,9 +1,11 @@
 <script>
 import RepoTree from './ide_repo_tree.vue';
+import Icon from '../../vue_shared/components/icon.vue';
 
 export default {
   components: {
     RepoTree,
+    Icon,
   },
   props: {
     branch: {
@@ -15,11 +17,13 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="branch-container">
     <div class="branch-header">
-      <strong class="clgray">
-        {{ branch.name }}
-      </strong>
+      <icon
+        name="branch"
+        :size="12">
+      </icon>
+      {{ branch.name }}
     </div>
     <div>
       <repo-tree
diff --git a/app/assets/javascripts/ide/components/ide_project_tree.vue b/app/assets/javascripts/ide/components/ide_project_tree.vue
index 3dc3a442a8c..e7796c08820 100644
--- a/app/assets/javascripts/ide/components/ide_project_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_project_tree.vue
@@ -1,9 +1,11 @@
 <script>
 import BranchesTree from './ide_project_branches_tree.vue';
+import projectAvatarImage from '../../vue_shared/components/project_avatar/project_avatar_image.vue';
 
 export default {
   components: {
     BranchesTree,
+    projectAvatarImage,
   },
   props: {
     project: {
@@ -17,9 +19,17 @@ export default {
 <template>
   <div class="projects-sidebar">
     <div class="context-header">
-      <a title="Html5 Boilerplate" href="/h5bp/html5-boilerplate">
+      <a 
+        :title="project.name" 
+        :href="project.path">
         <div class="avatar-container s40 project-avatar">
-          <img alt="Html5 Boilerplate" class="avatar s40 avatar-tile js-lazy-loaded" src="/uploads/-/system/project/avatar/8/hodor.jpg">
+          <project-avatar-image
+            class="avatar-container project-avatar"
+            :link-href="project.path"
+            :img-src="project.avatar_url"
+            :img-alt="project.name"
+            :img-size="40"
+            />
         </div>
         <div class="sidebar-context-title">
           {{ project.name }}
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 8ff60599952..a50e422ae9f 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -44,6 +44,15 @@
       submoduleColSpan() {
         return !this.isCollapsed && this.isSubmodule ? 3 : 1;
       },
+      openedClass() {
+        return this.file.opened ? 'file-open' : '';
+      },
+      changedClass() {
+        const tabChangedObj = {
+          'fa-circle unsaved-icon': this.file.changed || this.file.tempFile,
+        };
+        return tabChangedObj;
+      },
     },
     methods: {
       clickFile(row) {
@@ -56,6 +65,7 @@
 <template>
   <tr
     class="file"
+    :class="openedClass"
     @click.prevent="clickFile(file)">
     <td
       class="multi-file-table-name"
@@ -74,6 +84,12 @@
       >
         {{ file.name }}
       </a>
+      <i
+        class="fa"
+        :class="changedClass"
+        aria-hidden="true"
+      >
+      </i>
       <template v-if="isSubmodule && file.id">
         @
         <span class="commit-sha">
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/project_avatar_image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/project_avatar_image.vue
new file mode 100644
index 00000000000..dce23bd65f6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/project_avatar_image.vue
@@ -0,0 +1,103 @@
+<script>
+
+/* This is a re-usable vue component for rendering a project avatar that
+  does not need to link to the project's profile. The image and an optional
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <project-avatar-image
+    :lazy="true"
+    :img-src="projectAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import defaultAvatarUrl from 'images/no_avatar.png';
+import { placeholderImage } from '../../../lazy_loader';
+import tooltip from '../../directives/tooltip';
+
+export default {
+  name: 'ProjectAvatarImage',
+  props: {
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: defaultAvatarUrl,
+    },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: 'project avatar',
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+  directives: {
+    tooltip,
+  },
+  computed: {
+    // API response sends null when gravatar is disabled and
+    // we provide an empty string when we use it inside project avatar link.
+    // In both cases we should render the defaultAvatarUrl
+    sanitizedSource() {
+      return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
+    },
+    resultantSrcAttribute() {
+      return this.lazy ? placeholderImage : this.sanitizedSource;
+    },
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
+    },
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <img
+    v-tooltip
+    class="avatar"
+    :class="{
+      lazy,
+      [avatarSizeClass]: true,
+      [cssClasses]: true
+    }"
+    :src="resultantSrcAttribute"
+    :width="size"
+    :height="size"
+    :alt="imgAlt"
+    :data-src="sanitizedSource"
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
+    :title="tooltipText"
+  />
+</template>
diff --git a/app/assets/stylesheets/pages/ide.scss b/app/assets/stylesheets/pages/ide.scss
deleted file mode 100644
index 47b6583255a..00000000000
--- a/app/assets/stylesheets/pages/ide.scss
+++ /dev/null
@@ -1,349 +0,0 @@
-/*.modal.popup-dialog {
-  display: block;
-  background-color: $black-transparent;
-  z-index: 2100;
-
-  @media (min-width: $screen-md-min) {
-    .modal-dialog {
-      width: 600px;
-      margin: 30px auto;
-    }
-  }
-}
-
-.project-refs-form,
-.project-refs-target-form {
-  display: inline-block;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.commit-message {
-  @include str-truncated(250px);
-}
-
-.editable-mode {
-  display: inline-block;
-}
-
-@media (min-width: $screen-md-min) {
-  .blob-viewer[data-type="rich"] {
-    margin: 20px;
-  }
-}
-
-.ide-view {
-  display: flex;
-  height: calc(100vh - #{$header-height});
-  margin-top: $header-height;
-  color: $almost-black;
-  border-top: 1px solid $white-dark;
-  border-bottom: 1px solid $white-dark;
-
-  .code.white pre .hll {
-    background-color: $well-light-border !important;
-  }
-
-  .ide-content-holder {
-    display: flex;
-    flex: 1;
-    height: 100vh;
-  }
-
-  .tree-content-holder-mini {
-    height: 100vh;
-  }
-
-  .multi-file-table-name,
-  .multi-file-table-col-commit-message {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 0;
-  }
-
-  .panel-right {
-    display: flex;
-    flex-direction: column;
-    margin-top: 0;
-    padding-bottom: 0;
-    height: 100%;
-
-    .content {
-      height: 100%;
-    }
-
-    .monaco-editor.vs {
-      .current-line {
-        border: 0;
-        background: $well-light-border;
-      }
-
-      .line-numbers {
-        cursor: pointer;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .blob-no-preview {
-      .vertical-center {
-        justify-content: center;
-        width: 100%;
-      }
-    }
-
-    .blob-editor-container {
-      overflow: hidden;
-      height: calc(100vh - 133px);
-    }
-
-    .blob-viewer-container {
-      flex: 1;
-      overflow: none;
-
-      > div,
-      .file-content:not(.wiki) {
-        display: flex;
-      }
-
-      > div,
-      .file-content,
-      .blob-viewer,
-      .line-number,
-      .blob-content,
-      .code {
-        min-height: 100%;
-        width: 100%;
-      }
-
-      .line-numbers {
-        min-width: 44px;
-      }
-
-      .blob-content {
-        flex: 1;
-        overflow-x: auto;
-      }
-    }
-
-    #tabs {
-      position: relative;
-      flex-shrink: 0;
-      display: flex;
-      width: 100%;
-      padding-left: 0;
-      margin-bottom: 0;
-      white-space: nowrap;
-      overflow-y: hidden;
-      overflow-x: auto;
-
-      li {
-        position: relative;
-        background: $gray-normal;
-        padding: #{$gl-padding / 2} $gl-padding;
-        border-right: 1px solid $white-dark;
-        border-bottom: 1px solid $white-dark;
-        cursor: pointer;
-
-        &.active {
-          background: $white-light;
-          border-bottom: 0;
-        }
-
-        a {
-          @include str-truncated(100px);
-          color: $gl-text-color;
-          vertical-align: middle;
-          text-decoration: none;
-          margin-right: 12px;
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .close-btn {
-          position: absolute;
-          right: 8px;
-          top: 50%;
-          padding: 0;
-          background: none;
-          border: 0;
-          font-size: $gl-font-size;
-          transform: translateY(-50%);
-        }
-
-        .close-icon:hover {
-          color: $hint-color;
-        }
-
-        .close-icon,
-        .unsaved-icon {
-          color: $gray-darkest;
-        }
-
-        .unsaved-icon {
-          color: $brand-success;
-        }
-
-        &.tabs-divider {
-          width: 100%;
-          background-color: $white-light;
-          border-right: 0;
-          border-top-right-radius: 2px;
-        }
-      }
-    }
-
-    .repo-file-buttons {
-      background-color: $white-light;
-      padding: 2px 10px;
-      border-top: 1px solid $white-normal;
-      border-bottom: 1px solid $white-normal;
-    }
-
-    .ide-status-bar {
-      background-color: $white-light;
-      padding: 1px 10px;
-      font-size: smaller;
-    }
-
-    #binary-viewer {
-      height: 80vh;
-      overflow: auto;
-      margin: 0;
-
-      .blob-viewer {
-        padding-top: 20px;
-        padding-left: 20px;
-      }
-
-      .binary-unknown {
-        text-align: center;
-        padding-top: 100px;
-        background: $gray-light;
-        height: 100%;
-        font-size: 17px;
-
-        span {
-          display: block;
-        }
-      }
-    }
-  }
-
-  #commit-area {
-    background: $gray-light;
-    padding: 20px;
-
-    .help-block {
-      padding-top: 7px;
-      margin-top: 0;
-    }
-  }
-
-  #view-toggler {
-    height: 41px;
-    position: relative;
-    display: block;
-    border-bottom: 1px solid $white-normal;
-    background: $white-light;
-    margin-top: -5px;
-  }
-
-  #binary-viewer {
-    img {
-      max-width: 100%;
-    }
-  }
-
-  #sidebar {
-    flex: 1;
-    height: 100%;
-
-    &.sidebar-mini {
-      width: 20%;
-      border-right: 1px solid $white-normal;
-      overflow: auto;
-    }
-
-    .table {
-      margin-bottom: 0;
-    }
-
-    tr {
-      .repo-file-options {
-        padding: 2px 16px;
-        width: 100%;
-      }
-
-      .title {
-        font-size: 10px;
-        text-transform: uppercase;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-      }
-
-      .file-icon {
-        margin-right: 5px;
-      }
-
-      td {
-        white-space: nowrap;
-        padding: 6px 12px;
-      }
-    }
-
-    .file {
-      cursor: pointer;
-    }
-
-    a {
-      @include str-truncated(250px);
-      color: $almost-black;
-    }
-  }
-}
-
-.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;
-  }
-}
-
-.render-error {
-  min-height: calc(100vh - 62px);
-
-  p {
-    width: 100%;
-  }
-}
-
-.multi-file-table-col-name {
-  width: 350px;
-}
-*/
-
-.ide-loading {
-  padding-top: 200px;
-  text-align: center;
-  font-size: 140%;
-}
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index a1c0862ab1b..37a8bf54ec7 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -55,6 +55,17 @@
 
   .file {
     cursor: pointer;
+
+    &.file-open {
+      background: $white-dark;
+    }
+
+    i.unsaved-icon {
+      color: $indigo-700;
+      float:right;
+      font-size: smaller;
+      line-height: 20px;
+    }
   }
 
   a {
@@ -227,6 +238,32 @@
       }
     }
   }
+
+  .branch-container {
+    border-left: 4px solid $indigo-700;
+    margin-bottom: 2px;
+
+    .branch-header {
+      background: $white-dark;
+      padding: 8px 16px;
+      color: $indigo-700;
+      font-weight: $gl-font-weight-bold;
+
+      svg {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .left-collapse-btn {
+    background: $gray-light;
+    text-align: left;
+    border-top: 1px solid $white-dark;
+
+    svg {
+      vertical-align: middle;
+    }
+  }
 }
 
 .multi-file-context-bar-icon {
@@ -355,19 +392,8 @@
   }
 }
 
-
-.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;
-  }
+.ide-loading {
+  padding-top: 200px;
+  text-align: center;
+  font-size: 140%;
 }