From 8cbb0b66fd99a8eca31d60a878878d52af16af35 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 13 Feb 2023 19:03:46 -0500 Subject: [PATCH] cleanup user profile --- .../view-profile/view-profile.component.html | 218 ++++++++++-------- .../view-profile/view-profile.component.scss | 119 ++++------ .../view-profile.component.spec.ts | 1 - .../view-profile/view-profile.component.ts | 52 +---- .../view-profile/view-profile.module.ts | 3 +- 5 files changed, 167 insertions(+), 226 deletions(-) diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html index d0d88668a..091276648 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html @@ -1,138 +1,160 @@
-
-
- -

{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}

-
+
+ +

{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}

-
+ +
- - {{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}} + + {{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}} +

{{'APP.EDIT_PROFILE.GENERAL' | translate}}

-
- + +
+
-
- - +
+ +
- -
-
-
-

{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}

-

{{personDetails?.firstName}}

-
- -
-

{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}

-

{{personDetails?.lastName}}

-
- -
-

{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}

-

{{personDetails?.jobTitle}}

- -
- -
-

{{'APP.EDIT_PROFILE.LOCATION' | translate}}

-

{{personDetails?.location}}

- -
- -
-

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

-

{{personDetails?.telephone}}

- - - {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} - -
- -
-

{{'APP.EDIT_PROFILE.MOBILE' | translate}}

-

{{personDetails?.mobile}}

- - + + + +
+
+

{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}

+

{{personDetails?.firstName}}

+
+ + + +
+

{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}

+

{{personDetails?.lastName}}

+
+ + + +
+

{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}

+

{{personDetails?.jobTitle}}

+ +
+ + + +
+

{{'APP.EDIT_PROFILE.LOCATION' | translate}}

+

{{personDetails?.location}}

+ +
+ + + +
+

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

+

{{personDetails?.telephone}}

+ + {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} -
+
+ + + +
+

{{'APP.EDIT_PROFILE.MOBILE' | translate}}

+

{{personDetails?.mobile}}

+ + + {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} +
-
-
+
+
- + {{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}

{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}

-
- +
+
-
- - +
+ +
- + + +
-

{{'APP.EDIT_PROFILE.NAME' | translate}}

-

{{personDetails?.company?.organization}}

- +

{{'APP.EDIT_PROFILE.NAME' | translate}}

+

{{personDetails?.company?.organization}}

+
- + + +
-

{{'APP.EDIT_PROFILE.ADDRESS' | translate}}

-

{{personDetails?.company?.address1}}

- +

{{'APP.EDIT_PROFILE.ADDRESS' | translate}}

+

{{personDetails?.company?.address1}}

+
- + + +
-

{{'APP.EDIT_PROFILE.POSTCODE' | translate}}

-

{{personDetails?.company?.postcode}}

- +

{{'APP.EDIT_PROFILE.POSTCODE' | translate}}

+

{{personDetails?.company?.postcode}}

+
- + + +
-

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

-

{{personDetails?.company?.telephone}}

- +

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

+

{{personDetails?.company?.telephone}}

+ {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
- + + +
-

{{'APP.EDIT_PROFILE.EMAIL' | translate}}

-

{{personDetails?.company?.email}}

- +

{{'APP.EDIT_PROFILE.EMAIL' | translate}}

+

{{personDetails?.company?.email}}

+ {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss index 5758249c7..56817ab33 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss @@ -1,6 +1,15 @@ -app-view-profile { +.app-view-profile { letter-spacing: .5px; + .app-profile-actions { + display: flex; + + button { + margin: 1rem; + margin-left: 0; + } + } + .app-profile-container { overflow: scroll; height: 100%; @@ -21,47 +30,27 @@ app-view-profile { align-items: center; height: 32px; padding: 0 24px; + width: 100%; + height: 32px; + padding: 32px 0; + border-bottom: 1px solid var(--theme-header-border-color); } - .app-profile { - cursor: pointer; - margin-top: 1rem; - - } - - .app-profile-general-row { + .app-profile-row { margin: 2rem 0 0 2rem; width: 70%; border: 1px solid var(--theme-grey-background-color); border-radius: 1rem; } - .app-profile-icon { - margin-right: 1rem; - cursor: pointer; - } - - .app-profile-general-icon { - cursor: pointer; - } - - .app-profile-text { - letter-spacing: .5px; - } - .app-profile-general { display: flex; padding-left: 1rem; } - .app-profile-general-bottom-radius { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .app-profile-general-section { display: flex; - width: 60%; + width: 100%; padding-top: 1rem; cursor: pointer; } @@ -128,63 +117,33 @@ app-view-profile { .app-general-dropdown-details { display: flex; - } - .app-profile-general-dropdown-heading { - color: var(--theme-heading-color); - width: 20%; - font-weight: 400; - letter-spacing: .5px; - } + h4 { + color: var(--theme-heading-color); + width: 20%; + font-weight: 400; + letter-spacing: .5px; + } - .app-profile-general-dropdown-details { - margin-top: 1.3rem; - letter-spacing: .5px; - } + p { + margin-top: 1.3rem; + letter-spacing: .5px; + } - .app-profile-general-dropdown-input-details { - width: 24%; - height: 25px; - border: none; - margin-top: 1.3rem; - background-color: var(--theme-dropdown-color); - } + input { + width: 24%; + height: 25px; + border: none; + margin-top: 1.3rem; + background-color: var(--theme-dropdown-color); - .app-profile-login-row { - margin: 2rem 0 0 2rem; - width: 70%; - border: 1px solid var(--theme-grey-background-color); - border-radius: 1rem; - } - - .app-profile-login { - display: flex; - padding-left: 1rem; - } - - .app-profile-login-dropdown-details { - width: 24%; - height: 25px; - border: none; - margin-top: 1.3rem; - background-color: var(--theme-dropdown-color); - } - - .app-profile-login-dropdown-heading-forgot { - margin-top: 1.3rem; - color: var(--theme-heading-color); - margin-left: 16rem; - } - - .app-profile-company-row { - margin-top: 2rem; - } - - .app-profile-contact-row { - margin: 2rem 0 5rem 2rem; - width: 70%; - border: 1px solid var(--theme-grey-background-color); - border-radius: 1rem; + &:focus { + border: 2px solid var(--theme-blue-button-color) !important; + border-radius: 6px; + outline: none !important; + box-shadow: 0 0 2px (--theme-blue-button-color); + } + } } .app-error-message { diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts index 3ab9bcbc0..5d5dc302c 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts @@ -33,7 +33,6 @@ describe('ViewProfileComponent', () => { }); it('should company dropdown remains close', async () => { - expect(component.loginSectionDropdown).toBe(false); expect(component.contactSectionDropdown).toBe(false); }); diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts index 4c5625311..b7ea56ede 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts @@ -15,7 +15,8 @@ import { throwError } from 'rxjs'; selector: 'app-view-profile', templateUrl: './view-profile.component.html', styleUrls: ['./view-profile.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + host: { class: 'app-view-profile' } }) export class ViewProfileComponent implements OnInit { private _peopleApi: PeopleApi; @@ -30,13 +31,8 @@ export class ViewProfileComponent implements OnInit { generalSectionDropdown = true; generalSectionButtonsToggle = true; - loginSectionDropdown = false; - loginSectionButtonsToggle = true; - passwordSectionDropdown = false; - contactSectionDropdown = false; contactSectionButtonsToggle = true; - hideSidenav: boolean; landingPage: string; @@ -45,7 +41,6 @@ export class ViewProfileComponent implements OnInit { } ngOnInit() { - this.populateForm(this.personDetails); this.peopleApi .getPerson('-me-') .then((userInfo) => { @@ -76,18 +71,12 @@ export class ViewProfileComponent implements OnInit { toggleGeneralDropdown() { this.generalSectionDropdown = !this.generalSectionDropdown; - - if (!this.generalSectionDropdown) { - this.generalSectionButtonsToggle = true; - } + this.generalSectionButtonsToggle = true; } toggleGeneralButtons() { this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle; - - if (!this.generalSectionButtonsToggle) { - this.generalSectionDropdown = true; - } + this.generalSectionDropdown = true; } onSaveGeneralData(event) { @@ -95,48 +84,19 @@ export class ViewProfileComponent implements OnInit { this.updatePersonDetails(event); } - onSaveLoginData() { - this.passwordSectionDropdown = !this.passwordSectionDropdown; - this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle; - } - onSaveCompanyData(event) { this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle; this.updatePersonDetails(event); } - toggleLoginDropdown() { - this.loginSectionDropdown = !this.loginSectionDropdown; - - if (!this.loginSectionDropdown) { - this.loginSectionButtonsToggle = true; - } - } - - toggleLoginButtons() { - this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle; - this.passwordSectionDropdown = !this.passwordSectionDropdown; - - if (!this.loginSectionButtonsToggle) { - this.loginSectionDropdown = true; - this.passwordSectionDropdown = true; - } - } - toggleContactDropdown() { this.contactSectionDropdown = !this.contactSectionDropdown; - - if (!this.contactSectionDropdown) { - this.contactSectionButtonsToggle = true; - } + this.contactSectionButtonsToggle = true; } toggleContactButtons() { this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle; - - if (!this.contactSectionButtonsToggle) { - this.contactSectionDropdown = true; - } + this.contactSectionDropdown = true; } updatePersonDetails(event) { diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts index 65e95a087..b33d568f9 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts @@ -29,9 +29,10 @@ import { CommonModule } from '@angular/common'; import { CoreModule } from '@alfresco/adf-core'; import { RouterModule } from '@angular/router'; import { MatDividerModule } from '@angular/material/divider'; +import { MatButtonModule } from '@angular/material/button'; @NgModule({ - imports: [CommonModule, RouterModule, CoreModule.forChild(), MatDividerModule], + imports: [CommonModule, RouterModule, CoreModule.forChild(), MatDividerModule, MatButtonModule], declarations: [ViewProfileComponent] }) export class ViewProfileModule {}