Web IDE blob image + default fallback

9 files changed, 176 insertions, 28 deletions

diff --git a/app/assets/javascripts/ide/components/ide_file_buttons.vue b/app/assets/javascripts/ide/components/ide_file_buttons.vue
index 6d07329df71..a6c6f46a144 100644
--- a/app/assets/javascripts/ide/components/ide_file_buttons.vue
+++ b/app/assets/javascripts/ide/components/ide_file_buttons.vue
@@ -36,6 +36,7 @@ export default {
   >
     <a
       v-tooltip
+      v-if="!file.binary"
       :href="file.blamePath"
       :title="__('Blame')"
       class="btn btn-xs btn-transparent blame"
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 9c386896448..152a5f632ad 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,25 +1,23 @@
 <script>
-  import icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import timeAgoMixin from '~/vue_shared/mixins/timeago';
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import timeAgoMixin from '~/vue_shared/mixins/timeago';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  mixins: [timeAgoMixin],
+  props: {
+    file: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
-    },
-    mixins: [
-      timeAgoMixin,
-    ],
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>
@@ -50,7 +48,9 @@
     <div class="text-right">
       {{ file.eol }}
     </div>
-    <div class="text-right">
+    <div
+      class="text-right"
+      v-if="!file.binary">
       {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
     <div class="text-right">
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 8a709b31ea0..6aa44ca2c11 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -171,10 +171,10 @@ export default {
     id="ide"
     class="blob-viewer-container blob-editor-container"
   >
-    <div
-      class="ide-mode-tabs clearfix"
-      v-if="!shouldHideEditor">
-      <ul class="nav-links pull-left">
+    <div class="ide-mode-tabs clearfix">
+      <ul
+        class="nav-links pull-left"
+        v-if="!shouldHideEditor">
         <li :class="editTabCSS">
           <a
             href="javascript:void(0);"
@@ -210,9 +210,10 @@ export default {
     >
     </div>
     <content-viewer
-      v-if="!shouldHideEditor && file.viewMode === 'preview'"
+      v-if="shouldHideEditor || file.viewMode === 'preview'"
       :content="file.content || file.raw"
-      :path="file.path"
+      :path="file.rawPath"
+      :file-size="file.size"
       :project-path="file.projectId"/>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 6a143e518f9..eeb14b5490c 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -43,6 +43,7 @@ export default {
       raw: null,
       baseRaw: null,
       html: data.html,
+      size: data.size,
     });
   },
   [types.SET_FILE_RAW_DATA](state, { file, raw }) {
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 4befcc501ef..05a019de54f 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -40,6 +40,7 @@ export const dataStructure = () => ({
   eol: '',
   viewMode: 'edit',
   previewMode: null,
+  size: 0,
 });
 
 export const decorateData = entity => {
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
index fb8ccea91c7..4155e1bab9c 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
@@ -1,17 +1,24 @@
 <script>
 import { viewerInformationForPath } from './lib/viewer_utils';
 import MarkdownViewer from './viewers/markdown_viewer.vue';
+import ImageViewer from './viewers/image_viewer.vue';
+import DownloadViewer from './viewers/download_viewer.vue';
 
 export default {
   props: {
     content: {
       type: String,
-      required: true,
+      default: '',
     },
     path: {
       type: String,
       required: true,
     },
+    fileSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
     projectPath: {
       type: String,
       required: false,
@@ -20,12 +27,18 @@ export default {
   },
   computed: {
     viewer() {
+      if (!this.path) return null;
+
       const previewInfo = viewerInformationForPath(this.path);
+      if (!previewInfo) return DownloadViewer;
+
       switch (previewInfo.id) {
         case 'markdown':
           return MarkdownViewer;
+        case 'image':
+          return ImageViewer;
         default:
-          return null;
+          return DownloadViewer;
       }
     },
   },
@@ -36,6 +49,8 @@ export default {
   <div class="preview-container">
     <component
       :is="viewer"
+      :path="path"
+      :file-size="fileSize"
       :project-path="projectPath"
       :content="content"
     />
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
index 4f2e1e47dd1..f01a51da0b3 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js
@@ -1,4 +1,7 @@
 const viewers = {
+  image: {
+    id: 'image',
+  },
   markdown: {
     id: 'markdown',
     previewTitle: 'Preview Markdown',
@@ -7,6 +10,12 @@ const viewers = {
 
 const fileNameViewers = {};
 const fileExtensionViewers = {
+  jpg: 'image',
+  jpeg: 'image',
+  gif: 'image',
+  png: 'image',
+  bmp: 'image',
+  ico: 'image',
   md: 'markdown',
   markdown: 'markdown',
 };
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
new file mode 100644
index 00000000000..395a71acccf
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -0,0 +1,52 @@
+<script>
+import Icon from '../../icon.vue';
+import { numberToHumanSize } from '../../../../lib/utils/number_utils';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+    fileSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  computed: {
+    fileSizeReadable() {
+      return numberToHumanSize(this.fileSize);
+    },
+    fileName() {
+      return this.path.split('/').pop();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="file-container">
+    <div class="file-content">
+      <p class="prepend-top-10 file-info">
+        {{ fileName }} ({{ fileSizeReadable }})
+      </p>
+      <a
+        :href="path"
+        class="btn btn-default"
+        rel="nofollow"
+        download
+        target="_blank">
+        <icon
+          name="download"
+          css-classes="pull-left append-right-8"
+          :size="16"
+        />
+        {{ __('Download') }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
new file mode 100644
index 00000000000..a5999f909ca
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -0,0 +1,68 @@
+<script>
+import { numberToHumanSize } from '../../../../lib/utils/number_utils';
+
+export default {
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+    fileSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      width: 0,
+      height: 0,
+      isZoomable: false,
+      isZoomed: false,
+    };
+  },
+  computed: {
+    fileSizeReadable() {
+      return numberToHumanSize(this.fileSize);
+    },
+  },
+  methods: {
+    onImgLoad() {
+      const contentImg = this.$refs.contentImg;
+      this.isZoomable =
+        contentImg.naturalWidth > contentImg.width || contentImg.naturalHeight > contentImg.height;
+
+      this.width = contentImg.naturalWidth;
+      this.height = contentImg.naturalHeight;
+    },
+    onImgClick() {
+      if (this.isZoomable) this.isZoomed = !this.isZoomed;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'isZoomable': isZoomable, 'isZoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          -
+        </template>
+        <template v-if="width && height">
+          {{ width }} x {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>