feat(start-ui): allow usage of tooltip #2146
Conversation
dm148
force-pushed
the
feature/1700-table-tooltip
branch
3 times, most recently
from
e733358
to
b6b0aeb
Compare
dm148
force-pushed
the
feature/1700-table-tooltip
branch
from
b6b0aeb
to
ea0e2f0
Compare
| @@ -79,6 +79,7 @@ import { | |||
| TableWithTranscludedActionBarComponent, | |||
| TableWithCollapsibleRowsComponent | |||
| } from "./components"; | |||
| import {TableWithTooltipComponent} from "./components/table-with-tooltip/table-with-tooltip.component"; | |||
There was a problem hiding this comment.
Combine this import with the others above (from "./components")
| @@ -342,6 +342,7 @@ | |||
| "WITH_CUSTOM_CELL_RENDERING": "Table avec rendu de cellules personnalisé", | |||
| "WITH_FIXED_ACTIONS": "Table avec actions de ligne fixes", | |||
| "WITH_COLLAPSIBLE_ROWS": "Table avec des lignes réductibles", | |||
| "WITH_TOOLTIP": "Table avec info-bulle", | |||
There was a problem hiding this comment.
Is this the literal translation of "tooltip"? Should we use this or use the English word? What do you guys think? @SuperITMan @nicanac
| @@ -34,7 +34,8 @@ | |||
| </th> | |||
| <!-- the column template defined by the user will be displayed here --> | |||
| <!-- and it will receive the right context containing the displayedValue and the row data--> | |||
| <td mat-cell *matCellDef="let rowItem" [ngClass]="getCellClassNames(rowItem)" (click)="onCellClick($event, rowItem)"> | |||
| <td mat-cell *matCellDef="let rowItem" [ngClass]="getCellClassNames(rowItem)" (click)="onCellClick($event, rowItem)" | |||
| [matTooltip]="getCellTooltip(rowItem)" [matTooltipPosition]="cellTooltipPosition" [matTooltipClass]="getCellTooltipClassNames(rowItem)"> | |||
There was a problem hiding this comment.
What if the tooltip is an empty string ""? I think we should disable the tooltip in such cases with the matTooltipDisabled property otherwise I fear that Angular Material would still be doing some logic to display the tooltip which will be overkill if that would be an empty string in the end.
Another solution would be to have 2 <td mat-cell> with an *ngIf: one will contain the [matTooltip] if there is a relevant tooltip to show (not empty). And the other one won't contain the [matTooltip], basically the same we had before, when there is no tooltip to show.
What do you think?
| * Default: "below" | ||
| * Possible positions: above, below, left, right, before, after | ||
| */ | ||
| cellTooltipPosition?: string; |
There was a problem hiding this comment.
Use specific types instead of just string so it is clear what are the valid positions we expect 😉
| return this._cellTooltipPosition; | ||
| } | ||
|
|
||
| public set cellTooltipPosition(tooltip: string) { |
There was a problem hiding this comment.
Same remark about using specific types instead of just string. You could re-use the ones from the ColumnProperties 😉
| const DUMMY_DATA: object[] = [ | ||
| { id: 1, description: "dummy 1" }, |
There was a problem hiding this comment.
Were this whitespaces actually removed by Prettier? That would be weird 🤔
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
No possibility for tooltips in table
Issue Number: #1700
What is the new behavior?
You can add tooltip for each cell, you can set the value in StarkTableColumnProperties or in data.
Also possibility to add a class for styling the tooltip.
You can set the position of the tooltip.
Does this PR introduce a breaking change?
Other information