diff options
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; |