Merge pull request #497 from PermanentOrg/familysearch-modal-fix

Add background to FamilySearch Import Modal
PermanentOrg · Dec 5, 2024 · 42fbea4 · 42fbea4
2 parents dd219e5 + ce9c5cb
commit 42fbea4
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 33 deletions.
diff --git a/src/app/apps/components/family-search-import/family-search-import.component.html b/src/app/apps/components/family-search-import/family-search-import.component.html
@@ -2,72 +2,94 @@
   <div class="dialog-body">
     <div class="page-title">Select Person(s) To Import</div>
     <p>
-      <span>Choose members of your family tree to create Permanent Archives for:</span>
+      <span
+        >Choose members of your family tree to create Permanent Archives
+        for:</span
+      >
     </p>
-    <div class="family-member" *ngFor="let family of familyMembers">  
-      <div class="select" [ngClass]="{'exists': family.permExists}">
-        <label>
-          <input type="checkbox" [(ngModel)]="family.isSelected" [disabled]="family.permExists">
-          <div class="select-active" *ngIf="family.isSelected"></div>
-        </label>
-      </div>
-      <div class="family-name">
-        {{family.display.name}} 
-      </div>
-      <div class="family-birth">
-        <em *ngIf="!family.permExists">{{family.display.lifespan}}</em>
-        <em *ngIf="family.permExists">Imported</em>
+    <div class="family-member-list">
+      <div class="family-member" *ngFor="let family of familyMembers">
+        <div class="select" [ngClass]="{ exists: family.permExists }">
+          <label>
+            <input
+              type="checkbox"
+              [(ngModel)]="family.isSelected"
+              [disabled]="family.permExists"
+            />
+            <div class="select-active" *ngIf="family.isSelected"></div>
+          </label>
+        </div>
+        <div class="family-name">
+          {{ family.display.name }}
+        </div>
+        <div class="family-birth">
+          <em *ngIf="!family.permExists">{{ family.display.lifespan }}</em>
+          <em *ngIf="family.permExists">Imported</em>
+        </div>
       </div>
     </div>
   </div>
   <div class="dialog-footer">
     <button class="btn btn-secondary" (click)="cancel()">Cancel</button>
-    <button class="btn btn-primary" (click)="stage = 'memories'"
-      [disabled]="!getSelectedCount()">Next</button>
+    <button
+      class="btn btn-primary"
+      (click)="stage = 'memories'"
+      [disabled]="!getSelectedCount()"
+    >
+      Next
+    </button>
   </div>
 </div>
 <div class="dialog-content" *ngIf="stage === 'memories'">
   <div class="dialog-body">
     <div class="page-title">Import Memories</div>
     <p>
-      <span>Any FamilySearch Memories associated with the selected Persons can be imported to the matching Permanent Archive</span>
+      <span
+        >Any FamilySearch Memories associated with the selected Persons can be
+        imported to the matching Permanent Archive</span
+      >
     </p>
     <div class="select-options">
       <div class="select-option">
         <div class="select">
           <label>
-            <input type="radio" [(ngModel)]="importMemories" value="yes">
+            <input type="radio" [(ngModel)]="importMemories" value="yes" />
             <div class="select-active" *ngIf="importMemories === 'yes'"></div>
           </label>
         </div>
-        <div class="select-label">
-          Yes, import Memories
-        </div>
+        <div class="select-label">Yes, import Memories</div>
       </div>
       <div class="select-option">
         <div class="select">
           <label>
-            <input type="radio" [(ngModel)]="importMemories" value="no">
+            <input type="radio" [(ngModel)]="importMemories" value="no" />
             <div class="select-active" *ngIf="importMemories === 'no'"></div>
           </label>
         </div>
-        <div class="select-label">
-            No, don't import Memories
-          </div>
+        <div class="select-label">No, don't import Memories</div>
       </div>
     </div>
     <p>
-      After import, selected Persons will have new Permanent Archives available to start curating and contributing to.
+      After import, selected Persons will have new Permanent Archives available
+      to start curating and contributing to.
     </p>
   </div>
   <div class="dialog-footer">
-    <button class="btn btn-secondary" (click)="cancel()" [disabled]="waiting">Cancel</button>
-    <button class="btn btn-primary" (click)="startImport()" [disabled]="waiting">Import Family Tree</button>
+    <button class="btn btn-secondary" (click)="cancel()" [disabled]="waiting">
+      Cancel
+    </button>
+    <button
+      class="btn btn-primary"
+      (click)="startImport()"
+      [disabled]="waiting"
+    >
+      Import Family Tree
+    </button>
   </div>
 </div>
 <div class="dialog-content" *ngIf="stage === 'importing'">
   <div class="dialog-body">
-    <div class="page-title">Importing {{getSelectedCount()}} person(s)</div>
+    <div class="page-title">Importing {{ getSelectedCount() }} person(s)</div>
     <p>
       <span>Do not close your browser your refresh this window.</span>
     </p>
@@ -76,8 +98,11 @@
     </div>
   </div>
   <div class="dialog-footer">
-    <button class="btn btn-secondary" (click)="cancel()" [disabled]="waiting">Cancel</button>
-    <button class="btn btn-primary" [disabled]="waiting">Import Family Tree</button>
+    <button class="btn btn-secondary" (click)="cancel()" [disabled]="waiting">
+      Cancel
+    </button>
+    <button class="btn btn-primary" [disabled]="waiting">
+      Import Family Tree
+    </button>
   </div>
 </div>
-
diff --git a/src/app/apps/components/family-search-import/family-search-import.component.scss b/src/app/apps/components/family-search-import/family-search-import.component.scss
@@ -1,5 +1,15 @@
 @import 'variables';
 
+.dialog-content {
+  background: #fff;
+  padding: 1em;
+}
+
+.family-member-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
 .family-member {
   display: flex;
   height: 50px;
@@ -74,4 +84,4 @@ p {
 .import-spinner {
   position: relative;
   height: 120px;
-}
+}