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-58409] Migrate tooltips of 'components/file_preview_modal/popover_bar/popover_bar' to WithTooltip (#27447)

Browse Source
This commit is contained in:
Rita Anene 2024-06-26 12:07:22 +01:00 committed by GitHub
parent c39a4b2a7c
commit 60028d63c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
webapp/channels/src/components/file_preview_modal/popover_bar/__snapshots__/popover_bar.test.tsx.snap
View File

@ -8,26 +8,15 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
<div
className="modal-column"
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
key="zoomOut"
overlay={
<Tooltip
<WithTooltip
id="zoom-out-icon-tooltip"
>
key="zoomOut"
placement="top"
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Zoom Out"
id="view_image.zoom_out"
/>
</Tooltip>
}
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
>
<span
@ -37,27 +26,16 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
className="icon icon-minus"
/>
</span>
</OverlayTrigger>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
key="zoomReset"
overlay={
<Tooltip
</WithTooltip>
<WithTooltip
id="zoom-reset-icon-tooltip"
>
key="zoomReset"
placement="top"
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Reset Zoom"
id="view_image.zoom_reset"
/>
</Tooltip>
}
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
>
<span
@ -67,27 +45,16 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
className="icon icon-magnify-minus"
/>
</span>
</OverlayTrigger>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
key="zoomIn"
overlay={
<Tooltip
</WithTooltip>
<WithTooltip
id="zoom-in-icon-tooltip"
>
key="zoomIn"
placement="top"
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Zoom In"
id="view_image.zoom_in"
/>
</Tooltip>
}
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
>
<span
@ -97,7 +64,7 @@ exports[`components/file_preview_modal/popover_bar/PopoverBar should match snaps
className="icon icon-plus"
/>
</span>
</OverlayTrigger>
</WithTooltip>
</div>
</div>
`;

41
webapp/channels/src/components/file_preview_modal/popover_bar/popover_bar.tsx
View File

@ -5,10 +5,9 @@ import debounce from 'lodash/debounce';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import WithTooltip from 'components/with_tooltip';
import {Constants, ZoomSettings} from 'utils/constants';
import {ZoomSettings} from 'utils/constants';
export interface Props {
scale?: number;
@ -43,21 +42,19 @@ export default class PopoverBar extends React.PureComponent<Props> {
);
}
zoomControls.push(
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
key='zoomOut'
placement='top'
overlay={
<Tooltip id='zoom-out-icon-tooltip'>
id='zoom-out-icon-tooltip'
title={
<FormattedMessage
id='view_image.zoom_out'
defaultMessage='Zoom Out'
/>
</Tooltip>
}
placement='top'
>
{zoomOutButton}
</OverlayTrigger>,
</WithTooltip>,
);
if (this.props.scale && this.props.scale > ZoomSettings.DEFAULT_SCALE) {
@ -84,21 +81,19 @@ export default class PopoverBar extends React.PureComponent<Props> {
);
}
zoomControls.push(
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
key='zoomReset'
placement='top'
overlay={
<Tooltip id='zoom-reset-icon-tooltip'>
id='zoom-reset-icon-tooltip'
title={
<FormattedMessage
id='view_image.zoom_reset'
defaultMessage='Reset Zoom'
/>
</Tooltip>
}
placement='top'
>
{zoomResetButton}
</OverlayTrigger>,
</WithTooltip>,
);
if (this.props.scale && this.props.scale < ZoomSettings.MAX_SCALE) {
@ -118,21 +113,19 @@ export default class PopoverBar extends React.PureComponent<Props> {
);
}
zoomControls.push(
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
key='zoomIn'
placement='top'
overlay={
<Tooltip id='zoom-in-icon-tooltip'>
id='zoom-in-icon-tooltip'
title={
<FormattedMessage
id='view_image.zoom_in'
defaultMessage='Zoom In'
/>
</Tooltip>
}
placement='top'
>
{zoomInButton}
</OverlayTrigger>,
</WithTooltip>,
);
wrappedZoomControls = (