[ACS-5631] Improved page layout and provide documentation (#3346)

* page layout supports CSS selectors * migrate to using CSS selectors for page layout * add docs
Alfresco · Jul 18, 2023 · a6ab4a3 · a6ab4a3
1 parent 4ded3b2
commit a6ab4a3
Show file tree

Hide file tree

Showing 29 changed files with 148 additions and 142 deletions.
diff --git a/projects/aca-content/about/src/about.component.html b/projects/aca-content/about/src/about.component.html
@@ -1,12 +1,12 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <button mat-icon-button [routerLink]="landingPage">
       <mat-icon class="app-profile-icon">arrow_back</mat-icon>
     </button>
     <h1>{{ 'APP.BROWSE.ABOUT.TITLE' | translate }}</h1>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content [scrollable]="true">
+  <div class="aca-page-layout-content scrollable">
     <adf-about>
       <adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
         <ng-template>
@@ -32,5 +32,5 @@ <h1>{{ 'APP.BROWSE.ABOUT.TITLE' | translate }}</h1>
         </ng-template>
       </adf-about-panel>
     </adf-about>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
diff --git a/projects/aca-content/about/src/about.component.ts b/projects/aca-content/about/src/about.component.ts
@@ -28,25 +28,15 @@ import { AboutModule, AppConfigService, AuthenticationService, RepositoryInfo }
 import { DiscoveryApiService } from '@alfresco/adf-content-services';
 import { PACKAGE_JSON } from './package-json.token';
 import { TranslateModule } from '@ngx-translate/core';
-import { AppExtensionService, PageLayoutComponent, PageLayoutContentComponent, PageLayoutHeaderComponent } from '@alfresco/aca-shared';
+import { AppExtensionService, PageLayoutComponent } from '@alfresco/aca-shared';
 import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   standalone: true,
-  imports: [
-    CommonModule,
-    TranslateModule,
-    AboutModule,
-    RouterModule,
-    MatIconModule,
-    MatButtonModule,
-    PageLayoutHeaderComponent,
-    PageLayoutContentComponent,
-    PageLayoutComponent
-  ],
+  imports: [CommonModule, TranslateModule, AboutModule, RouterModule, MatIconModule, MatButtonModule, PageLayoutComponent],
   selector: 'app-about-page',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],

diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html
@@ -1,15 +1,15 @@
 <aca-page-layout>
 
-  <aca-page-layout-header>
+  <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-toolbar>
     <adf-breadcrumb root="{{'ACA_FOLDER_RULES.ACTIONS.MANAGE_RULES' | translate}}"></adf-breadcrumb>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
 
       <ng-container *ngIf="((ruleSetsLoading$ | async) && (inheritedRuleSets$ | async).length === 0) || (actionsLoading$ | async); else onLoaded">
@@ -127,14 +127,14 @@
         </ng-container>
 
         <ng-template #genericError>
-          <aca-page-layout-error>
+          <div class="aca-page-layout-error">
             <aca-generic-error></aca-generic-error>
-          </aca-page-layout-error>
+          </div>
         </ng-template>
 
       </ng-template>
 
     </div>
-  </aca-page-layout-content>
+  </div>
 
 </aca-page-layout>
diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts
@@ -42,13 +42,7 @@ import { RuleSetPickerSmartComponent } from '../rule-set-picker/rule-set-picker.
 import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { ActionParameterConstraint } from '../model/action-parameter-constraint.model';
 import { TranslateModule } from '@ngx-translate/core';
-import {
-  GenericErrorComponent,
-  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutErrorComponent,
-  PageLayoutHeaderComponent
-} from '@alfresco/aca-shared';
+import { GenericErrorComponent, PageLayoutComponent } from '@alfresco/aca-shared';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -72,9 +66,6 @@ import { RuleDetailsUiComponent } from '../rule-details/rule-details.ui-componen
     RuleListUiComponent,
     RouterModule,
     TemplateModule,
-    PageLayoutErrorComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     GenericErrorComponent,
     RuleDetailsUiComponent,
     MatDialogModule

diff --git a/projects/aca-content/src/lib/components/details/details.component.html b/projects/aca-content/src/lib/components/details/details.component.html
@@ -1,15 +1,15 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb [root]="title" [folderNode]="node" (navigate)="goBack()"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="acs-details-container">
       <div class="acs-details-title">
         <div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
@@ -36,7 +36,7 @@
         </mat-tab>
       </mat-tab-group>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
 
 <ng-template #loading>

diff --git a/projects/aca-content/src/lib/components/details/details.component.ts b/projects/aca-content/src/lib/components/details/details.component.ts
@@ -24,14 +24,7 @@
 
 import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import {
-  ContentApiService,
-  PageComponent,
-  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
-  ToolbarActionComponent
-} from '@alfresco/aca-shared';
+import { ContentApiService, PageComponent, PageLayoutComponent, ToolbarActionComponent } from '@alfresco/aca-shared';
 import { NavigateToPreviousPage, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
 import { Subject } from 'rxjs';
 import { BreadcrumbModule, PermissionManagerModule } from '@alfresco/adf-content-services';
@@ -60,9 +53,7 @@ import { CommentsTabComponent } from '../info-drawer/comments-tab/comments-tab.c
     MetadataTabComponent,
     CommentsTabComponent,
     ToolbarActionComponent,
-    PageLayoutComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent
+    PageLayoutComponent
   ],
   selector: 'app-details-manager',
   templateUrl: './details.component.html',

diff --git a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
@@ -1,15 +1,15 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -81,5 +81,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
diff --git a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.ts
@@ -31,8 +31,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
 import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
@@ -57,9 +55,7 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationModule,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent
+    PageLayoutComponent
   ],
   templateUrl: './favorite-libraries.component.html',
   encapsulation: ViewEncapsulation.None

diff --git a/projects/aca-content/src/lib/components/favorites/favorites.component.html b/projects/aca-content/src/lib/components/favorites/favorites.component.html
@@ -1,15 +1,15 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -68,5 +68,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
diff --git a/projects/aca-content/src/lib/components/favorites/favorites.component.ts b/projects/aca-content/src/lib/components/favorites/favorites.component.ts
@@ -28,8 +28,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -58,8 +56,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationDirective,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './favorites.component.html',

diff --git a/projects/aca-content/src/lib/components/files/files.component.html b/projects/aca-content/src/lib/components/files/files.component.html
@@ -1,19 +1,19 @@
 <aca-page-layout [hasError]="!isValidPath">
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb [root]="title" [folderNode]="node" [maxItems]="isSmallScreen ? 1 : 0" (navigate)="onBreadcrumbNavigate($event)"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-error>
+  <div class="aca-page-layout-error">
     <aca-generic-error></aca-generic-error>
-  </aca-page-layout-error>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content" *ngIf="!(showLoader$ | async)">
       <adf-upload-drag-area [rootFolderId]="node?.id" [disabled]="!canUpload" (updateFileVersion)="onUploadNewVersion($event)">
         <adf-document-list
@@ -97,5 +97,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
diff --git a/projects/aca-content/src/lib/components/files/files.component.ts b/projects/aca-content/src/lib/components/files/files.component.ts
@@ -34,9 +34,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutErrorComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -68,9 +65,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     InfoDrawerComponent,
     ToolbarActionComponent,
     PaginationDirective,
-    PageLayoutHeaderComponent,
-    PageLayoutContentComponent,
-    PageLayoutErrorComponent,
     PageLayoutComponent
   ],
   templateUrl: './files.component.html',

diff --git a/projects/aca-content/src/lib/components/libraries/libraries.component.html b/projects/aca-content/src/lib/components/libraries/libraries.component.html
@@ -1,15 +1,15 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -72,5 +72,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="$any(selection).library"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
diff --git a/projects/aca-content/src/lib/components/libraries/libraries.component.ts b/projects/aca-content/src/lib/components/libraries/libraries.component.ts
@@ -31,8 +31,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -58,8 +56,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationDirective,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './libraries.component.html',

diff --git a/projects/aca-content/src/lib/components/recent-files/recent-files.component.html b/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
@@ -1,15 +1,15 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
     <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="adf-toolbar--inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
-  </aca-page-layout-header>
+  </div>
 
-  <aca-page-layout-content>
+  <div class="aca-page-layout-content">
     <div class="main-content">
       <adf-document-list
         #documentList
@@ -68,5 +68,5 @@
     <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
       <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
diff --git a/projects/aca-content/src/lib/components/recent-files/recent-files.component.ts b/projects/aca-content/src/lib/components/recent-files/recent-files.component.ts
@@ -30,8 +30,6 @@ import {
   InfoDrawerComponent,
   PageComponent,
   PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
   PaginationDirective,
   ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -57,8 +55,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
     PaginationDirective,
     InfoDrawerComponent,
     ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
     PageLayoutComponent
   ],
   templateUrl: './recent-files.component.html',