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

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

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