inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1820] Replaced md- prefix in docs with mat- (#2573)

Browse Source
This commit is contained in:
Andy Stark
2017-10-31 10:58:44 +00:00
committed by Eugenio Romano
parent a2df8876d5
commit 1fe71ed251
12 changed files with 60 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/datatable.component.md
View File

@@ -278,11 +278,11 @@ You can add a template that will be shown during the loading of your data:
<loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<md-progress-spinner
<mat-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</mat-progress-spinner>
</ng-template>
</loading-content-template>

18
docs/info-drawer-layout.component.md
View File

@@ -4,18 +4,6 @@ Displays a sidebar-style information panel.
![Info drawer layout screenshot](docassets/images/infodrawerlayout.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
- [Details](#details)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
```html
@@ -23,13 +11,13 @@ Displays a sidebar-style information panel.
<div info-drawer-title>File info</div>
<div info-drawer-buttons>
<md-icon>clear</md-icon>
<mat-icon>clear</mat-icon>
</div>
<div info-drawer-content>
<md-card>
<mat-card>
Lorem ipsum dolor sit amet...
</md-card>
</mat-card>
</div>
</adf-info-drawer-layout>
```

2
docs/info-drawer.component.md
View File

@@ -22,7 +22,7 @@ Displays a sidebar-style information panel with tabs.
```html
<adf-info-drawer title="Activities" (currentTab)="getActiveTab($event)">
<div info-drawer-buttons>
<md-icon (click)="close()">clear</md-icon>
<mat-icon (click)="close()">clear</mat-icon>
</div>
<adf-info-drawer-tab label="Activity">

42
docs/language-menu.component.md
View File

@@ -1,21 +1,9 @@
# Language Menu component
Displays all the languages that are present in the "app.config.json" or the defaul one (EN).
Displays all the languages that are present in the "app.config.json" or the default one (EN).
![Language Menu screenshot](docassets/images/languages-menu.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
- [Details](#details)
- [Nested menu language](#nested-menu-language)
- [Nested menu details](#nested-menu-details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
How to attach an ADF Language Menu as main menu
@@ -53,29 +41,29 @@ This is how the configuration looks like in the the "app.config.json"
```
In case no setting is provided, the component shows only the English language.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## Nested Menu language
### Nested Menu language
How to attach an ADF Language Menu as nested menu
```html
<button md-icon-button class="dw-profile-menu" [mdMenuTriggerFor]="profileMenu">
<md-icon>more_vert</md-icon>
<button mat-icon-button class="dw-profile-menu" [matMenuTriggerFor]="profileMenu">
<mat-icon>more_vert</mat-icon>
</button>
<md-menu #profileMenu="mdMenu">
<button md-menu-item>profile-settings</button>
<button md-menu-item [matMenuTriggerFor]="langMenu">Languages</button>
<button md-menu-item>sign-out</button>
</md-menu>
<md-menu #langMenu="mdMenu">
<mat-menu #profileMenu="matMenu">
<button mat-menu-item>profile-settings</button>
<button mat-menu-item [matMenuTriggerFor]="langMenu">Languages</button>
<button mat-menu-item>sign-out</button>
</mat-menu>
<mat-menu #langMenu="matMenu">
<adf-language-menu></adf-language-menu>
</md-menu>
</mat-menu>
```
![Nested Language Menu screenshot](docassets/images/languages-menu-nested.png)
## Nested menu details
### Nested menu details
In the previous example we are using the ADF Language Menu as nested menu.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

14
docs/metadata-indicators.md
View File

@@ -72,9 +72,9 @@ For demonstration purposes we are going to display several icons if underlying n
```html
<div *ngIf="metadata">
<ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
<md-icon>portrait</md-icon>
<md-icon>photo_filter</md-icon>
<md-icon>rotate_90_degrees_ccw</md-icon>
<mat-icon>portrait</mat-icon>
<mat-icon>photo_filter</mat-icon>
<mat-icon>rotate_90_degrees_ccw</mat-icon>
</ng-container>
<div *ngIf="metadata['cm:versionLabel'] !== '2.0'">
{{metadata['cm:versionLabel']}}
@@ -82,7 +82,7 @@ For demonstration purposes we are going to display several icons if underlying n
</div>
```
Note: For a list of the icons that can be used with `<md-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
Note: For a list of the icons that can be used with `<mat-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
## Testing component
@@ -111,9 +111,9 @@ import { Component, Input } from '@angular/core';
template: `
<div *ngIf="metadata">
<ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
<md-icon>portrait</md-icon>
<md-icon>photo_filter</md-icon>
<md-icon>rotate_90_degrees_ccw</md-icon>
<mat-icon>portrait</mat-icon>
<mat-icon>photo_filter</mat-icon>
<mat-icon>rotate_90_degrees_ccw</mat-icon>
</ng-container>
<div *ngIf="metadata['cm:versionLabel'] !== '2.0'">
{{metadata['cm:versionLabel']}}

17
docs/node-delete.directive.md
View File

@@ -1,25 +1,12 @@
# Node Delete directive
Delete multiple files and folders
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
Deletes multiple files and folders.
## Basic Usage
```html
<adf-toolbar>
<button md-icon-button
<button mat-icon-button
(delete)="documentList.reload()"
[adf-delete]="documentList.selection">
</button>

23
docs/node-favorite.directive.md
View File

@@ -1,25 +1,12 @@
# Node Favorite directive
Selectively toggle nodes as favorite
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
Selectively toggles nodes as favorite
## Basic Usage
```html
<adf-toolbar>
<button md-icon-button
<button mat-icon-button
(toggle)="done()"
[adf-node-favorite]="documentList.selection">
</button>
@@ -62,13 +49,13 @@ wich provides a method to help further style the element.
```html
<button
md-menu-item
mat-menu-item
#selection="adfFavorite"
[ngClass]="{ 'icon-highlight': selection.hasFavorites() }"
[adf-node-favorite]="documentList.selection">
<md-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }">
<mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }">
{{ selection.hasFavorites() ? 'star' : 'star_border' }}
</md-icon>
</mat-icon>
</button>
```

4
docs/node-permission.directive.md
View File

@@ -45,10 +45,10 @@ For example the "Delete" button should be disabled if no selection is present or
```html
<adf-toolbar title="toolbar example">
<button md-icon-button
<button mat-icon-button
adf-node-permission="delete"
[adf-nodes]="documentList.selection">
<md-icon>delete</md-icon>
<mat-icon>delete</mat-icon>
</button>
</adf-toolbar>

17
docs/node-restore.directive.md
View File

@@ -1,27 +1,14 @@
# Node Restore directive
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-toolbar title="toolbar example">
<button md-icon-button
<button mat-icon-button
location="/files"
[adf-restore]="documentList.selection"
(restore)="documentList.reload()">
<md-icon>restore</md-icon>
<mat-icon>restore</mat-icon>
</button>
</adf-toolbar>

18
docs/process-audit.directive.md
View File

@@ -1,21 +1,9 @@
# Process Audit Directive
Provide a way to fetch the Process Audit information in the pdf or json format.
Fetches the Process Audit information in the pdf or json format.
![adf-process-audit-directive](docassets/images/adf-process-audit-directive.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
@@ -24,8 +12,8 @@ Provide a way to fetch the Process Audit information in the pdf or json format.
[process-id]="processId"
[format]="'pdf'"
[download]="true"
md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
<md-icon>assignment_ind</md-icon>
mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
<mat-icon>assignment_ind</mat-icon>
</button>
```

18
docs/task-audit.directive.md
View File

@@ -1,21 +1,9 @@
# Task Audit Directive
Provides a way to fetch the Task Audit information in the pdf or json format.
Fetches the Task Audit information in the pdf or json format.
![adf-task-audit-directive](docassets/images/adf-task-audit-directive.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
@@ -23,8 +11,8 @@ Provides a way to fetch the Task Audit information in the pdf or json format.
adf-task-audit
[task-id]="taskId"
[download]="download"
md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
<md-icon>assignment_ind</md-icon>
mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
<mat-icon>assignment_ind</mat-icon>
</button>
```

30
docs/toolbar.component.md
View File

@@ -24,11 +24,11 @@ Simple container for headers, titles, actions and breadcrumbs.
```html
<adf-toolbar title="Toolbar">
<button md-icon-button>
<md-icon>create_new_folder</md-icon>
<button mat-icon-button>
<mat-icon>create_new_folder</mat-icon>
</button>
<button md-icon-button>
<md-icon>delete</md-icon>
<button mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
</adf-toolbar>
```
@@ -80,27 +80,27 @@ You can use the following example to create a dropdown menu:
<adf-toolbar title="Toolbar">
...
<button md-icon-button [mdMenuTriggerFor]="menu">
<md-icon>more_vert</md-icon>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon>dialpad</md-icon>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button md-menu-item disabled>
<md-icon>voicemail</md-icon>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voicemail</span>
</button>
<button md-menu-item>
<md-icon>notifications_off</md-icon>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</md-menu>
</mat-menu>
</adf-toolbar>
```
The code above is based on the `<md-menu>` component from the `@angular/material` library. You can use any custom menu component as well.
The code above is based on the `<mat-menu>` component from the `@angular/material` library. You can use any custom menu component as well.
![](docassets/images/adf-toolbar-03.png)