Merged PR 884: #2236 WE, WA Result lists, added Scroll Arrow and Fixed Spacer Gap

#2236 WE, WA Result lists, added Scroll Arrow and Fixed Spacer Gap

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss

@@ -19,8 +19,14 @@
   @apply text-active-branch text-right mb-3 font-semibold text-base;
 }
 
-::ng-deep page-goods-in-list ui-scroll-container .scroll-container {
-  @apply bg-white;
+::ng-deep page-goods-in-list ui-scroll-container {
+  .scroll-container {
+    @apply bg-white;
+  }
+
+  .cta-scroll {
+    @apply bottom-9 !important;
+  }
 }
 
 .empty-message {

apps/ui/scroll-container/src/lib/scroll-container.component.html

@@ -23,3 +23,6 @@
 
   <div *ngIf="!loading" class="spacer"></div>
 </div>
+<button class="cta-scroll" *ngIf="showScrollArrow && scrollPersantage > 0" (click)="scrollTop()">
+  <ui-icon icon="arrow" size="20px"></ui-icon>
+</button>

apps/ui/scroll-container/src/lib/scroll-container.component.scss

@@ -3,10 +3,6 @@
   max-height: calc(100vh - 280px);
 }
 
-.spacer {
-  height: 140px;
-}
-
 ::ng-deep ui-scroll-container .scroll-bar::-webkit-scrollbar {
   background-color: transparent !important;
 }
@@ -15,6 +11,40 @@
   background-color: white !important;
 }
 
-.scrollbar-gap::-webkit-scrollbar-track {
-  margin-bottom: 10rem;
+.cta-scroll {
+  @apply absolute right-10 shadow-cta border-none outline-none bg-white w-12 h-12 rounded-full grid items-center justify-center;
+
+  ui-icon {
+    @apply transition-transform transform -rotate-90;
+  }
+}
+
+::ng-deep .customer ui-scroll-container {
+  .spacer {
+    height: 140px;
+  }
+
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 10rem;
+  }
+
+  .cta-scroll {
+    @apply text-active-customer;
+    bottom: 77px;
+  }
+}
+
+::ng-deep .branch ui-scroll-container {
+  .spacer {
+    height: 230px;
+  }
+
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 15.5rem;
+  }
+
+  .cta-scroll {
+    @apply text-cool-grey;
+    bottom: 160px;
+  }
 }

apps/ui/scroll-container/src/lib/scroll-container.component.ts

@@ -27,6 +27,8 @@ export class UiScrollContainerComponent {
 
   @Input() showScrollbar = true;
 
+  @Input() showScrollArrow = true;
+
   @Input() useLoadAnimation = true;
 
   constructor() {}
@@ -57,4 +59,8 @@ export class UiScrollContainerComponent {
 
     return (100 / scrollHeight) * scrollTop;
   }
+
+  scrollTop() {
+    this.scrollContainer?.nativeElement?.scrollTo({ top: 0, behavior: 'smooth' });
+  }
 }