From 126e73f5f375126986d9d69a61fa1ec366de5b2f Mon Sep 17 00:00:00 2001 From: Andy Stark <30621568+therealandeeee@users.noreply.github.com> Date: Fri, 16 Mar 2018 17:26:39 +0000 Subject: [PATCH] [ADF-2463] Moved user guide pages to a subfolder (#3083) * [ADF-2463] Moved user guide to a subfolder * [ADF-2463] Fixed broken links and images --- docs/README.md | 12 +- .../document-list.component.md | 2 +- docs/core/form-field.model.md | 4 +- docs/core/form-rendering.service.md | 4 +- docs/core/form.component.md | 2 +- docs/core/language-menu.component.md | 2 +- docs/core/translation.service.md | 2 +- docs/insights/widget.component.md | 4 +- docs/seeAlsoGraph.json | 145 ------------------ .../angular-material-design.md | 0 docs/{ => user-guide}/extensibility.md | 22 +-- docs/{ => user-guide}/internationalization.md | 20 +-- docs/{ => user-guide}/metadata-indicators.md | 6 +- docs/{ => user-guide}/stencils.md | 0 docs/{ => user-guide}/summary.json | 0 docs/{ => user-guide}/theming.md | 2 +- docs/{ => user-guide}/typography.md | 0 lib/config/DocProcessor/tools/index.js | 6 +- 18 files changed, 45 insertions(+), 188 deletions(-) delete mode 100644 docs/seeAlsoGraph.json rename docs/{ => user-guide}/angular-material-design.md (100%) rename docs/{ => user-guide}/extensibility.md (91%) rename docs/{ => user-guide}/internationalization.md (90%) rename docs/{ => user-guide}/metadata-indicators.md (97%) rename docs/{ => user-guide}/stencils.md (100%) rename docs/{ => user-guide}/summary.json (100%) rename docs/{ => user-guide}/theming.md (98%) rename docs/{ => user-guide}/typography.md (100%) diff --git a/docs/README.md b/docs/README.md index 297817ab5d..4554e48624 100644 --- a/docs/README.md +++ b/docs/README.md @@ -28,12 +28,12 @@ that the component is complete and suitable for normal use. The other status lev -- [Angular Material Design](angular-material-design.md) -- [Form Extensibility and Customisation](extensibility.md) -- [Internationalization in ADF](internationalization.md) -- [Theming](theming.md) -- [Typography](typography.md) -- [Walkthrough - adding indicators to highlight information about a node](metadata-indicators.md) +- [Angular Material Design](user-guide/angular-material-design.md) +- [Form Extensibility and Customisation](user-guide/extensibility.md) +- [Internationalization in ADF](user-guide/internationalization.md) +- [Theming](user-guide/theming.md) +- [Typography](user-guide/typography.md) +- [Walkthrough - adding indicators to highlight information about a node](user-guide/metadata-indicators.md) diff --git a/docs/content-services/document-list.component.md b/docs/content-services/document-list.component.md index 044116e795..893587fdb4 100644 --- a/docs/content-services/document-list.component.md +++ b/docs/content-services/document-list.component.md @@ -806,7 +806,7 @@ This will give the following output: - [Pagination component](../core/pagination.component.md) - [Infinite pagination component](../core/infinite-pagination.component.md) - [Sites dropdown component](sites-dropdown.component.md) -- [Metadata indicators](../metadata-indicators.md) +- [Metadata indicators](../user-guide/metadata-indicators.md) - [Document library model](document-library.model.md) - [Nodes api service](../core/nodes-api.service.md) - [Breadcrumb component](breadcrumb.component.md) diff --git a/docs/core/form-field.model.md b/docs/core/form-field.model.md index 3069a60410..32f7a24679 100644 --- a/docs/core/form-field.model.md +++ b/docs/core/form-field.model.md @@ -60,7 +60,7 @@ You will need to use the properties of `FormFieldModel` if you want to implement custom widgets. Aside from the `value` property (which contains the data value entered into the field), there are also a few other fields that are used for specific types of data. For example, the `currency` property holds the currency symbol to be displayed next to the value -(such as the dollar sign $) and the `dateDisplayFormat` defines how the elements of a date/time will be arranged. See the [Form Extensibility and Customization](../extensibility.md) for more information about creating custom widgets. +(such as the dollar sign $) and the `dateDisplayFormat` defines how the elements of a date/time will be arranged. See the [Form Extensibility and Customization](../user-guide/extensibility.md) for more information about creating custom widgets. ### Validation @@ -93,7 +93,7 @@ contains full details about how the REST calls work, along with a worked example ## See also -- [Extensibility](../extensibility.md) +- [Extensibility](../user-guide/extensibility.md) - [FormFieldValidator](form-field-validator.interface.md) - [Form rendering service](form-rendering.service.md) - [Form component](form.component.md) diff --git a/docs/core/form-rendering.service.md b/docs/core/form-rendering.service.md index 051c118d05..52eef70809 100644 --- a/docs/core/form-rendering.service.md +++ b/docs/core/form-rendering.service.md @@ -90,11 +90,11 @@ formRenderingService.setComponentTypeResolver('text', newResolver, true); You would typically use this to replace an existing widget with your own custom version that implements a modified layout or responds differently when the data is entered. See the -[Form Extensibility and Customisation](../extensibility.md) guide for further details and examples +[Form Extensibility and Customisation](../user-guide/extensibility.md) guide for further details and examples of this technique. ## See also -- [Extensibility](../extensibility.md) +- [Extensibility](../user-guide/extensibility.md) - [Form field model](form-field.model.md) - [Form component](form.component.md) diff --git a/docs/core/form.component.md b/docs/core/form.component.md index 408ba97a94..436f10b58e 100644 --- a/docs/core/form.component.md +++ b/docs/core/form.component.md @@ -338,6 +338,6 @@ Using the CSS you can target any outcome ID and change the style as in this exam ## See also - [FormFieldValidator](form-field-validator.interface.md) -- [Extensibility](../extensibility.md) +- [Extensibility](../user-guide/extensibility.md) - [Form rendering service](form-rendering.service.md) - [Form field model](form-field.model.md) diff --git a/docs/core/language-menu.component.md b/docs/core/language-menu.component.md index 0ffeb4a0ae..c202669144 100644 --- a/docs/core/language-menu.component.md +++ b/docs/core/language-menu.component.md @@ -72,4 +72,4 @@ In the previous example we are using the ADF Language Menu as nested menu. ## See Also -- [Internationalization](../internationalization.md) +- [Internationalization](../user-guide/internationalization.md) diff --git a/docs/core/translation.service.md b/docs/core/translation.service.md index 297c3e0544..fe6e2660ea 100644 --- a/docs/core/translation.service.md +++ b/docs/core/translation.service.md @@ -149,4 +149,4 @@ class MyComponent { ## See Also -- [Internationalization](../internationalization.md) +- [Internationalization](../user-guide/internationalization.md) diff --git a/docs/insights/widget.component.md b/docs/insights/widget.component.md index 27ce4a802e..553d5feb40 100644 --- a/docs/insights/widget.component.md +++ b/docs/insights/widget.component.md @@ -31,9 +31,9 @@ export class CustomEditorComponent extends WidgetComponent {} ## Details The Widget component is the base class for all standard and custom form widgets. See the -[Form Extensibility and Customisation](../extensibility.md) page for full details about +[Form Extensibility and Customisation](../user-guide/extensibility.md) page for full details about implementing custom widgets. ## See also -- [Extensibility](../extensibility.md) +- [Extensibility](../user-guide/extensibility.md) diff --git a/docs/seeAlsoGraph.json b/docs/seeAlsoGraph.json deleted file mode 100644 index f168ddcaa1..0000000000 --- a/docs/seeAlsoGraph.json +++ /dev/null @@ -1,145 +0,0 @@ -{ - "accordion.component": ["accordion-group.component"], - "accordion-group.component": [], - "alfresco-api.service": [], - "analytics-generator.component": [], - "analytics-report-list.component": [], - "analytics.component": [], - "angular-material-design": ["theming"], - "app-config.service": [], - "apps-list.component": [], - "apps-process.service": ["filter.model"], - "auth-guard.service": ["auth-guard-bpm.service", "auth-guard-ecm.service"], - "auth-guard-bpm.service": ["auth-guard-ecm.service"], - "auth-guard-ecm.service": [], - "authentication.service": [], - "breadcrumb.component": ["document-list.component"], - "bpm-user.model": ["bpm-user.service", "ecm-user.model", "people-process.service"], - "bpm-user.service": ["ecm-user.service"], - "card-view.component": ["card-view-update.service"], - "card-view-update.service": [], - "checklist.component": [], - "comments.component": [], - "comment-process.model": [], - "comment-process.service": ["comment-process.model"], - "content-action.component": ["document-list.component", "document-actions.service", "folder-actions.service"], - "content-node-selector.component": ["document-list.component"], - "content.service": ["cookie.service", "storage.service"], - "context-menu.directive": [], - "cookie.service": ["content.service"], - "create-process-attachment.component": [], - "create-task-attachment.component": [], - "data-column.component": ["document-list.component", "datatable.component", "task-list.component"], - "datatable.component": [ - "data-column.component", - "pagination.component" - ], - "DataTableAdapter": ["datatable.component", "task-list.component"], - "deleted-nodes-api.service": [], - "diagram.component": [], - "discovery-api.service": ["product-version.model"], - "document-actions.service": [], - "document-library.model": [], - "document-list.component": [ - "datatable.component", - "data-column.component", - "pagination.component", - "infinite-pagination.component", - "sites-dropdown.component", - "metadata-indicators", - "document-library.model", - "nodes-api.service" - ], - "document-list.service": ["document-list.component"], - "dropdown-breadcrumb.component": ["document-list.component", "breadcrumb.component"], - "ecm-user.model": ["ecm-user.service", "people-content.service"], - "ecm-user.service": [], - "extensibility": [], - "file-uploading-dialog.component": ["upload-button.component","upload-drag-area.component"], - "filter.model": ["process-filters.component", "task-filters.component"], - "folder-actions.service": ["document-actions.service"], - "form-list.component": [], - "form-field.model": ["extensibility", "FormFieldValidator", "form-rendering.service"], - "form-rendering.service": ["extensibility"], - "form.component": [ - "stencils", - "FormFieldValidator", - "extensibility", - "form-rendering.service", - "form-field.model" - ], - "form.service": [], - "FormFieldValidator": [], - "highlight.directive": ["text-highlight.pipe"], - "highlight-transform.service": ["text-highlight.pipe", "highlight.directive"], - "infinite-pagination.component": [], - "info-drawer.component": ["info-drawer-layout.component"], - "info-drawer-layout.component": [], - "like.component": ["rating.component"], - "login.component": ["logout.directive"], - "logout.directive": [], - "metadata-indicators": [], - "mime-type-icon.pipe": [], - "node-permission.directive": [], - "nodes-api.service": ["document-library.model", "deleted-nodes-api.service"], - "node.service": ["nodes-api.service", "deleted-nodes-api.service"], - "notification.service": [], - "pagination.component": ["infinite-pagination.component"], - "page-title.service": ["app-config.service"], - "permissions-style.model": ["document-list.component"], - "people-search.component": [], - "people.component": [], - "people-content.service": ["people-process.service"], - "people-process.service": ["user-process.model"], - "process-attachment-list.component": [], - "process-audit.directive": [], - "process-comments.component": [], - "process-filters.component": [], - "process-instance-details.component": [], - "process-instance-header.component": [], - "process-instance-tasks.component": [], - "process-list.component": [], - "product-version.model": [], - "rating.component": ["like.component"], - "rating.service": ["like.component", "rating.component"], - "renditions.service": [], - "search-control.component": ["search.component"], - "search.component": [], - "site.model": [], - "sites.service": ["site.model"], - "sites-dropdown.component": [], - "start-process.component": [], - "start-task.component": [], - "stencils": [], - "storage.service": ["cookie.service"], - "tag-actions.component": [], - "tag-list.component": [], - "tag.service": ["tag-list.component"], - "tag-node-list.component": [], - "task-attachment-list.component": [], - "task-audit.directive": [], - "task-details.component": [], - "task-details.model": [], - "task-filters.component": [], - "task-header.component": [], - "task-list.component": [], - "text-highlight.pipe": [], - "theming": [], - "thumbnail.service": ["mime-type-icon.pipe"], - "toolbar-divider.component": [], - "toolbar-title.component": [], - "toolbar.component": ["toolbar-divider.component", "toolbar-title.component"], - "translation.service": [], - "upload-button.component": [], - "upload-drag-area.component": [], - "upload.directive": [], - "upload.service": [], - "user-info.component": [], - "user-preferences.service": [], - "user-process.model": [], - "version-manager.component": ["version-list.component", "document-list.component"], - "version-list.component": [], - "viewer.component": [], - "webscript.component": [], - "widget.component": ["extensibility"] -} diff --git a/docs/angular-material-design.md b/docs/user-guide/angular-material-design.md similarity index 100% rename from docs/angular-material-design.md rename to docs/user-guide/angular-material-design.md diff --git a/docs/extensibility.md b/docs/user-guide/extensibility.md similarity index 91% rename from docs/extensibility.md rename to docs/user-guide/extensibility.md index 193ad74df8..097d4b4fd6 100644 --- a/docs/extensibility.md +++ b/docs/user-guide/extensibility.md @@ -94,7 +94,7 @@ rendered within `` component. First let's create a simple APS form with `Text` widgets: -![default text widget](docassets/images/text-default-widget.png) +![default text widget](../docassets/images/text-default-widget.png) Every custom widget must inherit `WidgetComponent` class in order to function properly: @@ -161,7 +161,7 @@ export class MyView { At runtime it should look similar to the following: -![custom text widget](docassets/images/text-custom-widget.png) +![custom text widget](../docassets/images/text-custom-widget.png) ## Replacing custom stencils with custom components @@ -171,7 +171,7 @@ This is a short walkthrough on rendering custom APS stencils by means of custom First let's create a basic stencil and call it `Custom Stencil 01`: -![custom stencil](docassets/images/activiti-stencil-01.png) +![custom stencil](../docassets/images/activiti-stencil-01.png) _Note the `internal identifier` value as it will become a `field type` value when corresponding form is rendered._ @@ -183,17 +183,17 @@ Next put some simple html layout for `Form runtime template` and `Form editor te Now you are ready to design a test form based on your custom stencil: -![custom stencil form](docassets/images/activiti-stencil-02.png) +![custom stencil form](../docassets/images/activiti-stencil-02.png) Once wired with a new task it should look like the following within APS web application: -![custom stencil task](docassets/images/activiti-stencil-03.png) +![custom stencil task](../docassets/images/activiti-stencil-03.png) ### Creating custom widget If you load previously created task into ADF `` component you will see something like the following: -![adf stencil](docassets/images/adf-stencil-01.png) +![adf stencil](../docassets/images/adf-stencil-01.png) Let's create an Angular component to render missing content: @@ -255,11 +255,11 @@ export class MyView { At runtime you should now see your custom Angular component rendered in place of the stencils: -![adf stencil runtime](docassets/images/adf-stencil-02.png) +![adf stencil runtime](../docassets/images/adf-stencil-02.png) ## See Also -- [Form field model](core/form-field.model.md) -- [Form rendering service](core/form-rendering.service.md) -- [Form component](core/form.component.md) -- [Widget component](insights/widget.component.md) +- [Form field model](../core/form-field.model.md) +- [Form rendering service](../core/form-rendering.service.md) +- [Form component](../core/form.component.md) +- [Widget component](../insights/widget.component.md) diff --git a/docs/internationalization.md b/docs/user-guide/internationalization.md similarity index 90% rename from docs/internationalization.md rename to docs/user-guide/internationalization.md index ca55f300bf..075c0ae19e 100644 --- a/docs/internationalization.md +++ b/docs/user-guide/internationalization.md @@ -71,7 +71,7 @@ notation (so `FORM.START_FORM.TITLE` would be the key for the "Start Form" string here). This is useful for grouping related messages and providing singular and plural versions, among other things. -The [Translation service](core/translation.service.md) defines the `get` method to +The [Translation service](../core/translation.service.md) defines the `get` method to get the translation of a key in the current language. A simple component might contain code like this: @@ -107,7 +107,7 @@ export class HomeComponent implements OnInit { In the browser, this is displayed as: -![English translation text](docassets/images/TransExEn.png) +![English translation text](../docassets/images/TransExEn.png) English is used by default but you can easily change the language with the `use` method: @@ -124,7 +124,7 @@ ngOnInit() { The user will now see: -![German translation text](docassets/images/TransExDe.png) +![German translation text](../docassets/images/TransExDe.png) Note that an unrecognized key will be returned unchanged as the "translation". If you see strings like "FORM.START_FORM.TITLE" displayed in your app then you @@ -146,7 +146,7 @@ component's `.ts` file: The built-in translations certainly won't cover everything you will need for your app but you can easily replace them with your own lists. This involves making copies of the existing lists in your app's folder and adding your -own keys. See the [Translation service](core/translation.service.md) page for +own keys. See the [Translation service](../core/translation.service.md) page for full details and examples. ## Interpolations @@ -191,30 +191,30 @@ You can use interpolations with the `translate` pipe in a similar way: ## Selecting the display language -ADF provides a [Language Menu component](core/language-menu.component.md) that +ADF provides a [Language Menu component](../core/language-menu.component.md) that you can add to a page to let the user choose their preferred language. The available languages are defined in the `app.config.json` file for the app. Note that when the user selects an item from the menu, it simply changes the "locale" -preference (which you can get via the [User Preferences service](core/user-preferences.service.md)). +preference (which you can get via the [User Preferences service](../core/user-preferences.service.md)). The `translate` pipe reacts automatically to this and changes the page text immediately to the new language. However, text added via a variable set using `TranslationService.get`, as in the example above, will not be updated like this; you will need to get a new translation and set the variable's value again explicitly from the code. -See the [Language Menu component](core/language-menu.component.md) page for further +See the [Language Menu component](../core/language-menu.component.md) page for further details and usage examples. ## Support for i18n within ADF components Some components allow you to use translation keys in places where you would normally supply your own messages directly. For example, the -[Data Column component](core/data-column.component.md) can accept a key instead of +[Data Column component](../core/data-column.component.md) can accept a key instead of normal text to specify the column title. Consult the documentation for a component to see if it has built-in support for i18n. ## See also -- [Translation service](core/translation.service.md) -- [Language Menu component](core/language-menu.component.md) +- [Translation service](../core/translation.service.md) +- [Language Menu component](../core/language-menu.component.md) diff --git a/docs/metadata-indicators.md b/docs/user-guide/metadata-indicators.md similarity index 97% rename from docs/metadata-indicators.md rename to docs/user-guide/metadata-indicators.md index e283be893e..58b3a4d0e8 100644 --- a/docs/metadata-indicators.md +++ b/docs/user-guide/metadata-indicators.md @@ -8,7 +8,7 @@ All metadata is stored inside `properties` property. Here's an example of basic image-related metadata fetched from the server: -![](docassets/images/metadata-01.png) +![](../docassets/images/metadata-01.png) ## Custom column template @@ -93,12 +93,12 @@ You will need to enable `versioning` feature for the Document List to be able to Drag and drop any image file to upload it and ensure it has `1.0` displayed in the column: -![](docassets/images/metadata-02.png) +![](../docassets/images/metadata-02.png) Now drop the same file again to upload a new version of the file. You should now see icons instead of version label. -![](docassets/images/metadata-03.png) +![](../docassets/images/metadata-03.png) You can see on the screenshot above that only files with version `2.0` got extra icons. diff --git a/docs/stencils.md b/docs/user-guide/stencils.md similarity index 100% rename from docs/stencils.md rename to docs/user-guide/stencils.md diff --git a/docs/summary.json b/docs/user-guide/summary.json similarity index 100% rename from docs/summary.json rename to docs/user-guide/summary.json diff --git a/docs/theming.md b/docs/user-guide/theming.md similarity index 98% rename from docs/theming.md rename to docs/user-guide/theming.md index e3dc943245..619f4f84ac 100644 --- a/docs/theming.md +++ b/docs/user-guide/theming.md @@ -12,7 +12,7 @@ throughout the app) and the **accent** color (used mainly for highlighting and c out specific UI elements). Each of these colors is defined in a number of shades. For example, a blue/orange theme could define shades like the following: -![Theme swatches](docassets/images/ThemeSwatches.png) +![Theme swatches](../docassets/images/ThemeSwatches.png) Each shade is related to a particular purpose or set of purposes within the app. So for example, the shade that works best for text isn't necessarily the same shade you would use diff --git a/docs/typography.md b/docs/user-guide/typography.md similarity index 100% rename from docs/typography.md rename to docs/user-guide/typography.md diff --git a/lib/config/DocProcessor/tools/index.js b/lib/config/DocProcessor/tools/index.js index 38462ebe29..920b25fd15 100644 --- a/lib/config/DocProcessor/tools/index.js +++ b/lib/config/DocProcessor/tools/index.js @@ -24,7 +24,9 @@ var docsFolderPath = path.resolve("..", "docs"); var undocStoplistFileName = path.resolve(docsFolderPath, "undocStoplist.json"); var rootFolder = "."; var indexMdFilePath = path.resolve(docsFolderPath, "README.md"); -var guideSummaryFileName = path.resolve(docsFolderPath, "summary.json"); + +var guideFolderName = "user-guide"; +var guideSummaryFileName = path.resolve(docsFolderPath, guideFolderName, "summary.json"); var maxBriefDescLength = 180; @@ -373,7 +375,7 @@ function buildGuideSection(guideJsonFilename) { var listItems = []; for (var i = 0; i < summary.length; i++) { - var link = unist.makeLink(unist.makeText(summary[i].title), summary[i].file); + var link = unist.makeLink(unist.makeText(summary[i].title), guideFolderName + "/" + summary[i].file); listItems.push(unist.makeListItem(link)); }