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

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

Browse Source 
* page layout supports CSS selectors

* migrate to using CSS selectors for page layout

* add docs
This commit is contained in:
Denys Vuika
2023-07-18 14:13:33 +01:00
committed by GitHub
parent 4ded3b200d
commit a6ab4a34b1
29 changed files with 148 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
projects/aca-shared/src/lib/components/page-layout/page-layout-content.component.ts
View File

@@ -24,6 +24,7 @@
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
// @deprecated Use `.aca-page-layout-content` CSS selector instead
@Component({
standalone: true,
selector: 'aca-page-layout-content',

1
projects/aca-shared/src/lib/components/page-layout/page-layout-error.component.ts
View File

@@ -24,6 +24,7 @@
import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
// @deprecated Use `.aca-page-layout-error` selectors instead
@Component({
standalone: true,
selector: 'aca-page-layout-error',

1
projects/aca-shared/src/lib/components/page-layout/page-layout-header.component.ts
View File

@@ -24,6 +24,7 @@
import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
// @deprecated Use `.aca-page-layout-header` CSS selector instead
@Component({
standalone: true,
selector: 'aca-page-layout-header',

28
projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
View File

@@ -1,11 +1,17 @@
<div class="aca-content-header">
<button *ngIf="(appNavNarMode$ | async) === 'collapsed'"
mat-icon-button
(click)="toggleClick()"
title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
<mat-icon>keyboard_double_arrow_right</mat-icon>
</button>
<ng-content select="aca-page-layout-header"></ng-content>
</div>
<ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
<ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
<div class="aca-content-header">
<button *ngIf="(appNavNarMode$ | async) === 'collapsed'"
mat-icon-button
(click)="toggleClick()"
title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
<mat-icon>keyboard_double_arrow_right</mat-icon>
</button>
<ng-content select=".aca-page-layout-header, aca-page-layout-header"></ng-content>
</div>
<ng-container *ngIf="hasError">
<ng-content select=".aca-page-layout-error, aca-page-layout-error"></ng-content>
</ng-container>
<ng-container *ngIf="!hasError">
<ng-content select=".aca-page-layout-content, aca-page-layout-content"></ng-content>
</ng-container>

69
projects/aca-shared/src/lib/components/page-layout/page-layout.md Normal file
View File

@@ -0,0 +1,69 @@
# Page Layout Component
Selector: `aca-page-layout`
## Layout Structure
The layout component provides a set of slots for your custom content:
- header
- error
- content
```html
<aca-page-layout>
<div class="aca-page-layout-header">
<!-- Header Component -->
</div>
<div class="aca-page-layout-error">
<!-- Error Component -->
</div>
<div class="aca-page-layout-content">
<!-- Main Content -->
</div>
</aca-page-layout>
```
## Layout Header
Supports any HTML or Angular component as a content
```html
<aca-page-layout>
<div class="aca-page-layout-header">
<!-- Header Component -->
</div>
</aca-page-layout>
```
## Layout Error
Supports any HTML or Angular component as the error visualisation.
Displayed only when an error is detected by the parent container component.
```html
<aca-page-layout>
<div class="aca-page-layout-error">
<!-- Error Component -->
</div>
</aca-page-layout>
```
## Layout Content
You can provide any Angular component or HTML element as the main content.
In addition, you can use `scrollable` class to make the content scroll.
The content is displayed only when there are no errors detected.
```html
<aca-page-layout>
<div class="aca-page-layout-content scrollable">
<!-- Main Content -->
</div>
</aca-page-layout>
```