mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-616] Document Angular Material Design (#2569)
This commit is contained in:
@@ -30,6 +30,7 @@ to the appropriate source file.
|
||||
<!-- guide start -->
|
||||
- [Form Extensibility and Customisation](extensibility.md)
|
||||
- [Form Stencils with Angular 2](stencils.md)
|
||||
- [Angular Material Design](angular-material-design.md)
|
||||
- [Theming](theming.md)
|
||||
- [Walkthrough: adding indicators to highlight information about a node](metadata-indicators.md)
|
||||
|
||||
@@ -421,8 +422,10 @@ for more information about installing and using the source code.
|
||||
- [Content action component](content-action.component.md)
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Sites dropdown component](sites-dropdown.component.md)
|
||||
- [Version list component](version-list.component.md)
|
||||
- [Version manager component](version-manager.component.md)
|
||||
- [*Content node selector component](../ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
|
||||
- [Version Manager Component](version-manager.component.md)
|
||||
- [*Version upload component](../ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-upload.component.ts)
|
||||
|
||||
### Models
|
||||
|
||||
@@ -565,9 +568,9 @@ for more information about installing and using the source code.
|
||||
- [*PdfViewer component](../ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts)
|
||||
- [*TxtViewer component](../ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts)
|
||||
- [*Unknown format component](../ng2-components/ng2-alfresco-viewer/src/components/unknown-format/unknown-format.component.ts)
|
||||
- [*Viewer info drawer component](../ng2-components/ng2-alfresco-viewer/src/components/viewer-info-drawer.component.ts)
|
||||
- [*Viewer more actions component](../ng2-components/ng2-alfresco-viewer/src/components/viewer-more-actions.component.ts)
|
||||
- [*Viewer open with component](../ng2-components/ng2-alfresco-viewer/src/components/viewer-open-with.component.ts)
|
||||
- [*Viewer sidebar component](../ng2-components/ng2-alfresco-viewer/src/components/viewer-sidebar.component.ts)
|
||||
- [*Viewer toolbar component](../ng2-components/ng2-alfresco-viewer/src/components/viewer-toolbar.component.ts)
|
||||
|
||||
### Directives
|
||||
|
61
docs/angular-material-design.md
Normal file
61
docs/angular-material-design.md
Normal file
@@ -0,0 +1,61 @@
|
||||
# Angular Material Design
|
||||
|
||||
Google's
|
||||
[Material Design](https://material.io/guidelines/material-design/introduction.html)
|
||||
is an example of a *design language*, a
|
||||
general set of principles and ideas that are used to give designs a
|
||||
consistent look and feel. A design language might be used in-house by
|
||||
a company to maintain a "family resemblance" between its products or to
|
||||
produce user-friendly signage. Material Design is Google's approach to
|
||||
keeping user interfaces consistent between apps, using insights from
|
||||
product design and cognitive psychology.
|
||||
|
||||
[Angular Material](https://material.angular.io/) is a set of components,
|
||||
styles and other GUI elements
|
||||
that follow the Material Design guidelines. ADF uses Angular Material
|
||||
to implement its components but you can also use it directly when
|
||||
creating your own components or modifying the ones provided by ADF.
|
||||
|
||||
## Themes
|
||||
|
||||
Material Design doesn't enforce one single color scheme but it does
|
||||
specify a number of **themes**. A theme is a set of colors in various
|
||||
shades, each of which lends itself to a particular task in the GUI.
|
||||
For example, using the suggested shades for status bars, backgrounds
|
||||
and shadows helps to give the correct emphasis to these elements and
|
||||
ensure they look familiar to the user. The Material Design
|
||||
[themes documentation](https://material.io/guidelines/style/color.html#color-themes)
|
||||
has more information as well as color swatches and other resources.
|
||||
|
||||
An advantage of using themes is that one theme can easily be replaced
|
||||
by another - the CSS styling is designed so that a given class name in one theme plays
|
||||
an equivalent role in all other themes. See the [Theming](theming.md) page
|
||||
for details of how to apply an off-the-shelf theme to your ADF app or to
|
||||
create your own theme.
|
||||
|
||||
## Components
|
||||
|
||||
Angular Material implements a variety of GUI components. These include
|
||||
controls like radio buttons and checkboxes but also structures for layout
|
||||
(lists, grids, etc) and navigation (toolbars, sidebars, menus). See the
|
||||
[components section](https://material.angular.io/components/categories) of
|
||||
the Angular Material docs for more information.
|
||||
|
||||
## Icons
|
||||
|
||||
Material Design has extensive
|
||||
[guidelines](https://material.io/guidelines/style/icons.html) for the design
|
||||
of icons. These images serve as visual indicators for GUI functions and data
|
||||
elements (eg, a small graphic of a person could denote a user). A selection of
|
||||
standard icons is also available for common items. For example, a microphone
|
||||
icon indicates audio input while a magnifying glass emphasizes a search box.
|
||||
See the Material Design
|
||||
[system icon docs](https://material.io/guidelines/style/icons.html#icons-system-icons)
|
||||
for further information and to download the set of standard icon images.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Theming](theming.md)
|
||||
<!-- seealso end -->
|
@@ -57,7 +57,7 @@ The properties currentFolderId, folderNode and node are the entry initialization
|
||||
| rowStyleClass | string | | The CSS class to apply to every row |
|
||||
| currentFolderId | string | null | The ID of the folder node to display or a reserved string alias for special sources (see **Data Sources**) |
|
||||
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node |
|
||||
| permissionsStyle | [PermissionStyleModel[]](permission-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permission-style.model.md) page for further details and examples. |
|
||||
| permissionsStyle | [PermissionStyleModel[]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. |
|
||||
| paginationStrategy | PaginationStrategy | PaginationStrategy.Finite | The pagination type to be shown, can be Finite or Infinite |
|
||||
| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity |
|
||||
| navigate | boolean | true | Toggles navigation to folder content or file preview |
|
||||
@@ -743,4 +743,5 @@ That will give the following output:
|
||||
- [Content action component](content-action.component.md)
|
||||
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
|
||||
- [Permissions style model](permissions-style.model.md)
|
||||
- [Version manager component](version-manager.component.md)
|
||||
<!-- seealso end -->
|
@@ -5,6 +5,7 @@
|
||||
"analytics-generator.component": [],
|
||||
"analytics-report-list.component": [],
|
||||
"analytics.component": [],
|
||||
"angular-material-design": ["theming"],
|
||||
"app-config.service": [],
|
||||
"apps-list.component": [],
|
||||
"authentication.service": [],
|
||||
@@ -38,7 +39,6 @@
|
||||
"nodes-api.service"
|
||||
],
|
||||
"dropdown-breadcrumb.component": ["document-list.component", "breadcrumb.component"],
|
||||
"version-manager": ["document-list.component"],
|
||||
"extensibility": [],
|
||||
"file-uploading-dialog.component": [],
|
||||
"folder-actions.service": ["document-actions.service"],
|
||||
@@ -109,6 +109,8 @@
|
||||
"upload.service": [],
|
||||
"user-info.component": [],
|
||||
"user-preferences.service": [],
|
||||
"version-manager.component": ["version-list.component", "document-list.component"],
|
||||
"version-list.component": [],
|
||||
"viewer.component": [],
|
||||
"webscript.component": [],
|
||||
"widget.component": ["extensibility"]
|
||||
|
@@ -1,6 +1,7 @@
|
||||
[
|
||||
{ "title": "Form Extensibility and Customisation", "file": "extensibility.md" },
|
||||
{ "title": "Form Stencils with Angular 2", "file": "stencils.md" },
|
||||
{ "title": "Angular Material Design", "file": "angular-material-design.md" },
|
||||
{ "title": "Theming", "file": "theming.md" },
|
||||
{ "title": "Walkthrough: adding indicators to highlight information about a node", "file": "metadata-indicators.md" }
|
||||
]
|
28
docs/version-list.component.md
Normal file
28
docs/version-list.component.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# Version List component
|
||||
|
||||
Displays the version history of a node in a
|
||||
[Version Manager component](version-manager.component.md)
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<adf-version-list [id]="nodeId"></adf-version-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| id | string | The node id you want to see the version history of. |
|
||||
|
||||
## Details
|
||||
|
||||
Inside the version manager component, there is the underlying VersionListComponent.
|
||||
The VersionListComponent loads and displays the version history of a node.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Version manager component](version-manager.component.md)
|
||||
<!-- seealso end -->
|
@@ -1,6 +1,6 @@
|
||||
# Version Manager Component
|
||||
|
||||
The Version manager component displays the version history of a node with the ability to upload a new version.
|
||||
Displays the version history of a node with the ability to upload a new version.
|
||||
|
||||
 `This component is still in experimental phase, it has several limitations which will be resolved soon.`
|
||||
|
||||
@@ -12,28 +12,13 @@ The Version manager component displays the version history of a node with the ab
|
||||
<adf-version-manager [node]="aMinimalNodeEntryEntity"></adf-version-manager>
|
||||
```
|
||||
|
||||
## Properties
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| node | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | The node you want to manage the version history of. |
|
||||
|
||||
|
||||
## Version List component
|
||||
|
||||
Inside the version manager component, there is the underlying VersionListComponent. The VersionListComponent loads and displays the version history of a node.
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<adf-version-list [id]="nodeId"></adf-version-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| id | string | The node id you want to see the version history of. |
|
||||
## Details
|
||||
|
||||
### Version actions
|
||||
|
||||
@@ -43,8 +28,10 @@ Each version has a context menu on the right, with the following actions.
|
||||
| --- | --- | --- |
|
||||
| Restore | All | Revert the current version to the selected one with creating a new version of it. |
|
||||
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Version list component](version-list.component.md)
|
||||
- [Document list component](document-list.component.md)
|
||||
<!-- seealso end -->
|
Reference in New Issue
Block a user