Fixed the if for the straytz-ide-blob-image

3 files changed, 11 insertions, 9 deletions

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
index 0db7cfa23b0..395a71acccf 100644
--- 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
@@ -22,7 +22,6 @@ export default {
       return numberToHumanSize(this.fileSize);
     },
     fileName() {
-      if (!this.path) return '';
       return this.path.split('/').pop();
     },
   },
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
index 8f732cfc3d7..a5999f909ca 100644
--- 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
@@ -17,8 +17,8 @@ export default {
     return {
       width: 0,
       height: 0,
-      zoomable: false,
-      zoomed: false,
+      isZoomable: false,
+      isZoomed: false,
     };
   },
   computed: {
@@ -29,14 +29,14 @@ export default {
   methods: {
     onImgLoad() {
       const contentImg = this.$refs.contentImg;
-      this.zoomable =
+      this.isZoomable =
         contentImg.naturalWidth > contentImg.width || contentImg.naturalHeight > contentImg.height;
 
       this.width = contentImg.naturalWidth;
       this.height = contentImg.naturalHeight;
     },
     onImgClick() {
-      if (this.zoomable) this.zoomed = !this.zoomed;
+      if (this.isZoomable) this.isZoomed = !this.isZoomed;
     },
   },
 };
@@ -47,14 +47,17 @@ export default {
     <div class="file-content image_file">
       <img
         ref="contentImg"
-        :class="{ 'zoomable': zoomable === true, 'zoomed': zoomed === true }"
+        :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 }} -
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          -
         </template>
         <template v-if="width && height">
           {{ width }} x {{ height }}
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 640532d89c8..a414deb8921 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -331,11 +331,11 @@
         max-height: 90%;
       }
 
-      .zoomable {
+      .isZoomable {
         cursor: pointer;
         cursor: zoom-in;
 
-        &.zoomed {
+        &.isZoomed {
           cursor: pointer;
           cursor: zoom-out;
           max-width: none;