[ADF-616] Document Angular Material Design (#2569)

docs/README.md

@@ -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

docs/angular-material-design.md

@@ -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 -->

docs/document-list.component.md

@@ -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 -->

docs/seeAlsoGraph.json

@@ -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"]

docs/summary.json

@@ -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" }
 ]

docs/version-list.component.md

@@ -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 -->

docs/version-manager.component.md

@@ -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.
 
 ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `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. |
 
-
+## Details
-## 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. |
 
 ### 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 -->