luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ToolTip for Table view menu (#4328)

Browse source
This commit is contained in:
Rajat Dabade 2022-12-16 01:47:55 +05:30 committed by GitHub
parent be80d3ca82
commit c5919752a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 543 additions and 347 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
webapp/i18n/en.json
View file

@ -284,6 +284,7 @@
"TableHeaderMenu.insert-right": "Insert right",
"TableHeaderMenu.sort-ascending": "Sort ascending",
"TableHeaderMenu.sort-descending": "Sort descending",
"TableRow.MoreOption": "More actions",
"TableRow.delete": "Delete",
"TableRow.open": "Open",
"TopBar.give-feedback": "Give feedback",

115
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View file

@ -459,6 +459,10 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -471,6 +475,7 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -527,6 +532,10 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -539,6 +548,7 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -1710,6 +1720,10 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -1722,6 +1736,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -1778,6 +1793,10 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -1790,6 +1809,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -2767,6 +2787,10 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -2779,6 +2803,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -2835,6 +2860,10 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -2847,6 +2876,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -3415,6 +3445,10 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -3427,6 +3461,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -3483,6 +3518,10 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -3495,6 +3534,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -4063,6 +4103,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -4075,6 +4119,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -4131,6 +4176,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -4143,6 +4192,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -4711,6 +4761,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -4723,6 +4777,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -4779,6 +4834,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -4791,6 +4850,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -5359,6 +5419,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -5371,6 +5435,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -5427,6 +5492,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -5439,6 +5508,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -6007,6 +6077,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -6019,6 +6093,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -6075,6 +6150,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -6087,6 +6166,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -6655,6 +6735,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -6667,6 +6751,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -6723,6 +6808,10 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -6735,6 +6824,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -7303,6 +7393,10 @@ exports[`components/centerPanel return centerPanel and select one card and click
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -7315,6 +7409,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -7371,6 +7466,10 @@ exports[`components/centerPanel return centerPanel and select one card and click
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -7383,6 +7482,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -7951,6 +8051,10 @@ exports[`components/centerPanel return centerPanel and select one card and click
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -7963,6 +8067,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -8019,6 +8124,10 @@ exports[`components/centerPanel return centerPanel and select one card and click
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -8031,6 +8140,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -9912,6 +10022,10 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -9924,6 +10038,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
/>
</button>
</div>
</div>
<div
class="open-button"
>

45
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View file

@ -173,6 +173,10 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -185,6 +189,7 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -289,6 +294,10 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -301,6 +310,7 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -613,6 +623,10 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -625,6 +639,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -733,6 +748,10 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -745,6 +764,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -1061,6 +1081,10 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -1073,6 +1097,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -1177,6 +1202,10 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -1189,6 +1218,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -1501,6 +1531,10 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -1513,6 +1547,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -1621,6 +1656,10 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -1633,6 +1672,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -2258,6 +2298,10 @@ exports[`components/table/Table should match snapshot 1`] = `
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -2270,6 +2314,7 @@ exports[`components/table/Table should match snapshot 1`] = `
/>
</button>
</div>
</div>
<div
class="open-button"
>

25
webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
View file

@ -44,6 +44,10 @@ exports[`components/table/TableRow should match snapshot 1`] = `
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -56,6 +60,7 @@ exports[`components/table/TableRow should match snapshot 1`] = `
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -117,6 +122,10 @@ exports[`components/table/TableRow should match snapshot, collapsed tree 1`] = `
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -129,6 +138,7 @@ exports[`components/table/TableRow should match snapshot, collapsed tree 1`] = `
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -190,6 +200,10 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -202,6 +216,7 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -301,6 +316,10 @@ exports[`components/table/TableRow should match snapshot, isSelected 1`] = `
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -313,6 +332,7 @@ exports[`components/table/TableRow should match snapshot, isSelected 1`] = `
/>
</button>
</div>
</div>
<div
class="open-button"
>
@ -420,6 +440,10 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -432,6 +456,7 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
/>
</button>
</div>
</div>
<div
class="open-button"
>

5
webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap
View file

@ -44,6 +44,10 @@ exports[`components/table/TableRows should match snapshot, fire events 1`] = `
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<div
class="octo-tooltip tooltip-top"
data-tooltip="More actions"
>
<button
aria-label="MenuBtn"
@ -56,6 +60,7 @@ exports[`components/table/TableRows should match snapshot, fire events 1`] = `
/>
</button>
</div>
</div>
<div
class="open-button"
>

5
webapp/src/components/table/tableRow.tsx
View file

@ -20,6 +20,7 @@ import IconButton from '../../widgets/buttons/iconButton'
import CompassIcon from '../../widgets/icons/compassIcon'
import OptionsIcon from '../../widgets/icons/options'
import DeleteIcon from '../../widgets/icons/delete'
import Tooltip from '../../widgets/tooltip'
import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox'
import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient'
@ -174,11 +175,15 @@ const TableRow = (props: Props) => {
<MenuWrapper
className='optionsMenu ml-2 mr-2'
stopPropagationOnToggle={true}
>
<Tooltip
title={intl.formatMessage({id: 'TableRow.MoreOption', defaultMessage: 'More actions'})}
>
<IconButton
title='MenuBtn'
icon={<OptionsIcon/>}
/>
</Tooltip>
<Menu>
<Menu.Text
icon={<DeleteIcon/>}