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

* page layout supports CSS selectors * migrate to using CSS selectors for page layout * add docs
2025-07-24 17:31:52 +00:00 · 2023-07-18 14:13:33 +01:00
parent 4ded3b200d
commit a6ab4a34b1
29 changed files with 148 additions and 142 deletions
--- a/projects/aca-content/src/lib/components/details/details.component.html
+++ b/projects/aca-content/src/lib/components/details/details.component.html
@@ -1,5 +1,5 @@
 <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">
@@ -7,9 +7,9 @@
        <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>
--- 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',
--- 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,5 +1,5 @@
 <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">
@@ -7,9 +7,9 @@
        <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>
--- 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
--- a/projects/aca-content/src/lib/components/favorites/favorites.component.html
+++ b/projects/aca-content/src/lib/components/favorites/favorites.component.html
@@ -1,5 +1,5 @@
 <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">
@@ -7,9 +7,9 @@
        <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>
--- 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',
--- a/projects/aca-content/src/lib/components/files/files.component.html
+++ b/projects/aca-content/src/lib/components/files/files.component.html
@@ -1,5 +1,5 @@
 <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">
@@ -7,13 +7,13 @@
        <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>
--- 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',
--- a/projects/aca-content/src/lib/components/libraries/libraries.component.html
+++ b/projects/aca-content/src/lib/components/libraries/libraries.component.html
@@ -1,5 +1,5 @@
 <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">
@@ -7,9 +7,9 @@
        <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>
--- 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',
--- 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,5 +1,5 @@
 <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">
@@ -7,9 +7,9 @@
        <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>
--- 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',
--- a/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html
+++ b/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html
@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
    <aca-search-input></aca-search-input>
    <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
    <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
        <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">
      <div class="adf-search-results">
        <div class="adf-search-results__content">
@@ -87,5 +87,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>
--- a/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.ts
+++ b/projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.ts
@@ -34,8 +34,6 @@ import {
  InfoDrawerComponent,
  PageComponent,
  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
  PaginationDirective,
  ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -65,8 +63,6 @@ import { DocumentListDirective } from '../../../directives/document-list.directi
    DocumentListDirective,
    ToolbarActionComponent,
    PaginationDirective,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
    PageLayoutComponent
  ],
  selector: 'aca-search-results',
--- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
+++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
    <aca-search-input></aca-search-input>
    <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
    <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
        <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">
      <div class="adf-search-results">
        <div class="adf-search-results__content">
@@ -140,5 +140,5 @@
        </div>
      </ng-template>
    </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
--- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.ts
+++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.ts
@@ -42,8 +42,6 @@ import {
  InfoDrawerComponent,
  PageComponent,
  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
  PaginationDirective,
  ToolbarActionComponent
 } from '@alfresco/aca-shared';
@@ -88,8 +86,6 @@ import { SearchResultsRowComponent } from '../search-results-row/search-results-
    PaginationDirective,
    ViewerModule,
    ToolbarActionComponent,
-    PageLayoutHeaderComponent,
-    PageLayoutContentComponent,
    PageLayoutComponent
  ],
  selector: 'aca-search-results',
--- a/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
+++ b/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
    <adf-breadcrumb root="APP.BROWSE.SHARED.TITLE"></adf-breadcrumb>

    <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
        <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
@@ -67,5 +67,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>
--- a/projects/aca-content/src/lib/components/shared-files/shared-files.component.ts
+++ b/projects/aca-content/src/lib/components/shared-files/shared-files.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'
    InfoDrawerComponent,
    PaginationDirective,
    ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
    PageLayoutComponent
  ],
  templateUrl: './shared-files.component.html',
--- a/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
+++ b/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
@@ -1,5 +1,5 @@
 <aca-page-layout>
-  <aca-page-layout-header>
+  <div class="aca-page-layout-header">
    <adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE"> </adf-breadcrumb>

    <adf-toolbar class="adf-toolbar--inline">
@@ -7,9 +7,9 @@
        <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
@@ -77,5 +77,5 @@

      <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
    </div>
-  </aca-page-layout-content>
+  </div>
 </aca-page-layout>
--- a/projects/aca-content/src/lib/components/trashcan/trashcan.component.ts
+++ b/projects/aca-content/src/lib/components/trashcan/trashcan.component.ts
@@ -25,15 +25,7 @@
 import { getUserProfile } from '@alfresco/aca-shared/store';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import {
-  ContextActionsDirective,
-  PageComponent,
-  PageLayoutComponent,
-  PageLayoutContentComponent,
-  PageLayoutHeaderComponent,
-  PaginationDirective,
-  ToolbarActionComponent
-} from '@alfresco/aca-shared';
+import { ContextActionsDirective, PageComponent, PageLayoutComponent, PaginationDirective, ToolbarActionComponent } from '@alfresco/aca-shared';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
@@ -56,8 +48,6 @@ import { DocumentListDirective } from '../../directives/document-list.directive'
    ContextActionsDirective,
    PaginationDirective,
    ToolbarActionComponent,
-    PageLayoutContentComponent,
-    PageLayoutHeaderComponent,
    PageLayoutComponent
  ],
  templateUrl: './trashcan.component.html',