From 3240929dd3119ef2201640d0daf5272dc6bcaca9 Mon Sep 17 00:00:00 2001 From: Andy Stark <30621568+therealandeeee@users.noreply.github.com> Date: Mon, 30 Oct 2017 18:23:27 +0000 Subject: [PATCH] [ADF-616] Document Angular Material Design (#2569) --- docs/README.md | 7 +++- docs/angular-material-design.md | 61 +++++++++++++++++++++++++++++++ docs/document-list.component.md | 3 +- docs/seeAlsoGraph.json | 4 +- docs/summary.json | 1 + docs/version-list.component.md | 28 ++++++++++++++ docs/version-manager.component.md | 25 +++---------- 7 files changed, 106 insertions(+), 23 deletions(-) create mode 100644 docs/angular-material-design.md create mode 100644 docs/version-list.component.md diff --git a/docs/README.md b/docs/README.md index 00d2851c00..325d03aa75 100644 --- a/docs/README.md +++ b/docs/README.md @@ -30,6 +30,7 @@ to the appropriate source file. - [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 diff --git a/docs/angular-material-design.md b/docs/angular-material-design.md new file mode 100644 index 0000000000..b5fd0dece5 --- /dev/null +++ b/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. + + + +## See also + +- [Theming](theming.md) + \ No newline at end of file diff --git a/docs/document-list.component.md b/docs/document-list.component.md index 6be203282e..0029336db1 100644 --- a/docs/document-list.component.md +++ b/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) \ No newline at end of file diff --git a/docs/seeAlsoGraph.json b/docs/seeAlsoGraph.json index e769fcd18d..4d65492e22 100644 --- a/docs/seeAlsoGraph.json +++ b/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"] diff --git a/docs/summary.json b/docs/summary.json index f608ea69d9..aea19b0351 100644 --- a/docs/summary.json +++ b/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" } ] \ No newline at end of file diff --git a/docs/version-list.component.md b/docs/version-list.component.md new file mode 100644 index 0000000000..8a9abe2a48 --- /dev/null +++ b/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 + +``` + +### 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. + + + +## See also + +- [Version manager component](version-manager.component.md) + \ No newline at end of file diff --git a/docs/version-manager.component.md b/docs/version-manager.component.md index 1baad89788..0891319ccd 100644 --- a/docs/version-manager.component.md +++ b/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 ``` -## 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 - -``` - -### 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. | - ## See also + +- [Version list component](version-list.component.md) +- [Document list component](document-list.component.md) \ No newline at end of file