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-53491] Fix rendering of active call icon in sidebar's channel link (#27172)

Browse Source 
Automatic Merge
This commit is contained in:
Claudio Costa 2024-06-14 18:41:30 +02:00 committed by GitHub
parent 1fd346f28e
commit 958a403537
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
View File

@ -199,15 +199,11 @@ exports[`components/sidebar/sidebar_channel/sidebar_channel_link should match sn
]
}
>
<div
className="truncated"
<span
className="SidebarChannelLinkLabel"
>
<span
className="SidebarChannelLinkLabel"
>
channel_label
</span>
</div>
channel_label
</span>
</OverlayTrigger>
<Connect(Pluggable)
channel={

20
webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
View File

@ -80,13 +80,11 @@ type State = {
export default class SidebarChannelLink extends React.PureComponent<Props, State> {
labelRef: React.RefObject<HTMLDivElement>;
gmItemRef: React.RefObject<HTMLDivElement>;
constructor(props: Props) {
super(props);
this.labelRef = React.createRef();
this.gmItemRef = React.createRef();
this.state = {
isMenuOpen: false,
@ -105,7 +103,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
}
enableToolTipIfNeeded = (): void => {
const element = this.gmItemRef.current || this.labelRef.current;
const element = this.labelRef.current;
const showTooltip = element && element.offsetWidth < element.scrollWidth;
this.setState({showTooltip: Boolean(showTooltip)});
};
@ -133,7 +131,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
};
// Bootstrap adds the attr dynamically, removing it to prevent a11y readout
removeTooltipLink = (): void => this.gmItemRef.current?.removeAttribute?.('aria-describedby');
removeTooltipLink = (): void => this.labelRef.current?.removeAttribute?.('aria-describedby');
handleChannelClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
mark(Mark.ChannelLinkClicked);
@ -195,7 +193,10 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
}
let labelElement: JSX.Element = (
<span className='SidebarChannelLinkLabel'>
<span
ref={this.labelRef}
className='SidebarChannelLinkLabel'
>
{wrapEmojis(label)}
</span>
);
@ -212,12 +213,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
overlay={displayNameToolTip}
onEntering={this.removeTooltipLink}
>
<div
className='truncated'
ref={this.gmItemRef}
>
{labelElement}
</div>
{labelElement}
</OverlayTrigger>
);
}
@ -231,7 +227,6 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
}}
emojiStyle={{
marginTop: -4,
marginLeft: 6,
marginBottom: 0,
opacity: 0.8,
}}
@ -246,7 +241,6 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
/>
<div
className='SidebarChannelLinkLabel_wrapper'
ref={this.labelRef}
>
{labelElement}
{customStatus}

10
webapp/channels/src/sass/layout/_sidebar-left.scss
View File

@ -1132,10 +1132,12 @@ $sidebarOpacityAnimationDuration: 0.15s;
}
& span.SidebarChannelLinkLabel {
overflow: hidden;
max-width: 100%;
height: 18px;
line-height: 18px;
text-align: justify;
text-overflow: ellipsis;
user-select: none;
white-space: nowrap;
}
@ -1298,13 +1300,7 @@ $sidebarOpacityAnimationDuration: 0.15s;
display: flex;
overflow: hidden;
flex-grow: 1;
}
.SidebarChannelLinkLabel_wrapper > div.truncated {
display: block;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
gap: 8px;
}
.DirectChannel__profile-picture {