Synchronize horizontal scrolling (#6)

* better scrolling - horizontal syncronized * update comparison column on scroll * custom scrollbar * reach until scrollbar * report aligned with icons column * no user select when done renaming * space * translateX rather than translate
whyboris · Feb 8, 2020 · 33f790c · 33f790c
1 parent 3c2c777
commit 33f790c
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 73 deletions.
diff --git a/src/app/home/comparison/comparison.component.scss b/src/app/home/comparison/comparison.component.scss
@@ -1,12 +1,12 @@
 .whiteout {
   background: white;
   display: block;
-  height: 18px;
+  height: 19px;
   left: -100vw;
-  min-width: 200vw;
+  min-width: calc(150vw - 9px);
   opacity: 0.7;
   position: absolute;
-  width: 200vw;
+  width: calc(150vw - 9px);
 }
 
 .icon {

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,33 +1,34 @@
 <div
-  #scrollOriginal
   class="rename-container"
   (mouseenter)="mouseEntered()"
   (mouseleave)="mouseLeft()"
-  [ngStyle]="{
-    opacity: mode === 'edit' ? 1 : 0
-  }"
 >
 
   <div #editor1>
   </div>
 
-  <div #editor2>
+  <div
+    #editor2
+    id="scrollSelector"
+    (scroll)="updateScroll()"
+    [ngStyle]="{ 'user-select': mode === 'review' ? 'none' : 'initial' }"
+  >
   </div>
 
-  <app-comparison
+  <div
+    #comparison1
     class="compare-icons"
-    [files]="compareIcons"
-  ></app-comparison>
+  >
+    <app-comparison
+      [files]="compareIcons"
+    ></app-comparison>
+  </div>
 
 </div>
 
 <div
-  #scrollDiff
   class="rename-container rename-overlay animated"
-  [ngStyle]="{
-    opacity: hover ? 0 : 1,
-    'pointer-events': mode === 'edit' ? 'none' : 'all'
-  }"
+  [ngStyle]="{ opacity: mode === 'review' ? 0 : (hover ? 0 : 1) }"
 >
 
   <div #editor3>
@@ -36,22 +37,23 @@
   <div #editor4>
   </div>
 
-  <app-comparison
+  <div
+    #comparison2
     class="compare-icons"
-    [files]="compareIcons"
-  ></app-comparison>
+  >
+    <app-comparison
+      [files]="compareIcons"
+    ></app-comparison>
+  </div>
 
 </div>
 
 <!-- =========================================================================================== -->
-<!-- FADE OUT AROUND COMPARISON ICONS -->
+<!-- FADE OUT OVERFLOWING TEXT -->
 
 <div class="fade-out fade-center-left">
 </div>
 
-<div class="fade-out fade-center-right">
-</div>
-
 <div class="fade-out fade-right">
 </div>
 

diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
@@ -14,6 +14,22 @@ $black:   #000000;
 $blue: #3278e7;
 $light-blue: #8db3f2;
 
+@mixin scrollBar {
+  &::-webkit-scrollbar-track {
+    background-color: $white;
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background-color: $white;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $gray-30;
+  }
+}
+
 button {
   background: $gray-15;
   border-radius: 10px;
@@ -64,28 +80,23 @@ button {
   right: 20px;
 }
 
-.ql-container {
-  box-sizing: border-box;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  position: absolute;
-  top: 0;
-  width: 50%;
-}
-
 ::ng-deep .ql-editor {
   background: white;
   font-family: monospace;
   line-height: 6px;
+  margin: 0;
   outline: none;
-  overflow-y: scroll;
-  padding: 10px 20px;
-  width: 2000px;
+  padding: 10px 0;
 
   p {
     white-space: nowrap;
+
+    &:after {
+      border: 1px solid white; // hack to have space at the end of the longest line when x-scrolling
+      content: '';
+      position: absolute;
+      width: 30px;
+    }
   }
 }
 
@@ -101,41 +112,61 @@ button {
 .rename-container {
   background: white;
   border-bottom: 1px solid $gray-30;
+  box-sizing: border-box;
   height: calc(100vh - 80px);
   left: 0;
   margin: 0;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: hidden;
   padding: 0;
   position: absolute;
-  width: 100%;
+  width: 100vw;
+
+  .ql-container {
+    box-sizing: border-box;
+    height: calc(100vh - 81px);
+    left: 0;
+    margin: 0;
+    overflow-x: scroll;
+    overflow-y: scroll;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: calc(50vw - 30px);
+
+    @include scrollBar;
+  }
 
   & :nth-child(1) {
+    overflow: hidden; // hide scrollbars
+    padding-bottom: 10px; // compensate for hidden scrollbar
     pointer-events: none;
+    transform: translateX(20px);
     user-select: none;
   }
 
   & :nth-child(2) {
     left: 50%;
+    transform: translateX(30px); // compensate .ql-container.width
   }
 }
 
 .rename-overlay {
+  pointer-events: none !important;
   user-select: none;
 }
 
 .compare-icons {
-  left: 50vw;
+  left: calc(50vw - 8px);
   line-height: 19px;
   position: absolute;
   top: 17px;
-  transform: translate(-20px, 0);
   z-index: 4;
 }
 
 .fade-out {
   // border: 1px solid red;
-  height: calc(100vh - 80px);
+  height: calc(100vh - 90px);
   pointer-events: none;
   position: absolute;
   top: 0;
@@ -145,19 +176,13 @@ button {
 .fade-center-left {
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), white);
   width: 30px;
-  right: calc(50% + 15px);
-}
-
-.fade-center-right {
-  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
-  left: calc(50% - 15px);
-  width: 30px;
+  right: 50vw;
 }
 
 .fade-right {
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), white);
   width: 30px;
-  right: 13px;
+  right: 10px;
 }
 
 .animated {
@@ -175,31 +200,18 @@ button {
   pointer-events: none;
   position: absolute;
   text-align: center;
-  top: calc(50vh - 40px);
-  transform: translate(-50%, 0);
+  top: calc(50vh - 50px);
+  transform: translateX(-50%);
   user-select: none;
   width: 90%;
   z-index: 6;
 }
 
-.comparison {
-  top: 100px;
-  left: 100px;
-  background-color: #EEEEEE;
-  height: 300px;
-  position: absolute;
-  width: 300px;
-  border-radius: 20px;
-  border: 5px solid red;
-  z-index: 10;
-}
-
 .rename-report {
   bottom: 9px;
-  left: 50vw;
+  left: calc(50vw - 8px); // coincides with comparison icons column (.compare-icons)
   line-height: 20px;
   position: absolute;
-  transform: translate(-20px, 0);
 
   .report-item {
     height: 20px;