mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[APM-7] Feature enhancement for the create and edit folder directive (#3179)
* Add observable menu open state to the sidenav-layout component * add documentation, fix inversed value * Add success events to folder create/edit directives * Overridable dialog titles for the directives * Update the documentation
This commit is contained in:
committed by
Eugenio Romano
parent
21ad4c2894
commit
ee9393caf0
@@ -13,7 +13,9 @@ Creates folders.
|
||||
```html
|
||||
<adf-toolbar>
|
||||
<button mat-icon-button
|
||||
[adf-create-folder]="documentList.currentFolderId">
|
||||
[adf-create-folder]="documentList.currentFolderId"
|
||||
title="Title of the dialog"
|
||||
(success)="doSomething($event)">
|
||||
<mat-icon>create_new_folder</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
@@ -30,12 +32,14 @@ Creates folders.
|
||||
| Name | Type | Default value | Description |
|
||||
| -- | -- | -- | -- |
|
||||
| adf-create-folder | `string` | DEFAULT_FOLDER_PARENT_ID | Parent folder where the new folder will be located after creation. |
|
||||
| title | `string` | null | The title of the opened dialog. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| error | `EventEmitter<any>` | Emitted when an error occurs (for example a folder with same name already exists) |
|
||||
| success | `EventEmitter<MinimalNodeEntryEntity>` | Emitted when the creation successfully happened |
|
||||
|
||||
## Details
|
||||
|
||||
|
@@ -13,7 +13,9 @@ Allows folders to be edited.
|
||||
```html
|
||||
<adf-toolbar title="toolbar example">
|
||||
<button mat-icon-button
|
||||
[adf-edit-folder]="documentList.selection[0]?.entry">
|
||||
[adf-edit-folder]="documentList.selection[0]?.entry"
|
||||
title="Title of the dialog"
|
||||
(success)="doSomething($event)">
|
||||
<mat-icon>create</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
@@ -30,12 +32,14 @@ Allows folders to be edited.
|
||||
| Name | Type | Default value | Description |
|
||||
| -- | -- | -- | -- |
|
||||
| adf-edit-folder | `MinimalNodeEntryEntity` | | Folder node to edit. |
|
||||
| title | `string` | null | The title of the opened dialog. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| -- | -- | -- |
|
||||
| error | `EventEmitter<any>` | Emitted when an error occurs (for example a folder with same name already exists) |
|
||||
| success | `EventEmitter<MinimalNodeEntryEntity>` | Emitted when the edition successfully happened |
|
||||
|
||||
## Details
|
||||
|
||||
|
@@ -65,8 +65,7 @@ The layout will select between a small screen (ie, mobile) configuration and a l
|
||||
configuration according to the screen size in pixels (the `stepOver` property sets the
|
||||
number of pixels at which the switch will occur).
|
||||
|
||||
The small screen layout uses the Angular Material
|
||||
[Sidenav component](https://material.angularjs.org/latest/api/directive/mdSidenav) which is
|
||||
The small screen layout uses the Angular Material [Sidenav component](https://material.angularjs.org/latest/api/directive/mdSidenav) which is
|
||||
described in detail on their website.
|
||||
|
||||
The ADF-style (ie, large screen) Sidenav has two states: **expanded** and **compact**.
|
||||
@@ -83,6 +82,12 @@ Desktop layout (screen width greater than the `stepOver` value):
|
||||
Mobile layout (screen width less than the `stepOver` value):
|
||||

|
||||
|
||||
### Public attributes
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| menuOpenState$ | Observable<boolean> | true | Another way to listen to menu open/closed state |
|
||||
|
||||
### Template context
|
||||
|
||||
Each template is given a context containing the following methods:
|
||||
@@ -91,4 +96,13 @@ Each template is given a context containing the following methods:
|
||||
Triggers menu toggling.
|
||||
|
||||
- `isMenuMinimized(): boolean`
|
||||
Is the menu in minimized/compacted state? Only works for large screen layouts.
|
||||
The expanded/compact (minimized) state of the navigation. This one only makes sense in case of desktop size, when the screen size is above the value of stepOver.
|
||||
|
||||
### menuOpenState$
|
||||
|
||||
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is the menuOpenState$ observable, which is driven by a BehaviorSubject at the background. The value emitted on this observable is the opposite of the isMenuMinimized template variable.
|
||||
|
||||
Every time the menu state is changed, the following values are emitted:
|
||||
|
||||
- true, if the menu got into opened state
|
||||
- false, if the menu git into closed state
|
Reference in New Issue
Block a user