From 086eac69a863e7a60e3f2f175e57d8e0f8e6dc42 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:42:23 +0200 Subject: [PATCH 1/7] PER-8400-toggle-person-info-public-archive PER-8400-toggle-person-info-public-archive Added a chevron that expands the profile information on mobile devices. --- .../public-archive.component.html | 50 ++++++++++- .../public-archive.component.scss | 38 +++++++- .../public-archive.component.spec.ts | 88 +++++++++++++------ .../public-archive.component.ts | 5 ++ src/app/public/public.module.ts | 10 ++- 5 files changed, 160 insertions(+), 31 deletions(-) diff --git a/src/app/public/components/public-archive/public-archive.component.html b/src/app/public/components/public-archive/public-archive.component.html index b7d369301..becf076c4 100644 --- a/src/app/public/components/public-archive/public-archive.component.html +++ b/src/app/public/components/public-archive/public-archive.component.html @@ -26,8 +26,24 @@ }" >
+<<<<<<< HEAD
The {{ this.archive.fullName }} Archive
+======= +
+ The {{ this.archive.fullName }} Archive + +
+
+>>>>>>> 86e0bd3d (PER-8400-toggle-person-info-public-archive)
- {{ this.profileItems.blurb[0].string1 }} +
+ {{ this.profileItems.blurb[0].string1 }} +
+ + + {{ showShortText ? ' See More' : ' See Less' }} +
+<<<<<<< HEAD {{ showShortText ? ' See More' : ' See Less' }} +======= +>>>>>>> 86e0bd3d (PER-8400-toggle-person-info-public-archive)
diff --git a/src/app/public/components/public-archive/public-archive.component.scss b/src/app/public/components/public-archive/public-archive.component.scss index 2cfd5a4d7..4f56b99b7 100644 --- a/src/app/public/components/public-archive/public-archive.component.scss +++ b/src/app/public/components/public-archive/public-archive.component.scss @@ -93,7 +93,7 @@ $desktop-size: pxToGrid(200px); font-family: 'Usual'; @include beforeDesktop { - font-size: $font-size-base * 1.5; + font-size: $font-size-base; } } @@ -195,6 +195,16 @@ $desktop-size: pxToGrid(200px); .profile-description { white-space: pre-line; + + @include beforeDesktop { + display: none; + } + + &-show { + @include beforeDesktop { + display: block; + } + } } .search-box-public-archive { @@ -387,3 +397,29 @@ $desktop-size: pxToGrid(200px); cursor: pointer; color: gray; } + +.icon-expand { + display: none; + + @include beforeDesktop { + display: inline-block; + font-size: $mat-icon-sm; + transition: transform 250ms $tweaked-ease; + cursor: pointer; + &.reverse { + transform: rotate(180deg); + } + } +} + +.profile-info { + @include beforeDesktop { + display: none; + } + + &-show { + @include beforeDesktop { + display: block; + } + } +} diff --git a/src/app/public/components/public-archive/public-archive.component.spec.ts b/src/app/public/components/public-archive/public-archive.component.spec.ts index 432203ad7..42f9c7223 100644 --- a/src/app/public/components/public-archive/public-archive.component.spec.ts +++ b/src/app/public/components/public-archive/public-archive.component.spec.ts @@ -1,25 +1,63 @@ -// import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -// import { PublicArchiveComponent } from './public-archive.component'; - -// describe('PublicArchiveComponent', () => { -// let component: PublicArchiveComponent; -// let fixture: ComponentFixture; - -// beforeEach(async(() => { -// TestBed.configureTestingModule({ -// declarations: [ PublicArchiveComponent ] -// }) -// .compileComponents(); -// })); - -// beforeEach(() => { -// fixture = TestBed.createComponent(PublicArchiveComponent); -// component = fixture.componentInstance; -// fixture.detectChanges(); -// }); - -// it('should create', () => { -// expect(component).toBeTruthy(); -// }); -// }); +/* @format */ +import { waitForAsync } from '@angular/core/testing'; +import { PublicModule } from '@public/public.module'; +import { Shallow } from 'shallow-render'; +import { of } from 'rxjs'; +import { PublicProfileService } from '@public/services/public-profile/public-profile.service'; +import { PublicArchiveComponent } from './public-archive.component'; + +const publicProfileServiceMock = { + publicRoot$: () => of({}), + archive$: () => of({}), + profileItemsDictionary$: () => of({}), +}; + +describe('PublicArchiveComponent', () => { + let shallow: Shallow; + + beforeEach(waitForAsync(() => { + shallow = new Shallow(PublicArchiveComponent, PublicModule).provideMock({ + provide: PublicProfileService, + useValue: publicProfileServiceMock, + }); + })); + + it('should create', async () => { + const { instance } = await shallow.render(); + expect(instance).toBeTruthy(); + }); + + it('should have the information hidden as default', async () => { + const { instance } = await shallow.render(); + expect(instance.showProfileInformation).toBe(false); + }); + + it('should have the information shown when the button is clicked', async () => { + const { instance, find } = await shallow.render(); + const icon = find('.icon-expand'); + icon.nativeElement.click(); + expect(instance.showProfileInformation).toBe(true); + }); + + it('should give the correct classes when expanding the information', async () => { + const { find, fixture, instance } = await shallow.render(); + const icon = find('.icon-expand'); + icon.nativeElement.click(); + + fixture.detectChanges(); + + expect(find('.profile-description').classes).toEqual({ + 'profile-description': true, + 'profile-description-show': true, + }); + + instance.isViewingProfile$ = of(true); + + fixture.detectChanges(); + + expect(find('.profile-info').classes).toEqual({ + 'profile-info': true, + 'profile-info-show': true, + }); + }); +}); diff --git a/src/app/public/components/public-archive/public-archive.component.ts b/src/app/public/components/public-archive/public-archive.component.ts index a077740b4..127909cbf 100644 --- a/src/app/public/components/public-archive/public-archive.component.ts +++ b/src/app/public/components/public-archive/public-archive.component.ts @@ -31,6 +31,7 @@ export class PublicArchiveComponent implements OnInit, OnDestroy { shortText = ''; emails: string[] = []; websites: string[] = []; + showProfileInformation: boolean = false; waiting = true; @@ -125,4 +126,8 @@ export class PublicArchiveComponent implements OnInit, OnDestroy { toggleShowFullText(): void { this.showShortText = !this.showShortText; } + + toggleProfileInformation(): void { + this.showProfileInformation = !this.showProfileInformation; + } } diff --git a/src/app/public/public.module.ts b/src/app/public/public.module.ts index e7ea22203..6ef05a5d1 100644 --- a/src/app/public/public.module.ts +++ b/src/app/public/public.module.ts @@ -1,3 +1,4 @@ +/* @format */ import { NgModule, Optional, ComponentFactoryResolver } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; @@ -5,7 +6,12 @@ import { FaIconLibrary, FontAwesomeModule, } from '@fortawesome/angular-fontawesome'; -import { faSearch, faTimesCircle } from '@fortawesome/free-solid-svg-icons'; +import { + faSearch, + faTimesCircle, + faChevronDown, + faChevronUp, +} from '@fortawesome/free-solid-svg-icons'; import { DataService } from '@shared/services/data/data.service'; import { FolderViewService } from '@shared/services/folder-view/folder-view.service'; import { FileBrowserModule } from '@fileBrowser/file-browser.module'; @@ -53,7 +59,7 @@ import { PublicSearchResultsComponent } from './components/public-search-results }) export class PublicModule { constructor(folderView: FolderViewService, private library: FaIconLibrary) { - this.library.addIcons(faSearch, faTimesCircle); + this.library.addIcons(faSearch, faTimesCircle, faChevronDown, faChevronUp); folderView.setFolderView(FolderView.Grid, true); } } From e1fd9bf68255cff5890ac341289187875dee078e Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 7 Dec 2023 01:57:00 +0200 Subject: [PATCH 2/7] Fix conflict --- .../public-archive.component.html | 28 ------------------- 1 file changed, 28 deletions(-) diff --git a/src/app/public/components/public-archive/public-archive.component.html b/src/app/public/components/public-archive/public-archive.component.html index becf076c4..ca5baeb55 100644 --- a/src/app/public/components/public-archive/public-archive.component.html +++ b/src/app/public/components/public-archive/public-archive.component.html @@ -26,10 +26,6 @@ }" >
-<<<<<<< HEAD -
The {{ this.archive.fullName }} Archive
-
-=======
The {{ this.archive.fullName }} Archive ->>>>>>> 86e0bd3d (PER-8400-toggle-person-info-public-archive) - - {{ showShortText ? ' See More' : ' See Less' }} - -======= ->>>>>>> 86e0bd3d (PER-8400-toggle-person-info-public-archive)
From 7a3b5113e20bdcf9c91619e3cfa89190466061c3 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Mon, 15 Jan 2024 13:18:51 +0200 Subject: [PATCH 3/7] PER-8400-toggle-person-info Hide the dropdown icon for the public profile, displaying the information at all times. --- .../components/public-archive/public-archive.component.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/public/components/public-archive/public-archive.component.html b/src/app/public/components/public-archive/public-archive.component.html index ca5baeb55..70909eabb 100644 --- a/src/app/public/components/public-archive/public-archive.component.html +++ b/src/app/public/components/public-archive/public-archive.component.html @@ -33,6 +33,7 @@ class="icon-expand" [class.reverse]="showProfileInformation" [icon]="['fas', 'chevron-down']" + *ngIf="!(isViewingProfile$ | async)" >
View Public Archive View Public Profile Date: Mon, 22 Jan 2024 13:42:37 +0200 Subject: [PATCH 4/7] PER-8400 Fix 'see more' issue on mobile by creating an alternate css class. --- .../public-archive.component.html | 9 +++------ .../public-archive.component.scss | 18 +++++------------- .../public-archive/public-archive.component.ts | 2 +- 3 files changed, 9 insertions(+), 20 deletions(-) diff --git a/src/app/public/components/public-archive/public-archive.component.html b/src/app/public/components/public-archive/public-archive.component.html index 70909eabb..482f8cf36 100644 --- a/src/app/public/components/public-archive/public-archive.component.html +++ b/src/app/public/components/public-archive/public-archive.component.html @@ -37,8 +37,8 @@ >
-
+
Date: Mon, 22 Jan 2024 13:43:42 +0200 Subject: [PATCH 5/7] revert character limit --- .../components/public-archive/public-archive.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/public/components/public-archive/public-archive.component.ts b/src/app/public/components/public-archive/public-archive.component.ts index 3bc1561db..127909cbf 100644 --- a/src/app/public/components/public-archive/public-archive.component.ts +++ b/src/app/public/components/public-archive/public-archive.component.ts @@ -27,7 +27,7 @@ export class PublicArchiveComponent implements OnInit, OnDestroy { description: string; searchResults: any[] = []; showShortText = true; - characterLimit = 10; + characterLimit = 100; shortText = ''; emails: string[] = []; websites: string[] = []; From 90967109621233e0ab40513274c57190bf31c1b3 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 25 Jan 2024 10:38:54 +0200 Subject: [PATCH 6/7] linting --- .../components/public-archive/public-archive.component.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/public/components/public-archive/public-archive.component.spec.ts b/src/app/public/components/public-archive/public-archive.component.spec.ts index 42f9c7223..b702bd366 100644 --- a/src/app/public/components/public-archive/public-archive.component.spec.ts +++ b/src/app/public/components/public-archive/public-archive.component.spec.ts @@ -24,11 +24,13 @@ describe('PublicArchiveComponent', () => { it('should create', async () => { const { instance } = await shallow.render(); + expect(instance).toBeTruthy(); }); it('should have the information hidden as default', async () => { const { instance } = await shallow.render(); + expect(instance.showProfileInformation).toBe(false); }); @@ -36,6 +38,7 @@ describe('PublicArchiveComponent', () => { const { instance, find } = await shallow.render(); const icon = find('.icon-expand'); icon.nativeElement.click(); + expect(instance.showProfileInformation).toBe(true); }); From d61a5314f38967d6dd51e8be2d6578ead0acd954 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 25 Jan 2024 10:45:36 +0200 Subject: [PATCH 7/7] fixed test. --- .../public-archive.component.spec.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/app/public/components/public-archive/public-archive.component.spec.ts b/src/app/public/components/public-archive/public-archive.component.spec.ts index b702bd366..203a9a4d7 100644 --- a/src/app/public/components/public-archive/public-archive.component.spec.ts +++ b/src/app/public/components/public-archive/public-archive.component.spec.ts @@ -49,18 +49,9 @@ describe('PublicArchiveComponent', () => { fixture.detectChanges(); - expect(find('.profile-description').classes).toEqual({ - 'profile-description': true, - 'profile-description-show': true, - }); - - instance.isViewingProfile$ = of(true); - - fixture.detectChanges(); - - expect(find('.profile-info').classes).toEqual({ - 'profile-info': true, - 'profile-info-show': true, + expect(find('.archive-description').classes).toEqual({ + 'archive-description': true, + 'archive-description-show': true, }); }); });