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 ++++--
 .../components/diff_viewer/viewers/image_diff_viewer_spec.js        | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

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);
       }
diff --git a/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
index 7d964720ea9..b878286ae3f 100644
--- a/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
+++ b/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
@@ -170,7 +170,7 @@ describe('ImageDiffViewer', () => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.dragger').style.left).toBe('');
+        expect(vm.$el.querySelector('.dragger').style.left).toBe('100px');
 
         dragSlider(vm.$el.querySelector('.dragger'));
 
-- 
cgit v1.2.1