IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-58408] Migrate tooltips of 'components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav' to WithTooltip (#27422)

Browse Source
This commit is contained in:
Rita Anene 2024-06-26 07:31:03 +01:00 committed by GitHub
parent cd7c930172
commit 273c7df69b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/__snapshots__/file_preview_modal_main_nav.test.tsx.snap
View File

@ -4,26 +4,15 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
<div <div
className="file_preview_modal_main_nav" className="file_preview_modal_main_nav"
> >
<OverlayTrigger <WithTooltip
defaultOverlayShown={false} id="close-icon-tooltip"
delayShow={400}
key="previewArrowLeft" key="previewArrowLeft"
overlay={
<Tooltip
id="close-icon-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Close"
id="generic.close"
/>
</Tooltip>
}
placement="bottom" placement="bottom"
trigger={ title={
Array [ <Memo(MemoizedFormattedMessage)
"hover", defaultMessage="Close"
"focus", id="generic.close"
] />
} }
> >
<button <button
@ -35,7 +24,7 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
className="icon icon-chevron-left" className="icon icon-chevron-left"
/> />
</button> </button>
</OverlayTrigger> </WithTooltip>
<span <span
className="modal-bar-file-count" className="modal-bar-file-count"
> >
@ -50,26 +39,15 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
} }
/> />
</span> </span>
<OverlayTrigger <WithTooltip
defaultOverlayShown={false} id="close-icon-tooltip"
delayShow={400}
key="publicLink" key="publicLink"
overlay={
<Tooltip
id="close-icon-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Next"
id="generic.next"
/>
</Tooltip>
}
placement="bottom" placement="bottom"
trigger={ title={
Array [ <Memo(MemoizedFormattedMessage)
"hover", defaultMessage="Next"
"focus", id="generic.next"
] />
} }
> >
<button <button
@ -81,6 +59,6 @@ exports[`components/file_preview_modal/file_preview_modal_main_nav/FilePreviewMo
className="icon icon-chevron-right" className="icon icon-chevron-right"
/> />
</button> </button>
</OverlayTrigger> </WithTooltip>
</div> </div>
`; `;

45
webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.tsx
View File

@ -6,10 +6,7 @@ import {FormattedMessage} from 'react-intl';
import './file_preview_modal_main_nav.scss'; import './file_preview_modal_main_nav.scss';
import OverlayTrigger from 'components/overlay_trigger'; import WithTooltip from 'components/with_tooltip';
import Tooltip from 'components/tooltip';
import Constants from 'utils/constants';
interface Props { interface Props {
fileIndex: number; fileIndex: number;
@ -20,18 +17,16 @@ interface Props {
const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => { const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
const leftArrow = ( const leftArrow = (
<OverlayTrigger <WithTooltip
delayShow={Constants.OVERLAY_TIME_DELAY}
key='previewArrowLeft' key='previewArrowLeft'
placement='bottom' id='close-icon-tooltip'
overlay={ title={
<Tooltip id='close-icon-tooltip'> <FormattedMessage
<FormattedMessage id='generic.close'
id='generic.close' defaultMessage='Close'
defaultMessage='Close' />
/>
</Tooltip>
} }
placement='bottom'
> >
<button <button
id='previewArrowLeft' id='previewArrowLeft'
@ -40,22 +35,20 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
> >
<i className='icon icon-chevron-left'/> <i className='icon icon-chevron-left'/>
</button> </button>
</OverlayTrigger> </WithTooltip>
); );
const rightArrow = ( const rightArrow = (
<OverlayTrigger <WithTooltip
delayShow={Constants.OVERLAY_TIME_DELAY}
key='publicLink' key='publicLink'
placement='bottom' id='close-icon-tooltip'
overlay={ title={
<Tooltip id='close-icon-tooltip'> <FormattedMessage
<FormattedMessage id='generic.next'
id='generic.next' defaultMessage='Next'
defaultMessage='Next' />
/>
</Tooltip>
} }
placement='bottom'
> >
<button <button
id='previewArrowRight' id='previewArrowRight'
@ -64,7 +57,7 @@ const FilePreviewModalMainNav: React.FC<Props> = (props: Props) => {
> >
<i className='icon icon-chevron-right'/> <i className='icon icon-chevron-right'/>
</button> </button>
</OverlayTrigger> </WithTooltip>
); );
return ( return (
<div className='file_preview_modal_main_nav'> <div className='file_preview_modal_main_nav'>