From 0af830fc02076290749f49b8ad56b05c85b07591 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Wed, 13 Jun 2018 09:47:37 +0200
Subject: Turned the mode of the onion viewer around, changed the size display

---
 .../vue_shared/components/content_viewer/viewers/image_viewer.vue   | 4 ++--
 .../components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'app')

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 e3cbf699f34..6851029018a 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
@@ -84,10 +84,10 @@ export default {
           {{ fileSizeReadable }}
         </template>
         <template v-if="fileSize>0 && width && height">
-          -
+          |
         </template>
         <template v-if="width && height">
-          {{ width }} x {{ height }}
+          W: {{ width }} | H: {{ height }}
         </template>
       </p>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
index d714ceb3a2f..efcc39197b0 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -28,7 +28,7 @@ export default {
       onionOldImgInfo: null,
       onionNewImgInfo: null,
       onionDraggerPos: 0,
-      onionOpacity: 0,
+      onionOpacity: 1,
       dragging: false,
     };
   },
@@ -82,7 +82,9 @@ export default {
           this.onionNewImgInfo.renderedHeight,
         );
 
-        this.onionOpacity = 0;
+        this.onionOpacity = 1;
+        this.onionDraggerPos =
+          this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
 
         document.body.addEventListener('mouseup', this.stopDrag);
       }
-- 
cgit v1.2.1