[MM-58400] Migrate tooltips of 'components/rename_channel_modal' & 'components/size_aware_image' to WithTooltip (#27145)
Этот коммит содержится в:
коммит произвёл
GitHub
родитель
34c7b76fae
Коммит
f1cc96defb
@@ -46,28 +46,14 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
|
||||
<span
|
||||
className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
|
||||
>
|
||||
<OverlayTrigger
|
||||
className="hidden-xs"
|
||||
defaultOverlayShown={false}
|
||||
delayShow={500}
|
||||
overlay={
|
||||
<Tooltip
|
||||
className="hidden-xs"
|
||||
id="copy-link-tooltip"
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Copy link"
|
||||
id="single_image_view.copy_link_tooltip"
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
<WithTooltip
|
||||
id="single_image_view.copy_link_tooltip.text"
|
||||
placement="top"
|
||||
rootClose={true}
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Copy link"
|
||||
id="single_image_view.copy_link_tooltip"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<button
|
||||
@@ -80,29 +66,15 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
|
||||
size={20}
|
||||
/>
|
||||
</button>
|
||||
</OverlayTrigger>
|
||||
<OverlayTrigger
|
||||
className="hidden-xs"
|
||||
defaultOverlayShown={false}
|
||||
delayShow={500}
|
||||
overlay={
|
||||
<Tooltip
|
||||
className="hidden-xs"
|
||||
id="download-preview-tooltip"
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Download"
|
||||
id="single_image_view.download_tooltip"
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
</WithTooltip>
|
||||
<WithTooltip
|
||||
id="single_image_view.download_tooltip.text"
|
||||
placement="top"
|
||||
rootClose={true}
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Download"
|
||||
id="single_image_view.download_tooltip"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<a
|
||||
@@ -119,7 +91,7 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
|
||||
size={20}
|
||||
/>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
@@ -172,28 +144,14 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
|
||||
<span
|
||||
className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
|
||||
>
|
||||
<OverlayTrigger
|
||||
className="hidden-xs"
|
||||
defaultOverlayShown={false}
|
||||
delayShow={500}
|
||||
overlay={
|
||||
<Tooltip
|
||||
className="hidden-xs"
|
||||
id="copy-link-tooltip"
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Copy link"
|
||||
id="single_image_view.copy_link_tooltip"
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
<WithTooltip
|
||||
id="single_image_view.copy_link_tooltip.text"
|
||||
placement="top"
|
||||
rootClose={true}
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Copy link"
|
||||
id="single_image_view.copy_link_tooltip"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<button
|
||||
@@ -206,29 +164,15 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
|
||||
size={20}
|
||||
/>
|
||||
</button>
|
||||
</OverlayTrigger>
|
||||
<OverlayTrigger
|
||||
className="hidden-xs"
|
||||
defaultOverlayShown={false}
|
||||
delayShow={500}
|
||||
overlay={
|
||||
<Tooltip
|
||||
className="hidden-xs"
|
||||
id="download-preview-tooltip"
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Download"
|
||||
id="single_image_view.download_tooltip"
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
</WithTooltip>
|
||||
<WithTooltip
|
||||
id="single_image_view.download_tooltip.text"
|
||||
placement="top"
|
||||
rootClose={true}
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Download"
|
||||
id="single_image_view.download_tooltip"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<a
|
||||
@@ -244,7 +188,7 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
|
||||
size={20}
|
||||
/>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
@@ -311,28 +255,14 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
|
||||
<span
|
||||
className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
|
||||
>
|
||||
<OverlayTrigger
|
||||
className="hidden-xs"
|
||||
defaultOverlayShown={false}
|
||||
delayShow={500}
|
||||
overlay={
|
||||
<Tooltip
|
||||
className="hidden-xs"
|
||||
id="copy-link-tooltip"
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Copy link"
|
||||
id="single_image_view.copy_link_tooltip"
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
<WithTooltip
|
||||
id="single_image_view.copy_link_tooltip.text"
|
||||
placement="top"
|
||||
rootClose={true}
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Copy link"
|
||||
id="single_image_view.copy_link_tooltip"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<button
|
||||
@@ -345,29 +275,15 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
|
||||
size={20}
|
||||
/>
|
||||
</button>
|
||||
</OverlayTrigger>
|
||||
<OverlayTrigger
|
||||
className="hidden-xs"
|
||||
defaultOverlayShown={false}
|
||||
delayShow={500}
|
||||
overlay={
|
||||
<Tooltip
|
||||
className="hidden-xs"
|
||||
id="download-preview-tooltip"
|
||||
>
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Download"
|
||||
id="single_image_view.download_tooltip"
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
</WithTooltip>
|
||||
<WithTooltip
|
||||
id="single_image_view.download_tooltip.text"
|
||||
placement="top"
|
||||
rootClose={true}
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Download"
|
||||
id="single_image_view.download_tooltip"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<a
|
||||
@@ -383,7 +299,7 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
|
||||
size={20}
|
||||
/>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@@ -87,30 +87,17 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
|
||||
<div
|
||||
className="input-group input-group--limit"
|
||||
>
|
||||
<OverlayTrigger
|
||||
defaultOverlayShown={false}
|
||||
delayShow={400}
|
||||
overlay={
|
||||
<Tooltip
|
||||
id="urlTooltip"
|
||||
>
|
||||
fake-channel/channels
|
||||
</Tooltip>
|
||||
}
|
||||
<WithTooltip
|
||||
id="renameChannelModalShortUrlTooltip"
|
||||
placement="top"
|
||||
trigger={
|
||||
Array [
|
||||
"hover",
|
||||
"focus",
|
||||
]
|
||||
}
|
||||
title="fake-channel/channels"
|
||||
>
|
||||
<span
|
||||
className="input-group-addon"
|
||||
>
|
||||
fake-channel/channels/
|
||||
</span>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
<input
|
||||
aria-label="rename channel"
|
||||
className="form-control"
|
||||
|
||||
@@ -13,8 +13,7 @@ import type {Team} from '@mattermost/types/teams';
|
||||
|
||||
import type {ActionResult} from 'mattermost-redux/types/actions';
|
||||
|
||||
import OverlayTrigger from 'components/overlay_trigger';
|
||||
import Tooltip from 'components/tooltip';
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
import {getHistory} from 'utils/browser_history';
|
||||
import Constants from 'utils/constants';
|
||||
@@ -256,9 +255,6 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
|
||||
|
||||
const fullUrl = this.props.currentTeamUrl + '/channels';
|
||||
const shortUrl = `${getShortenedURL(fullUrl, 35)}/`;
|
||||
const urlTooltip = (
|
||||
<Tooltip id='urlTooltip'>{fullUrl}</Tooltip>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -310,13 +306,13 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
|
||||
<label className='control-label'>{urlInputLabel}</label>
|
||||
|
||||
<div className={urlInputClass}>
|
||||
<OverlayTrigger
|
||||
delayShow={Constants.OVERLAY_TIME_DELAY}
|
||||
<WithTooltip
|
||||
id='renameChannelModalShortUrlTooltip'
|
||||
placement='top'
|
||||
overlay={urlTooltip}
|
||||
title={fullUrl}
|
||||
>
|
||||
<span className='input-group-addon'>{shortUrl}</span>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
<input
|
||||
onChange={this.onNameChange}
|
||||
type='text'
|
||||
|
||||
@@ -16,8 +16,7 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
|
||||
import {getFileMiniPreviewUrl} from 'mattermost-redux/utils/file_utils';
|
||||
|
||||
import LoadingImagePreview from 'components/loading_image_preview';
|
||||
import OverlayTrigger from 'components/overlay_trigger';
|
||||
import Tooltip from 'components/tooltip';
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
import {localizeMessage, copyToClipboard} from 'utils/utils';
|
||||
|
||||
@@ -236,31 +235,22 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
|
||||
// copyLinkTooltip, downloadTooltip are tooltips for the buttons respectively.
|
||||
// if linkCopiedRecently is true, defaultMessage would be 'Copy Link', else 'Copied!'
|
||||
|
||||
const copyLinkTooltip = (
|
||||
<Tooltip
|
||||
id='copy-link-tooltip'
|
||||
className='hidden-xs'
|
||||
>
|
||||
{this.state.linkCopiedRecently ? (
|
||||
<FormattedMessage
|
||||
id='single_image_view.copied_link_tooltip'
|
||||
defaultMessage='Copied'
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id='single_image_view.copy_link_tooltip'
|
||||
defaultMessage='Copy link'
|
||||
/>
|
||||
)}
|
||||
</Tooltip>
|
||||
const copyLinkTooltipText = this.state.linkCopiedRecently ? (
|
||||
<FormattedMessage
|
||||
id={'single_image_view.copied_link_tooltip'}
|
||||
defaultMessage={'Copied'}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id={'single_image_view.copy_link_tooltip'}
|
||||
defaultMessage={'Copy link'}
|
||||
/>
|
||||
);
|
||||
const copyLink = (
|
||||
<OverlayTrigger
|
||||
className='hidden-xs'
|
||||
delayShow={500}
|
||||
<WithTooltip
|
||||
id='single_image_view.copy_link_tooltip.text'
|
||||
title={copyLinkTooltipText}
|
||||
placement='top'
|
||||
overlay={copyLinkTooltip}
|
||||
rootClose={true}
|
||||
>
|
||||
<button
|
||||
className={classNames('style--none', 'size-aware-image__copy_link', {
|
||||
@@ -281,28 +271,20 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
);
|
||||
|
||||
const downloadTooltip = (
|
||||
<Tooltip
|
||||
id='download-preview-tooltip'
|
||||
className='hidden-xs'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='single_image_view.download_tooltip'
|
||||
defaultMessage='Download'
|
||||
/>
|
||||
</Tooltip>
|
||||
const downloadTooltipText = (
|
||||
<FormattedMessage
|
||||
id='single_image_view.download_tooltip'
|
||||
defaultMessage='Download'
|
||||
/>
|
||||
);
|
||||
|
||||
const download = (
|
||||
<OverlayTrigger
|
||||
className='hidden-xs'
|
||||
delayShow={500}
|
||||
<WithTooltip
|
||||
id='single_image_view.download_tooltip.text'
|
||||
placement='top'
|
||||
overlay={downloadTooltip}
|
||||
rootClose={true}
|
||||
title={downloadTooltipText}
|
||||
>
|
||||
<a
|
||||
target='_blank'
|
||||
@@ -318,7 +300,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
|
||||
size={20}
|
||||
/>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
</WithTooltip>
|
||||
);
|
||||
|
||||
if (this.props.handleSmallImageContainer && this.state.isSmallImage) {
|
||||
|
||||
Ссылка в новой задаче
Block a user