inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-09-17 14:21:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup user profile layout and styles

Browse Source
This commit is contained in:
Denys Vuika
2024-07-10 14:31:21 -04:00
parent e0bf04f446
commit f99226a245
5 changed files with 207 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html
View File

@@ -2,9 +2,7 @@
<div class="aca-page-layout-header">
<adf-toolbar class="adf-toolbar--inline">
<button mat-icon-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</button>
<adf-button (click)="goBack()" variant="icon" icon="arrow_back"></adf-button>
</adf-toolbar>
<h1 class="aca-page-title">{{ 'ACA_FOLDER_RULES.ACTIONS.MANAGE_RULES' | translate }}</h1>
</div>

5
projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts
View File

@@ -33,7 +33,7 @@ import { delay, takeUntil } from 'rxjs/operators';
import { EditRuleDialogUiComponent } from '../rule-details/edit-rule-dialog.ui-component';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
import { NotificationService, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
import { ButtonComponent, NotificationService, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
import { ActionDefinitionTransformed } from '../model/rule-action.model';
import { ActionsService } from '../services/actions.service';
import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
@@ -67,7 +67,8 @@ import { RuleDetailsUiComponent } from '../rule-details/rule-details.ui-componen
TemplateModule,
GenericErrorComponent,
RuleDetailsUiComponent,
MatDialogModule
MatDialogModule,
ButtonComponent
],
selector: 'aca-manage-rules',
templateUrl: 'manage-rules.smart-component.html',

134
projects/aca-content/src/lib/components/view-profile/view-profile.component.html
View File

@@ -1,60 +1,79 @@
<div class="app-profile-container">
<div class="app-profile-row">
<div class="app-profile-title">
<button *ngIf="(appNavNarMode$ | async) === 'collapsed'" mat-icon-button (click)="toggleClick()"
title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
<mat-icon>menu</mat-icon>
</button>
<mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
<adf-button *ngIf="(appNavNarMode$ | async) === 'collapsed'" variant="icon" icon="menu" (click)="toggleClick()"
title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}"></adf-button>
<adf-button variant="icon" icon="arrow_back" (click)="navigateToPersonalFiles()"></adf-button>
<h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
</div>
</div>
<div class="app-profile-general-row" [formGroup]="profileForm">
<div class="app-profile-content">
<section [formGroup]="profileForm">
<div class="app-profile-general">
<div class="app-profile-general-section">
<mat-icon class="app-profile-general-icon" (click)="toggleGeneralDropdown()" id="toggle-general-dropdown">
{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
<adf-button
id="toggle-general-dropdown"
(click)="toggleGeneralDropdown($event)"
variant="icon"
icon="{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}">
</adf-button>
<h4
tabindex="0"
class="app-general-title"
(click)="toggleGeneralDropdown($event)"
(keydown.enter)="toggleGeneralDropdown($event)"
(keydown.space)="toggleGeneralDropdown($event)">
{{'APP.EDIT_PROFILE.GENERAL' | translate}}
</h4>
</div>
<div class="app-general-edit-btn" *ngIf="generalSectionButtonsToggle">
<button mat-raised-button (click)="toggleGeneralButtons()" id="general-edit-button"
class="app-general-edit">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
</div>
<div class="app-general-edit-btn" *ngIf="!generalSectionButtonsToggle">
<button mat-raised-button class="app-general-cancel-btn" id="general-cancel-button"
(click)="toggleGeneralButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
<button mat-raised-button class="app-general-save-btn" id="general-save-button" [disabled]="profileForm.invalid"
(click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
<div class="flex flex-row items-center gap-x-2">
<ng-container *ngIf="generalSectionButtonsToggle">
<adf-button variant="raised" (click)="toggleGeneralButtons()" id="general-edit-button">{{'APP.EDIT_PROFILE.EDIT' | translate}}</adf-button>
</ng-container>
<ng-container *ngIf="!generalSectionButtonsToggle">
<adf-button
id="general-cancel-button"
variant="raised"
(click)="toggleGeneralButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</adf-button>
<adf-button
id="general-save-button"
variant="raised"
color="primary"
[disabled]="profileForm.invalid"
(click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</adf-button>
</ng-container>
</div>
</div>
<mat-divider class="app-divider" *ngIf="generalSectionDropdown"></mat-divider>
<div *ngIf="generalSectionDropdown">
<div class="app-general-dropdown">
<div class="app-general-dropdown-details">
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
<p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
<p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
<input type="text" value="" formControlName="jobTitle" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
<input type="text" value="" formControlName="location" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
<input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
@@ -63,8 +82,8 @@
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
<input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
@@ -75,52 +94,62 @@
</div>
</div>
</div>
</div>
</section>
<div class="app-profile-contact-row" [formGroup]="profileForm">
<section [formGroup]="profileForm">
<div class="app-profile-general profile-general-bottom-radius">
<div class="app-profile-general-section">
<mat-icon class="app-profile-general-icon" (click)="toggleContactDropdown()" id="toggle-contact-dropdown">
{{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4>
<adf-button
id="toggle-contact-dropdown"
(click)="toggleContactDropdown($event)"
variant="icon"
icon="{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}">
</adf-button>
<h4
tabindex="0"
class="app-general-title"
(click)="toggleContactDropdown($event)"
(keydown.enter)="toggleContactDropdown($event)"
(keydown.space)="toggleContactDropdown($event)">
{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}
</h4>
</div>
<div class="app-general-edit-btn" *ngIf="contactSectionButtonsToggle">
<button mat-raised-button class="app-general-edit" id="contact-edit-button"
(click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
</div>
<div class="app-general-edit-btn" *ngIf="!contactSectionButtonsToggle">
<button mat-raised-button class="app-general-cancel-btn" id="contact-cancel-button"
(click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
<button mat-raised-button class="app-general-save-btn" id="contact-save-button" [disabled]="profileForm.invalid"
(click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
<div class="flex flex-row items-center gap-x-2">
<ng-container *ngIf="contactSectionButtonsToggle">
<adf-button variant="raised" (click)="toggleContactButtons()" id="contact-edit-button">{{'APP.EDIT_PROFILE.EDIT' | translate}}</adf-button>
</ng-container>
<ng-container *ngIf="!contactSectionButtonsToggle">
<adf-button id="contact-cancel-button" variant="raised" (click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</adf-button>
<adf-button id="contact-save-button" variant="raised" color="primary" [disabled]="profileForm.invalid" (click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</adf-button>
</ng-container>
</div>
</div>
<mat-divider class="app-divider" *ngIf="contactSectionDropdown"></mat-divider>
<div *ngIf="contactSectionDropdown">
<div class="app-general-dropdown">
<div class="app-general-dropdown-details">
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName"
class="app-profile-general-dropdown-input-details app-selected">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress"
class="app-profile-general-dropdown-input-details app-selected">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode"
class="app-profile-general-dropdown-input-details app-selected">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
<input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
@@ -129,8 +158,8 @@
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<mat-divider></mat-divider>
<div class="flex">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
@@ -141,5 +170,6 @@
</div>
</div>
</div>
</section>
</div>
</div>

141
projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
View File

@@ -1,10 +1,37 @@
app-view-profile {
/* stylelint-disable selector-class-pattern */
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.items-center {
align-items: center;
}
.gap-x-2 {
column-gap: 0.5rem;
}
/* stylelint-enable selector-class-pattern */
mat-divider {
border-top-color: var(--theme-grey-divider-color);
}
letter-spacing: 0.5px;
.app-profile-container {
overflow: scroll;
height: 100%;
width: 100%;
section {
border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem;
}
}
.app-profile-row {
@@ -27,52 +54,32 @@ app-view-profile {
margin-top: 1rem;
}
.app-profile-general-row {
.app-profile-content {
margin: 2rem 0 0 2rem;
display: flex;
flex-direction: column;
row-gap: 0.5rem;
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: 0.5px;
}
.app-profile-general {
display: flex;
padding-left: 1rem;
}
.app-profile-general-bottom-radius {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin: 0.5rem;
}
.app-profile-general-section {
display: flex;
width: 60%;
padding-top: 1rem;
cursor: pointer;
width: 100%;
align-items: center;
}
.app-general-title {
margin-left: 0.6rem;
margin-top: 4px;
margin-top: 0;
margin-bottom: 0;
letter-spacing: 0.5px;
}
.app-general-edit-btn {
width: 60%;
text-align: end;
cursor: pointer;
user-select: none;
}
.app-divider {
@@ -89,45 +96,10 @@ app-view-profile {
box-shadow: 0 0 2px var(--theme-blue-button-color);
}
.app-general-edit {
background: var(--theme-grey-text-background-color);
height: 30px;
margin: 1rem;
}
.app-general-edit:hover {
background: var(--theme-grey-hover-background-color);
}
.app-general-cancel-btn {
height: 30px;
margin: 1rem;
margin-left: 0.5rem;
background-color: var(--theme-grey-text-background-color);
padding-top: 0.25px;
}
.app-general-save-btn {
width: 75px;
height: 30px;
margin: 1rem;
margin-left: 0.5rem;
color: white;
background-color: var(--theme-blue-button-color);
}
.app-general-dropdown-divider {
border-top-color: var(--theme-grey-divider-color);
}
.app-general-dropdown {
padding: 0 1rem;
}
.app-general-dropdown-details {
display: flex;
}
.app-profile-general-dropdown-heading {
color: var(--theme-heading-color);
width: 20%;
@@ -148,43 +120,6 @@ app-view-profile {
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;
}
.app-error-message {
padding-top: 2rem;
padding-left: 0.5rem;

12
projects/aca-content/src/lib/components/view-profile/view-profile.component.ts
View File

@@ -22,7 +22,7 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/
import { AlfrescoApiService } from '@alfresco/adf-core';
import { AlfrescoApiService, ButtonComponent } from '@alfresco/adf-core';
import { PeopleApi, Person } from '@alfresco/js-api';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -31,15 +31,13 @@ import { Observable, Subject, throwError } from 'rxjs';
import { AppService } from '@alfresco/aca-shared';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
@Component({
standalone: true,
imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatButtonModule, MatIconModule, MatDividerModule, MatFormFieldModule],
imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatDividerModule, MatFormFieldModule, ButtonComponent],
selector: 'app-view-profile',
templateUrl: './view-profile.component.html',
styleUrls: ['./view-profile.component.scss'],
@@ -108,7 +106,8 @@ export class ViewProfileComponent implements OnInit, OnDestroy {
});
}
toggleGeneralDropdown() {
toggleGeneralDropdown(event: Event) {
event.preventDefault();
this.generalSectionDropdown = !this.generalSectionDropdown;
if (!this.generalSectionDropdown) {
@@ -157,7 +156,8 @@ export class ViewProfileComponent implements OnInit, OnDestroy {
}
}
toggleContactDropdown() {
toggleContactDropdown(event: Event) {
event.preventDefault();
this.contactSectionDropdown = !this.contactSectionDropdown;
if (!this.contactSectionDropdown) {