Merge pull request #321 from PermanentOrg/PER-9385-long-titles-should…

…-expand Per 9385 long titles should expand on public archive full screen view
PermanentOrg · Nov 13, 2023 · bde2255 · bde2255
2 parents 5d0d4b3 + 1bb15de
commit bde2255
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 40 deletions.
diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.html b/src/app/file-browser/components/file-viewer/file-viewer.component.html
@@ -65,6 +65,7 @@
     <div class="file-viewer-metadata">
       <pr-inline-value-edit
         [displayValue]="currentRecord.displayName"
+        [isPublicArchive]="isPublicArchive"
         [itemId]="currentRecord.folder_linkId"
         [canEdit]="canEdit"
         [required]="true"

diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.html b/src/app/shared/components/inline-value-edit/inline-value-edit.component.html
@@ -24,6 +24,9 @@
           [class.is-editing]="isEditing"
           [class.inline-value-text-with-border]="displayBorder"
           [class.showing-empty-message]="!displayValue && emptyMessage"
+          [class.is-name-hovered]="isNameHovered && isPublicArchive"
+          (mouseenter)="isNameHovered = true"
+          (mouseleave)="isNameHovered = false"
         >
           <span [ngClass]="extraClasses">{{
             displayValue ||

diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.scss b/src/app/shared/components/inline-value-edit/inline-value-edit.component.scss
@@ -29,7 +29,8 @@ form {
   }
 }
 
-.inline-value-display, select {
+.inline-value-display,
+select {
   width: calc(100% + #{2 * $inline-padding-x});
   height: auto;
   background-color: white;
@@ -93,7 +94,7 @@ select {
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &-with-border{
+  &-with-border {
     border: 1px solid $input-border-color;
     border-radius: $border-radius;
   }
@@ -103,6 +104,12 @@ select {
   }
 }
 
+.is-name-hovered {
+  overflow: visible;
+  text-overflow: initial;
+  white-space: initial;
+}
+
 .inline-value-select {
   &.showing-empty-message {
     select {
@@ -129,7 +136,8 @@ div.form-control {
 }
 
 .inline-value-container {
-  & > input, & > textarea {
+  & > input,
+  & > textarea {
     position: absolute;
     top: 0px;
     left: -1 * $inline-padding-x;
@@ -150,14 +158,17 @@ div.form-control {
 
 .inline-value-container {
   &.can-edit {
-    .inline-value-display, select {
+    .inline-value-display,
+    select {
       cursor: pointer;
       &:hover {
         border-color: rgba($input-border-color, 0.75);
       }
     }
 
-    & > input, & > textarea, & > select {
+    & > input,
+    & > textarea,
+    & > select {
       display: initial;
     }
   }
@@ -188,14 +199,18 @@ div.form-control {
 }
 
 :host.always-show {
-  .inline-value-display, select {
+  .inline-value-display,
+  select {
     border-color: rgba($input-border-color, 0.75);
   }
 }
 
-input, select, textarea {
+input,
+select,
+textarea {
   &.ng-invalid {
-    &.ng-touched, &.ng-dirty {
+    &.ng-touched,
+    &.ng-dirty {
       background-color: rgba($danger, 0.2);
       border-color: $danger !important;
     }
@@ -206,15 +221,14 @@ input, select, textarea {
   padding: 0;
 }
 
-
-.description-textarea{
-  &.can-edit{
-    .description-textarea-value{
+.description-textarea {
+  &.can-edit {
+    .description-textarea-value {
       cursor: pointer;
       border: 1px solid transparent;
       &:hover {
         border: 1px solid rgba($input-border-color, 0.75);
       }
     }
   }
-}
+}
diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts
@@ -1,13 +1,31 @@
-import { ComponentFixture, TestBed, tick, fakeAsync, waitForAsync } from '@angular/core/testing';
+/* @format */
+import {
+  ComponentFixture,
+  TestBed,
+  tick,
+  fakeAsync,
+  waitForAsync,
+} from '@angular/core/testing';
 
 import { By } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { NgbDatepickerModule, NgbTimepickerModule, NgbDate, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbDatepickerModule,
+  NgbTimepickerModule,
+  NgbDate,
+  NgbTimeStruct,
+} from '@ng-bootstrap/ng-bootstrap';
 import { SharedModule } from '@shared/shared.module';
 
 import { moment } from 'vis-timeline/standalone';
 import { RecordVO, RecordVOData } from '@models';
-import { getOffsetMomentFromDTString, formatDateISOString, getUtcMomentFromDTString, momentFormatNum, applyTimezoneOffset } from '@shared/utilities/dateTime';
+import {
+  getOffsetMomentFromDTString,
+  formatDateISOString,
+  getUtcMomentFromDTString,
+  momentFormatNum,
+  applyTimezoneOffset,
+} from '@shared/utilities/dateTime';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { InlineValueEditComponent } from './inline-value-edit.component';
 
@@ -17,22 +35,19 @@ describe('InlineValueEditComponent', () => {
 
   const TEST_TEXT = 'Test Name';
 
-  const mockDatePicker = {
-
-  };
+  const mockDatePicker = {};
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ InlineValueEditComponent ],
+      declarations: [InlineValueEditComponent],
       imports: [
         FormsModule,
         NgbDatepickerModule,
         NgbTimepickerModule,
         NoopAnimationsModule,
-        SharedModule
-      ]
-    })
-    .compileComponents();
+        SharedModule,
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -53,7 +68,9 @@ describe('InlineValueEditComponent', () => {
   });
 
   it('should start editing with click', fakeAsync(() => {
-    const displayElement = fixture.debugElement.query(By.css('.inline-value-display'));
+    const displayElement = fixture.debugElement.query(
+      By.css('.inline-value-display')
+    );
     displayElement.triggerEventHandler('click', null);
     tick();
     expect(component.isEditing).toBeTruthy();
@@ -101,14 +118,17 @@ describe('InlineValueEditComponent', () => {
     component.displayValue = null;
     component.startEdit();
 
-    const inputElem = component.inputElementRef.nativeElement as HTMLInputElement;
+    const inputElem = component.inputElementRef
+      .nativeElement as HTMLInputElement;
     expect(document.activeElement).toBe(inputElem);
     inputElem.value = 'new value!';
 
     fixture.detectChanges();
 
     const rootElement = fixture.debugElement.nativeElement as HTMLElement;
-    const cancelButton = rootElement.querySelector('button[name=cancel]') as HTMLButtonElement;
+    const cancelButton = rootElement.querySelector(
+      'button[name=cancel]'
+    ) as HTMLButtonElement;
     cancelButton.dispatchEvent(new Event('mousedown'));
 
     fixture.detectChanges();
@@ -117,7 +137,6 @@ describe('InlineValueEditComponent', () => {
       expect(onBlurSpy).toHaveBeenCalledTimes(1);
       expect(doneEditingSpy).not.toHaveBeenCalled();
     });
-
   });
 
   it('should not allow editing if canEdit is false', async () => {
@@ -153,7 +172,7 @@ describe('InlineValueEditComponent', () => {
         dstOffset: '-07:00',
         stdAbbrev: 'PST',
         stdOffset: '-08:00',
-      }
+      },
     };
     const record = new RecordVO(voData);
     component.item = record;
@@ -163,7 +182,10 @@ describe('InlineValueEditComponent', () => {
 
     component.startEdit();
 
-    const offset = getOffsetMomentFromDTString(record.displayDT, record.TimezoneVO);
+    const offset = getOffsetMomentFromDTString(
+      record.displayDT,
+      record.TimezoneVO
+    );
 
     expect(component.ngbDate).toBeDefined();
     expect(component.ngbDate.day).toBe(momentFormatNum(offset, 'D'));
@@ -180,7 +202,7 @@ describe('InlineValueEditComponent', () => {
         dstOffset: '-07:00',
         stdAbbrev: 'PST',
         stdOffset: '-08:00',
-      }
+      },
     };
     const record = new RecordVO(voData);
     component.item = record;
@@ -229,7 +251,7 @@ describe('InlineValueEditComponent', () => {
         dstOffset: '-07:00',
         stdAbbrev: 'PST',
         stdOffset: '-08:00',
-      }
+      },
     };
     const record = new RecordVO(voData);
     component.item = record;
@@ -239,11 +261,14 @@ describe('InlineValueEditComponent', () => {
 
     component.startEdit();
 
-    const offset = getOffsetMomentFromDTString(record.displayDT, record.TimezoneVO);
+    const offset = getOffsetMomentFromDTString(
+      record.displayDT,
+      record.TimezoneVO
+    );
 
     expect(component.ngbTime.hour).toBe(momentFormatNum(offset, 'H'));
 
-    const newDate = NgbDate.from({year: 2017, month: 5, day: 10});
+    const newDate = NgbDate.from({ year: 2017, month: 5, day: 10 });
     component.datePicker.dateSelect.emit(newDate);
 
     const utcDt = getUtcMomentFromDTString(component.editValue as string);
@@ -261,7 +286,7 @@ describe('InlineValueEditComponent', () => {
         dstOffset: '-07:00',
         stdAbbrev: 'PST',
         stdOffset: '-08:00',
-      }
+      },
     };
     const record = new RecordVO(voData);
     component.item = record;
@@ -285,7 +310,7 @@ describe('InlineValueEditComponent', () => {
         dstOffset: '-07:00',
         stdAbbrev: 'PST',
         stdOffset: '-08:00',
-      }
+      },
     };
     const record = new RecordVO(voData);
     component.item = record;
@@ -328,7 +353,7 @@ describe('InlineValueEditComponent', () => {
         dstOffset: '-07:00',
         stdAbbrev: 'PST',
         stdOffset: '-08:00',
-      }
+      },
     };
     const record = new RecordVO(voData);
     component.item = record;
@@ -338,14 +363,17 @@ describe('InlineValueEditComponent', () => {
 
     component.startEdit();
 
-    const offset = getOffsetMomentFromDTString(record.displayDT, record.TimezoneVO);
+    const offset = getOffsetMomentFromDTString(
+      record.displayDT,
+      record.TimezoneVO
+    );
 
     expect(component.ngbDate.day).toBe(momentFormatNum(offset, 'D'));
 
     const newTime: NgbTimeStruct = {
       hour: 8,
       minute: 30,
-      second: 58
+      second: 58,
     };
 
     component.ngbTime = newTime;
@@ -357,4 +385,19 @@ describe('InlineValueEditComponent', () => {
     expect(Number(utcDt.format('D'))).toEqual(13);
     expect(Number(utcDt.format('h'))).toEqual(3);
   });
+
+  it('should expand the title when hovering with the mouse over it', async () => {
+    component.type = 'text';
+    component.isPublicArchive = true;
+    fixture.detectChanges();
+
+    const nameContainer = fixture.debugElement.query(
+      By.css('.inline-value-text')
+    ).nativeElement;
+    nameContainer.dispatchEvent(new Event('mouseenter'));
+    fixture.detectChanges();
+
+    await fixture.whenStable();
+    expect(nameContainer.classList).toContain('is-name-hovered');
+  });
 });
diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts
@@ -1,3 +1,4 @@
+/* @format */
 import {
   Component,
   OnInit,
@@ -46,7 +47,7 @@ type ValueType = string | number;
   animations: [ngIfScaleAnimation, collapseAnimation],
 })
 export class InlineValueEditComponent implements OnInit, OnChanges {
-  @Input() displayBorder:boolean = false;
+  @Input() displayBorder: boolean = false;
   @Input() displayValue: ValueType;
   @Input() type: InlineValueEditType = 'text';
   @Input() emptyMessage: string;
@@ -64,6 +65,7 @@ export class InlineValueEditComponent implements OnInit, OnChanges {
   @Input() selectOptions: FormInputSelectOption[];
   @Input() dateOnly = false;
   @Input() class: string;
+  @Input() isPublicArchive = false;
 
   @HostBinding('class.horizontal-controls') @Input() horizontalControls = false;
   @HostBinding('class.always-show') @Input() alwaysShow = false;
@@ -84,6 +86,7 @@ export class InlineValueEditComponent implements OnInit, OnChanges {
   ngbTime: NgbTimeStruct;
   ngbDate: NgbDate;
   maxNgbDate: NgbDateStruct;
+  isNameHovered = false;
 
   public extraClasses: string[];