Multi File Editor File icons

1 files changed, 92 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
new file mode 100644
index 00000000000..65c64967fdc
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -0,0 +1,92 @@
+<script>
+  import getIconForFile from './file_icon/file_icon_map';
+  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
+
+    Sample configuration:
+
+    <file-icon
+      name="retry"
+      :size="32"
+      css-classes="top"
+    />
+
+  */
+  export default {
+    props: {
+      fileName: {
+        type: String,
+        required: true,
+      },
+
+      folder: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      opened: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      size: {
+        type: Number,
+        required: false,
+        default: 16,
+      },
+
+      cssClasses: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    components: {
+      loadingIcon,
+      icon,
+    },
+    computed: {
+      spriteHref() {
+        const 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}` : '';
+      },
+    },
+  };
+</script>
+<template>
+  <span>
+    <svg
+      :class="[iconSizeClass, cssClasses]"
+      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"
+    />
+  </span>
+</template>