chore: Cleanup & Fixes from Display Exact Amount (#3419)

fylein · Jan 13, 2025 · 09a3422 · 09a3422
1 parent e4dd85f
commit 09a3422
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 40 deletions.
diff --git a/src/app/fyle/my-advances/my-advances.page.html b/src/app/fyle/my-advances/my-advances.page.html
@@ -36,7 +36,7 @@
     </div>
   </ng-container>
 
-  <app-fy-loading-screen *ngIf="isLoading" [isNewLoaderEnabled]="true"></app-fy-loading-screen>
+  <app-fy-loading-screen *ngIf="isLoading"></app-fy-loading-screen>
   <div class="my-advances--body" [ngClass]="{'my-advances--zero-state-body': (advances$|async)?.length === 0 }">
     <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
       <ion-refresher-content></ion-refresher-content>

diff --git a/src/app/fyle/my-expenses/my-expenses.page.html b/src/app/fyle/my-expenses/my-expenses.page.html
@@ -121,7 +121,6 @@
 
     <app-fy-loading-screen
       *ngIf="isLoading"
-      [isNewLoaderEnabled]="true"
       [isSelectionModeEnabled]="selectionMode"
       class="my-expenses--shimmers"
     ></app-fy-loading-screen>
@@ -213,7 +212,6 @@
     <ng-container *ngIf="isConnected$|async">
       <ng-container *ngIf="isLoadingDataInInfiniteScroll">
         <app-fy-loading-screen
-          [isNewLoaderEnabled]="true"
           [isSelectionModeEnabled]="selectionMode"
           class="my-expenses--shimmers"
         ></app-fy-loading-screen>

diff --git a/src/app/fyle/my-reports/my-reports.page.html b/src/app/fyle/my-reports/my-reports.page.html
@@ -72,7 +72,7 @@
     </ng-container>
 
     <ng-template #loading>
-      <app-fy-loading-screen [isNewLoaderEnabled]="true" class="my-reports--shimmers"></app-fy-loading-screen>
+      <app-fy-loading-screen class="my-reports--shimmers"></app-fy-loading-screen>
     </ng-template>
     <div *ngIf="(count$ | async) === 0" class="my-reports--zero-state">
       <app-fy-zero-state

diff --git a/src/app/fyle/team-advance/team-advance.page.html b/src/app/fyle/team-advance/team-advance.page.html
@@ -29,7 +29,7 @@
       ></app-fy-filter-pills>
     </div>
   </ng-container>
-  <app-fy-loading-screen *ngIf="isLoading" [isNewLoaderEnabled]="true"></app-fy-loading-screen>
+  <app-fy-loading-screen *ngIf="isLoading"></app-fy-loading-screen>
   <div *ngIf="count$|async; else zeroState">
     <ion-refresher slot="fixed" (ionRefresh)="changeState($event)">
       <ion-refresher-content></ion-refresher-content>

diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.html b/src/app/shared/components/expenses-card-v2/expenses-card.component.html
@@ -113,7 +113,10 @@
       </ng-template>
 
       <!-- Dashed Divider -->
-      <div class="expenses-card--vertical-dotted-border"></div>
+      <div
+        class="expenses-card--vertical-dotted-border"
+        [ngClass]="{ 'expenses-card--vertical-dotted-border__shift': isSelectionModeEnabled }"
+      ></div>
 
       <!-- Expense sync loader -->
       <div class="d-flex expenses-card--deatils-block">

diff --git a/src/app/shared/components/expenses-card-v2/expenses-card.component.scss b/src/app/shared/components/expenses-card-v2/expenses-card.component.scss
@@ -36,6 +36,10 @@
     bottom: 0;
     left: 68px;
     transform: translate(-50%, -50%);
+
+    &__shift {
+      left: 96px;
+    }
   }
 
   &--checkbox-container {
@@ -77,6 +81,7 @@
       font-size: 16px;
       line-height: 1.3;
       white-space: nowrap;
+      margin-left: 6px;
       &-scanning {
         color: $green;
       }
@@ -102,6 +107,7 @@
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
+      margin-left: 6px;
     }
   }
 

diff --git a/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.html b/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.html
@@ -1,30 +1,21 @@
-<!-- TODO: Remove class `new-loader-enabled once all list views are updated to the new designs -->
-<ion-grid
-  class="loading-screen-container"
-  [ngClass]="{ 'new-loader-enabled': isNewLoaderEnabled }"
-  *ngFor="let row of rows"
->
+<ion-grid class="loading-screen-container" *ngFor="let row of rows">
   <ion-row>
-    <ion-col *ngIf="isSelectionModeEnabled" [attr.size]="isNewLoaderEnabled ? '1' : '1.32'">
+    <ion-col *ngIf="isSelectionModeEnabled" [attr.size]="1">
       <div class="loading-screen-container--checkbox">
         <ion-skeleton-text animated></ion-skeleton-text>
       </div>
     </ion-col>
-    <ion-col [attr.size]="isNewLoaderEnabled ? '1.95' : '2.65'">
-      <!-- TODO: Remove class `new-loader-enabled` -->
-      <div class="loading-screen-container--icon" [ngClass]="{ 'new-loader-enabled': isNewLoaderEnabled }">
+    <ion-col [attr.size]="1.95">
+      <div class="loading-screen-container--icon">
         <ion-skeleton-text animated></ion-skeleton-text>
       </div>
     </ion-col>
-    <ion-col
-      [attr.size]="isSelectionModeEnabled ? (isNewLoaderEnabled ? '6.0' : '4.68') : isNewLoaderEnabled ? '7.0' : '6'"
-      class="loading-screen-container--content-block"
-    >
+    <ion-col [attr.size]="isSelectionModeEnabled ? '6.0' : '7.0'" class="loading-screen-container--content-block">
       <ion-skeleton-text animated class="loading-screen-container--content-block__header"></ion-skeleton-text>
       <ion-skeleton-text animated class="loading-screen-container--content-block__sub-header"></ion-skeleton-text>
       <ion-skeleton-text animated class="loading-screen-container--content-block__sub-header"></ion-skeleton-text>
     </ion-col>
-    <ion-col [attr.size]="isNewLoaderEnabled ? '3' : '3.35'">
+    <ion-col [attr.size]="3">
       <div class="loading-screen-container--state">
         <ion-skeleton-text animated></ion-skeleton-text>
       </div>

diff --git a/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.scss b/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.scss
@@ -1,14 +1,9 @@
 @import '../../../../theme/colors.scss';
 
 .loading-screen-container {
-  padding: 16px;
+  padding: 12px;
   border-bottom: 1px solid $grey-lighter;
 
-  // TODO: Remove `new-loader-enabled` class and update padding of parent class `loading-screen-container` once all list views are updated to the new designs
-  &.new-loader-enabled {
-    padding: 12px;
-  }
-
   &--checkbox {
     margin-top: 30px;
     height: 20px;
@@ -17,15 +12,9 @@
   }
 
   &--icon {
-    height: 74px;
-    width: 72px;
+    height: 72px;
+    width: 56px;
     border-radius: 8px;
-
-    // TODO: Remove `new-loader-enabled` class and update height &width of parent class `--icon` once all list views are updated to the new designs
-    &.new-loader-enabled {
-      height: 72px;
-      width: 56px;
-    }
   }
 
   &--content-block {

diff --git a/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.spec.ts b/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.spec.ts
@@ -47,14 +47,14 @@ describe('FyLoadingScreenComponent', () => {
       component.isSelectionModeEnabled = true;
       fixture.detectChanges();
       const ionColEl = getElementBySelector(fixture, '.loading-screen-container--content-block');
-      expect(getElementAttributeValue(ionColEl, 'size')).toBe('4.68');
+      expect(getElementAttributeValue(ionColEl, 'size')).toBe('6.0');
     });
 
     it('should set column size based on isSelectionModeEnabled input is false', () => {
       component.isSelectionModeEnabled = false;
       fixture.detectChanges();
       const ionColEl = getElementBySelector(fixture, '.loading-screen-container--content-block');
-      expect(getElementAttributeValue(ionColEl, 'size')).toBe('6');
+      expect(getElementAttributeValue(ionColEl, 'size')).toBe('7.0');
     });
   });
 });
diff --git a/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.ts b/src/app/shared/components/fy-loading-screen/fy-loading-screen.component.ts
@@ -8,9 +8,6 @@ import { Component, OnInit, Input } from '@angular/core';
 export class FyLoadingScreenComponent implements OnInit {
   @Input() isSelectionModeEnabled: boolean;
 
-  // TODO: Remove `isLegacyLoaderEnabled` input property once all list views are updated to the new designs as per the 'display_exact_amount_on_stats' specification.
-  @Input() isNewLoaderEnabled?: boolean;
-
   rows = [1, 2, 3, 4, 5];
 
   ngOnInit(): void {