[GH-1057] Highlighting on hover for property values in the card dialog #1065
Conversation
- highlight on hover property values that are not readonly - make property name buttons the same width - set `min-width: 150px` for property values - add `readonly` class for LastModifiedAt/LastModifiedBy/CreatedAt
- input width computation relies on `useLayoutEffect` and `getComputedStyle` - enable automatic expand for editable fields in `PropertyValueElement` - enable automatic expand for editable inside `URLProperty` - fix for tooltip display in `KanbanCard`
kamre
requested review from
harshilsharma63 and
chenilim
and removed request for
a team
| } | ||
| } | ||
| } | ||
|
|
||
|
|
There was a problem hiding this comment.
This file was taken from #982
| const input = elementRef.current | ||
| const computed = getComputedStyle(input) | ||
| input.style.width = 'auto' | ||
| input.style.width = `${input.scrollWidth + borderWidth(computed) + 1}px` |
There was a problem hiding this comment.
+ 1 here is required for workaround this Chrome issue.
| display: flex; | ||
|
|
||
| .octo-propertyvalue { | ||
| white-space: none; |
There was a problem hiding this comment.
Wrong value for white-space property.
|
Works fine. @asaadmahmood can you run this and verify the UI/UX changes? |
|
@asaadmahmood by the way changes here somewhat overlap with yours in #1047 |
|
@harshilsharma63 @kamre Will have a look at this today. |
…h-1057-highlight-property-value
…f github.com:kamre/focalboard into mattermost-communitygh-1057-highlight-property-value
…h-1057-highlight-property-value
…ty-value # Conflicts: # webapp/src/components/properties/link/link.scss
|
This PR has been automatically labelled "stale" because it hasn't had recent activity. |
|
@chenilim do we need any additional changes for this pull request? |
|
Sorry for the delay @kamre! In general, we just need one dev review to merge. We'll tighten up our processes. Also, I manually merged with main, so please LMK if I missed anything. Thanks again for your contributions! These really up the basic experience of Focalboard! |
Summary
Highlighting on hover for property values in the card dialog:
min-widthequal to150px(same as for property name)LastModifiedAt/LastModifiedBy/CreatedAtare considered readonlyHere is how it looks:
Ticket Link
Fixes #1057
@asaadmahmood please review