mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-60159] Migrate tooltips of "components/rhs_header_post/rhs_header_post.tsx" to WithTooltip (#28015)

Просмотр исходного кода
Этот коммит содержится в:
Michael
2024-08-22 14:59:05 +01:00
коммит произвёл GitHub
родитель ad5d5f08dc
Коммит 21b923b554
1 изменённых файлов: 47 добавлений и 56 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

103
webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
Просмотреть файл

@@ -9,14 +9,13 @@ import type {Channel} from '@mattermost/types/channels';
import KeyboardShortcutSequence, {
KEYBOARD_SHORTCUTS,
} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
import OverlayTrigger from 'components/overlay_trigger';
import FollowButton from 'components/threading/common/follow_button';
import Tooltip from 'components/tooltip';
import CRTThreadsPaneTutorialTip
from 'components/tours/crt_tour/crt_threads_pane_tutorial_tip';
import WithTooltip from 'components/with_tooltip';
import {getHistory} from 'utils/browser_history';
import Constants, {RHSStates} from 'utils/constants';
import {RHSStates} from 'utils/constants';
import type {RhsState} from 'types/store/rhs';
@@ -79,12 +78,10 @@ class RhsHeaderPost extends React.PureComponent<Props> {
const {isFollowingThread} = this.props;
const {formatMessage} = this.props.intl;
const closeSidebarTooltip = (
<Tooltip id='closeSidebarTooltip'>
<FormattedMessage
id='rhs_header.closeSidebarTooltip'
defaultMessage='Close'
/>
</Tooltip>
<FormattedMessage
id='rhs_header.closeSidebarTooltip'
defaultMessage='Close'
/>
);
let backToResultsTooltip;
@@ -93,52 +90,34 @@ class RhsHeaderPost extends React.PureComponent<Props> {
case RHSStates.SEARCH:
case RHSStates.MENTION:
backToResultsTooltip = (
<Tooltip id='backToResultsTooltip'>
<FormattedMessage
id='rhs_header.backToResultsTooltip'
defaultMessage='Back to search results'
/>
</Tooltip>
<FormattedMessage
id='rhs_header.backToResultsTooltip'
defaultMessage='Back to search results'
/>
);
break;
case RHSStates.FLAG:
backToResultsTooltip = (
<Tooltip id='backToResultsTooltip'>
<FormattedMessage
id='rhs_header.backToFlaggedTooltip'
defaultMessage='Back to saved messages'
/>
</Tooltip>
<FormattedMessage
id='rhs_header.backToFlaggedTooltip'
defaultMessage='Back to saved messages'
/>
);
break;
case RHSStates.PIN:
backToResultsTooltip = (
<Tooltip id='backToResultsTooltip'>
<FormattedMessage
id='rhs_header.backToPinnedTooltip'
defaultMessage='Back to pinned messages'
/>
</Tooltip>
<FormattedMessage
id='rhs_header.backToPinnedTooltip'
defaultMessage='Back to pinned messages'
/>
);
break;
}
const expandSidebarTooltip = (
<Tooltip id='expandSidebarTooltip'>
<FormattedMessage
id='rhs_header.expandSidebarTooltip'
defaultMessage='Expand the right sidebar'
/>
<KeyboardShortcutSequence
shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
hideDescription={true}
isInsideTooltip={true}
/>
</Tooltip>
);
const shrinkSidebarTooltip = (
<Tooltip id='shrinkSidebarTooltip'>
//rhsHeaderTooltipContent contains tooltips content for expand or shrink sidebarTooltip.
// if props.isExpanded is true, defaultMessage would feed from 'shrinkTooltip', else 'expandTooltip'
const rhsHeaderTooltipContent = this.props.isExpanded ? (
<>
<FormattedMessage
id='rhs_header.collapseSidebarTooltip'
defaultMessage='Collapse the right sidebar'
@@ -148,17 +127,29 @@ class RhsHeaderPost extends React.PureComponent<Props> {
hideDescription={true}
isInsideTooltip={true}
/>
</Tooltip>
</>
) : (
<>
<FormattedMessage
id='rhs_header.expandSidebarTooltip'
defaultMessage='Expand the right sidebar'
/>
<KeyboardShortcutSequence
shortcut={KEYBOARD_SHORTCUTS.navExpandSidebar}
hideDescription={true}
isInsideTooltip={true}
/>
</>
);
const channelName = this.props.channel.display_name;
if (backToResultsTooltip) {
back = (
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id='backToResultsTooltip'
placement='top'
overlay={backToResultsTooltip}
title={backToResultsTooltip}
>
<button
className='sidebar--right__back btn btn-icon btn-sm'
@@ -169,7 +160,7 @@ class RhsHeaderPost extends React.PureComponent<Props> {
className='icon icon-arrow-back-ios'
/>
</button>
</OverlayTrigger>
</WithTooltip>
);
}
@@ -199,10 +190,10 @@ class RhsHeaderPost extends React.PureComponent<Props> {
/>
) : null}
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id={this.props.isExpanded ? 'shrinkSidebarTooltip' : 'expandSidebarTooltip'}
placement='bottom'
overlay={this.props.isExpanded ? shrinkSidebarTooltip : expandSidebarTooltip}
title={rhsHeaderTooltipContent}
>
<button
type='button'
@@ -219,12 +210,12 @@ class RhsHeaderPost extends React.PureComponent<Props> {
aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
/>
</button>
</OverlayTrigger>
</WithTooltip>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id='closeSidebarTooltip'
placement='top'
overlay={closeSidebarTooltip}
title={closeSidebarTooltip}
>
<button
id='rhsCloseButton'
@@ -238,7 +229,7 @@ class RhsHeaderPost extends React.PureComponent<Props> {
aria-label={formatMessage({id: 'rhs_header.closeTooltip.icon', defaultMessage: 'Close Sidebar Icon'})}
/>
</button>
</OverlayTrigger>
</WithTooltip>
</div>
{this.props.showThreadsTutorialTip && <CRTThreadsPaneTutorialTip/>}
</div>