From 52b485b369309c8a09f23d46c29d3723e6f1a669 Mon Sep 17 00:00:00 2001 From: Akbar Abdrakhmanov Date: Wed, 22 Nov 2023 18:53:23 +0600 Subject: [PATCH] [MM-54637] Channel header popover that displays overflow on hover, is not aligned or the right width (#25038) --- .../__snapshots__/channel_header.test.tsx.snap | 16 ++++++++++++++++ .../components/channel_header/channel_header.tsx | 13 +++++++++---- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap index 0b0e66ea78..dc6f72d70b 100644 --- a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap +++ b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap @@ -204,6 +204,7 @@ exports[`components/ChannelHeader should match snapshot with last active display popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -507,6 +508,7 @@ exports[`components/ChannelHeader should match snapshot with no last active disp popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -810,6 +812,7 @@ exports[`components/ChannelHeader should render active channel files 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -1111,6 +1114,7 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -1412,6 +1416,7 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -1713,6 +1718,7 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -1983,6 +1989,7 @@ exports[`components/ChannelHeader should render archived view 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -2316,6 +2323,7 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -2617,6 +2625,7 @@ exports[`components/ChannelHeader should render not active channel files 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -2938,6 +2947,7 @@ exports[`components/ChannelHeader should render properly when custom status is e popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -3281,6 +3291,7 @@ exports[`components/ChannelHeader should render properly when custom status is s popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -3584,6 +3595,7 @@ exports[`components/ChannelHeader should render properly when empty 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -3885,6 +3897,7 @@ exports[`components/ChannelHeader should render properly when populated 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -4190,6 +4203,7 @@ exports[`components/ChannelHeader should render properly when populated with cha popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -4518,6 +4532,7 @@ exports[`components/ChannelHeader should render shared view 1`] = ` popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } @@ -4829,6 +4844,7 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned popoverStyle="info" style={ Object { + "maxWidth": 0, "transform": "translate(0px, 0px)", } } diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx index 8064e89451..144bde492b 100644 --- a/webapp/channels/src/components/channel_header/channel_header.tsx +++ b/webapp/channels/src/components/channel_header/channel_header.tsx @@ -99,6 +99,7 @@ export type Props = { type State = { titleMenuOpen: boolean; showChannelHeaderPopover: boolean; + channelHeaderPoverWidth: number; leftOffset: number; topOffset: number; }; @@ -120,6 +121,7 @@ class ChannelHeader extends React.PureComponent { this.state = { showChannelHeaderPopover: false, + channelHeaderPoverWidth: 0, leftOffset: 0, topOffset: 0, titleMenuOpen: false, @@ -224,14 +226,17 @@ class ChannelHeader extends React.PureComponent { if (headerPopoverTextMeasurerRect && headerDescriptionRect) { if (headerPopoverTextMeasurerRect.width > headerDescriptionRect.width || headerText.match(/\n{2,}/g)) { - this.setState({showChannelHeaderPopover: true, leftOffset: this.headerDescriptionRef.current?.offsetLeft || 0}); + const leftOffset = headerDescriptionRect.left - (this.props.hasMoreThanOneTeam ? 313 : 248); + this.setState({showChannelHeaderPopover: true, leftOffset}); } } // add 40px to take the global header into account const topOffset = (announcementBarSize * this.props.announcementBarCount) + 40; + const channelHeaderPoverWidth = this.headerDescriptionRef.current?.clientWidth || 0 - (this.props.hasMoreThanOneTeam ? 64 : 0); this.setState({topOffset}); + this.setState({channelHeaderPoverWidth}); }; toggleChannelMembersRHS = () => { @@ -526,7 +531,7 @@ class ChannelHeader extends React.PureComponent { id='header-popover' popoverStyle='info' popoverSize='lg' - style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`}} + style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`, maxWidth: this.state.channelHeaderPoverWidth}} placement='bottom' className={classNames('channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam})} > @@ -579,7 +584,8 @@ class ChannelHeader extends React.PureComponent { message={headerText.replace(/\n+/g, ' ')} options={this.getHeaderMarkdownOptions(channelNamesMap)} imageProps={imageProps} - /> + /> + { onMouseOut={() => this.setState({showChannelHeaderPopover: false})} ref={this.headerDescriptionRef} > -