Using now the default GitLab Folder Icontz-ide-icons

2 files changed, 16 insertions, 6 deletions

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 2521ece032e..b3aff2e7245 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -3,7 +3,7 @@
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
   import newDropdown from './new_dropdown/index.vue';
-  import FileIcon from '../../vue_shared/components/file_icon.vue';
+  import fileIcon from '../../vue_shared/components/file_icon.vue';
 
   export default {
     mixins: [
@@ -12,7 +12,7 @@
     components: {
       skeletonLoadingContainer,
       newDropdown,
-      FileIcon,
+      fileIcon,
     },
     props: {
       file: {
@@ -35,7 +35,6 @@
       isSubmodule() {
         return this.file.type === 'submodule';
       },
-      },
       isTree() {
         return this.file.type === 'tree';
       },
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index a9a6e95340f..f6d518a12fe 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,6 +1,7 @@
 <script>
   import { getIconForFile, getIconForFolder } from './file_icon/file_icon_map.js';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   /* This is a re-usable vue component for rendering a svg sprite
     icon
@@ -50,22 +51,27 @@
         required: false,
         default: '',
       },
-
     },
     components: {
       loadingIcon,
+      icon,
     },
     computed: {
       spriteHref() {
         let iconName;
         if (this.folder) {
-          iconName = getIconForFolder(this.fileName) || 'folder-docs';
+          // iconName = getIconForFolder(this.fileName)
+          iconName = 'folder-docs';
           if (this.opened) iconName += '-open';
         } else {
           iconName = getIconForFile(this.fileName) || 'file';
         }
         return `${gon.sprite_file_icons}#${iconName}`;
       },
+      folderIconName() {
+        // We don't have a open folder icon yet
+        return this.opened ? 'folder' : 'folder';
+      },
       iconSizeClass() {
         return this.size ? `s${this.size}` : '';
       },
@@ -76,10 +82,15 @@
   <span>
     <svg
       :class="[iconSizeClass, cssClasses]"
-      v-if="!loading">
+      v-if="!loading && !folder">
       <use 
         v-bind="{'xlink:href':spriteHref}"/>
     </svg>
+    <icon
+      v-if="!loading && folder"
+      :name="folderIconName"
+      :size="size"
+    />
     <loading-icon
       v-if="loading"
       :inline="true"