Merge pull request #1506 from sultanmyrza/feature-add-icon-to-indicat…

…e-capture-with-caption feat: add icon to indicate capture with caption
numbersprotocol · Apr 14, 2022 · 9f1b99c · 9f1b99c
2 parents 3aa077f + c4dd34f
commit 9f1b99c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 19 deletions.
diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.html b/src/app/features/home/capture-tab/capture-item/capture-item.component.html
@@ -6,17 +6,26 @@
   name="hourglass-outline"
   class="collecting"
 ></ion-icon>
-<ion-icon
-  *ngIf="hasUploaded$ | ngrxPush"
-  src="/assets/images/media-id.svg"
-  class="uploaded"
->
-</ion-icon>
-<ion-icon
-  *ngIf="hasGeolocation$ | ngrxPush"
-  src="/assets/images/location.svg"
-  class="located"
-></ion-icon>
+
+<div class="bottom-left-icons">
+  <ion-icon
+    *ngIf="hasUploaded$ | ngrxPush"
+    src="/assets/images/media-id.svg"
+    class="uploaded"
+  >
+  </ion-icon>
+  <ion-icon
+    *ngIf="hasGeolocation$ | ngrxPush"
+    src="/assets/images/location.svg"
+    class="located"
+  ></ion-icon>
+  <ion-icon
+    *ngIf="hasCaption$ | ngrxPush"
+    name="document-text-outline"
+    class="with-caption"
+  ></ion-icon>
+</div>
+
 <ion-icon
   *ngIf="isVideo$ | ngrxPush"
   name="videocam"

diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.scss b/src/app/features/home/capture-tab/capture-item/capture-item.component.scss
@@ -34,16 +34,30 @@ ion-icon.collecting {
   font-size: 24px;
 }
 
-ion-icon.uploaded {
+.bottom-left-icons {
   bottom: 9px;
   left: 5px;
-  font-size: 13px;
-}
+  position: absolute;
+  display: flex;
 
-ion-icon.located {
-  bottom: 8px;
-  left: 23px;
-  font-size: 16px;
+  ion-icon.uploaded {
+    position: relative;
+    font-size: 13px;
+  }
+
+  ion-icon.located {
+    left: 4px;
+    bottom: 2px;
+    position: relative;
+    font-size: 16px;
+  }
+
+  ion-icon.with-caption {
+    left: 6px;
+    bottom: 1px;
+    position: relative;
+    font-size: 14px;
+  }
 }
 
 ion-icon.is-video {

diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.ts b/src/app/features/home/capture-tab/capture-item/capture-item.component.ts
@@ -13,6 +13,7 @@ import {
   switchMap,
 } from 'rxjs/operators';
 import { CaptureService } from '../../../../shared/capture/capture.service';
+import { DiaBackendAssetRepository } from '../../../../shared/dia-backend/asset/dia-backend-asset-repository.service';
 import { getOldProof } from '../../../../shared/repositories/proof/old-proof-adapter';
 import { Proof } from '../../../../shared/repositories/proof/proof';
 import { normalizeGeolocation } from '../../details/information/session/information-session.service';
@@ -70,6 +71,11 @@ export class CaptureItemComponent {
     )
   );
 
+  readonly hasCaption$ = this.proof$.pipe(
+    switchMap(proof => this.diaBackendAssetRepository.fetchByProof$(proof)),
+    map(asset => asset.caption !== '')
+  );
+
   readonly isVideo$ = this.proof$.pipe(
     concatMap(proof => proof.getFirstAssetMeta()),
     map(meta => meta.mimeType.startsWith('video'))
@@ -81,7 +87,8 @@ export class CaptureItemComponent {
     private readonly captureService: CaptureService,
     private readonly router: Router,
     private readonly route: ActivatedRoute,
-    private readonly sanitizer: DomSanitizer
+    private readonly sanitizer: DomSanitizer,
+    private readonly diaBackendAssetRepository: DiaBackendAssetRepository
   ) {}
 
   @HostListener('click')