mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4391] Doc review for 3.2 (#4601)
* [ADF-4391] Reviewed new clipboard class docs * [ADF-4391] Reviewed new proc cloud class docs * [ADF-4391] Reviewed new datatable doc additions
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
16aaa0f0b3
commit
921fdc00df
@@ -2,7 +2,7 @@
|
||||
Title: Data Column Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-12
|
||||
Last reviewed: 2019-04-12
|
||||
---
|
||||
|
||||
# [Data Column Component](../../../lib/core/data-column/data-column.component.ts "Defined in data-column.component.ts")
|
||||
@@ -20,6 +20,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
|
||||
- [Custom tooltips](#custom-tooltips)
|
||||
- [Column Template](#column-template)
|
||||
- [Styling Techniques](#styling-techniques)
|
||||
- [Using the `copyContent` option](#using-the-copycontent-option)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
@@ -42,6 +43,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of cell contents. |
|
||||
| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). |
|
||||
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
|
||||
| formatTooltip | `Function` | | Custom tooltip formatter function. |
|
||||
@@ -49,7 +51,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
|
||||
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
|
||||
| srTitle | `string` | | Title to be used for screen readers. |
|
||||
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
|
||||
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location' and 'json'. |
|
||||
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location', and 'json'. |
|
||||
|
||||
## Details
|
||||
|
||||
@@ -298,6 +300,34 @@ Now you can declare columns and assign the `desktop-only` class where needed:
|
||||
|
||||
|
||||
|
||||
### Using the `copyContent` option
|
||||
|
||||
When the `copyContent` property is true, a
|
||||
Clipboard directive
|
||||
is added to each cell in the column. This lets the user copy the cell content
|
||||
to the clipboard with a mouse click.
|
||||
|
||||
See the [Clipboard Directive](../directives/clipboard.directive.md) page for full details of the directive.
|
||||
|
||||
Example of using `copyContent` from a JSON config file:
|
||||
|
||||
```json
|
||||
[
|
||||
{"type": "text", "key": "id", "title": "Id", "copyContent": "true"},
|
||||
{"type": "text", "key": "name", "title": "name"},
|
||||
]
|
||||
```
|
||||
|
||||
HTML `<data-column>` element example:
|
||||
|
||||
```html
|
||||
<adf-tasklist ...>
|
||||
<data-columns>
|
||||
<data-column [copyContent]="true" key="id" title="Id"></data-column>
|
||||
...
|
||||
</data-columns>
|
||||
</adf-tasklist>
|
||||
```
|
||||
## See also
|
||||
|
||||
- [Document list component](../../content-services/components/document-list.component.md)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
Title: DataTable component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-03-20
|
||||
Last reviewed: 2019-04-12
|
||||
---
|
||||
|
||||
# [DataTable component](../../../lib/core/datatable/components/datatable/datatable.component.ts "Defined in datatable.component.ts")
|
||||
@@ -311,7 +311,7 @@ together in the same datatable.
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| actions | `boolean` | false | Toggles the data actions column. |
|
||||
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
|
||||
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](../directives/upload.directive.md) for further details). |
|
||||
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
|
||||
| columns | `any[]` | \[] | The columns that the datatable will show. |
|
||||
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
|
||||
@@ -625,7 +625,8 @@ widths according to your needs:
|
||||
|
||||
#### No-growing cells
|
||||
|
||||
As mentioned before, in the beginning, all cells have the same width. You can prevent cells from growing by using the `adf-no-grow-cell` class.
|
||||
As mentioned before, all cells initially have the same width. You can prevent cells from
|
||||
growing by using the `adf-no-grow-cell` class.
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -636,7 +637,7 @@ As mentioned before, in the beginning, all cells have the same width. You can pr
|
||||
}
|
||||
```
|
||||
|
||||
Notice that this class is compatible with `adf-ellipsis-cell` and for that reason it has a `min-width` of `100px`. You can override this property in your custom class to better suit your needs.
|
||||
Note that this class is compatible with `adf-ellipsis-cell` and for that reason it has a `min-width` of `100px`. You can override this property in your custom class to better suit your needs.
|
||||
|
||||
|
||||
|
||||
@@ -680,27 +681,6 @@ the total height of all rows exceeds the fixed height of the parent element.
|
||||
</div>
|
||||
```
|
||||
|
||||
### CopyClipboardDirective example
|
||||
|
||||
See the [Copy Content Directive ](../directives/clipboard.directive.md) page for full details of the directive
|
||||
|
||||
Json config file:
|
||||
```json
|
||||
[
|
||||
{"type": "text", "key": "id", "title": "Id", "copyContent": "true"},
|
||||
{"type": "text", "key": "name", "title": "name"},
|
||||
]
|
||||
```
|
||||
HTML data-columns
|
||||
```html
|
||||
<adf-tasklist ...>
|
||||
<data-columns>
|
||||
<data-column [copyContent]="true" key="id" title="Id"></data-column>
|
||||
<data-column key="created" title="Created" class="hidden"></data-column>
|
||||
</data-columns>
|
||||
</adf-tasklist>
|
||||
```
|
||||
|
||||
Once set up, the sticky header behaves as shown in the image below:
|
||||
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
---
|
||||
Title: JsonCell component
|
||||
Added: v2.0.0
|
||||
Title: Json Cell component
|
||||
Added: v3.2.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-04-12
|
||||
---
|
||||
|
||||
# [JsonCellComponent](../../../lib/core/datatable/components/datatable/json-cell.component.ts "Defined in empty-list.component.ts")
|
||||
# [Json Cell Component](../../../lib/core/datatable/components/datatable/json-cell.component.ts "Defined in json-cell.component.ts")
|
||||
|
||||
Show Json formated value inside datatable component.
|
||||
Shows a JSON-formatted value inside a datatable component.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
@@ -18,7 +19,7 @@ Show Json formated value inside datatable component.
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
You can specify the cell inside configuration file
|
||||
You can specify the cell inside the `app.config.json` file:
|
||||
|
||||
```javascript
|
||||
"adf-cloud-process-list": {
|
||||
@@ -40,14 +41,16 @@ You can specify the cell inside configuration file
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | `null` | Data adapter instance. |
|
||||
| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | `null` | Data that defines the column |
|
||||
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | | Data that defines the row |
|
||||
|
||||
| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | | Data that defines the column. |
|
||||
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of the cell's content. |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data table adapter instance. |
|
||||
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | | Data that defines the row. |
|
||||
| tooltip | `string` | | Text for the cell's tooltip. |
|
||||
|
||||
## Details
|
||||
|
||||
This component provides a custom display to show a [Datatable component](datatable.component.md) cell
|
||||
This component provides a custom display to show JSON data in a
|
||||
[Datatable component](datatable.component.md) cell
|
||||
|
||||
## See also
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
Title: Copy Clipboard directive
|
||||
Title: Clipboard directive
|
||||
Added: v3.2.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-04-01
|
||||
Last reviewed: 2019-04-12
|
||||
---
|
||||
|
||||
# [Clipboard directive](../../../lib/core/clipboard/clipboard.directive.ts "Defined in clipboard.directive.ts")
|
||||
|
||||
Copy text to clipboard
|
||||
Copies text to the clipboard.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
@@ -21,16 +21,25 @@ Copy text to clipboard
|
||||
</button>
|
||||
```
|
||||
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| target | `HTMLElement ref` | false | HTMLElement reference |
|
||||
| clipboard-notification | `string` | | Translation key message for toast notification |
|
||||
| adf-clipboard | `string` | | Translation key or message for the tooltip. |
|
||||
| clipboard-notification | `string` | | Translation key or message for snackbar notification. |
|
||||
| target | [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)` \| `[`HTMLTextAreaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement) | | Reference to the HTML element containing the text to copy. |
|
||||
|
||||
## Details
|
||||
|
||||
When the user hover the directive element a tooltip will will show up to inform that, when you click on the current element, the content or the reference content will be copied into the clipboard.
|
||||
Clicking on the decorated element will copy the text content of that element (or the
|
||||
element specified in the `target` property) to the clipboard.
|
||||
|
||||
Use the parameter to `adf-clipboard` to specify a tooltip message that will be shown when
|
||||
the user hovers the mouse over the element. You can also provide a snackbar message in the
|
||||
`clipboard-notification` property, which will appear when the copying is complete.
|
||||
|
||||
## See also
|
||||
|
||||
- [Clipboard service](../../core/services/clipboard.service.md)
|
||||
|
||||
38
docs/core/services/clipboard.service.md
Normal file
38
docs/core/services/clipboard.service.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
Title: Clipboard service
|
||||
Added: v3.2.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-04-12
|
||||
---
|
||||
|
||||
# [Clipboard service](../../../lib/core/clipboard/clipboard.service.ts "Defined in clipboard.service.ts")
|
||||
|
||||
Copies text to the clipboard.
|
||||
|
||||
## Class members
|
||||
|
||||
### Methods
|
||||
|
||||
- **copyContentToClipboard**(content: `string`, message: `string`)<br/>
|
||||
Copies a text string to the clipboard.
|
||||
- _content:_ `string` - Text to copy
|
||||
- _message:_ `string` - Snackbar message to alert when copying happens
|
||||
- **copyToClipboard**(target: [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)`|`[`HTMLTextAreaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement), message?: `string`)<br/>
|
||||
Copies text from an HTML element to the clipboard.
|
||||
- _target:_ [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)`|`[`HTMLTextAreaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement) - HTML element to be copied
|
||||
- _message:_ `string` - (Optional) Snackbar message to alert when copying happens
|
||||
- **isTargetValid**(target: [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)`|`[`HTMLTextAreaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement)): `boolean`<br/>
|
||||
Checks if the target element can have its text copied.
|
||||
- _target:_ [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)`|`[`HTMLTextAreaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement) - Target HTML element
|
||||
- **Returns** `boolean` - True if the text can be copied, false otherwise
|
||||
|
||||
## Details
|
||||
|
||||
Use `copyContentToClipboard` to copy a text string or `isTargetValid` and
|
||||
`copyToClipboard` to copy the content of an HTML element in the page. The
|
||||
`message` parameter specifies a snackbar message to alert the user when the
|
||||
copying operation takes place.
|
||||
|
||||
## See also
|
||||
|
||||
- [Clipboard directive](../../core/directives/clipboard.directive.md)
|
||||
Reference in New Issue
Block a user