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-54637] Channel header popover that displays overflow on hover, is not aligned or the right width (#25038)

Browse Source
This commit is contained in:
Akbar Abdrakhmanov 2023-11-22 18:53:23 +06:00 committed by GitHub
parent bdb1b8d376
commit 52b485b369
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
View File

@ -204,6 +204,7 @@ exports[`components/ChannelHeader should match snapshot with last active display
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -507,6 +508,7 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -810,6 +812,7 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -1111,6 +1114,7 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -1412,6 +1416,7 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -1713,6 +1718,7 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -1983,6 +1989,7 @@ exports[`components/ChannelHeader should render archived view 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -2316,6 +2323,7 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -2617,6 +2625,7 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -2938,6 +2947,7 @@ exports[`components/ChannelHeader should render properly when custom status is e
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -3281,6 +3291,7 @@ exports[`components/ChannelHeader should render properly when custom status is s
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -3584,6 +3595,7 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -3885,6 +3897,7 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -4190,6 +4203,7 @@ exports[`components/ChannelHeader should render properly when populated with cha
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -4518,6 +4532,7 @@ exports[`components/ChannelHeader should render shared view 1`] = `
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }
@ -4829,6 +4844,7 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
popoverStyle="info" popoverStyle="info"
style={ style={
Object { Object {
"maxWidth": 0,
"transform": "translate(0px, 0px)", "transform": "translate(0px, 0px)",
} }
} }

13
webapp/channels/src/components/channel_header/channel_header.tsx
View File

@ -99,6 +99,7 @@ export type Props = {
type State = { type State = {
titleMenuOpen: boolean; titleMenuOpen: boolean;
showChannelHeaderPopover: boolean; showChannelHeaderPopover: boolean;
channelHeaderPoverWidth: number;
leftOffset: number; leftOffset: number;
topOffset: number; topOffset: number;
}; };
@ -120,6 +121,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
this.state = { this.state = {
showChannelHeaderPopover: false, showChannelHeaderPopover: false,
channelHeaderPoverWidth: 0,
leftOffset: 0, leftOffset: 0,
topOffset: 0, topOffset: 0,
titleMenuOpen: false, titleMenuOpen: false,
@ -224,14 +226,17 @@ class ChannelHeader extends React.PureComponent<Props, State> {
if (headerPopoverTextMeasurerRect && headerDescriptionRect) { if (headerPopoverTextMeasurerRect && headerDescriptionRect) {
if (headerPopoverTextMeasurerRect.width > headerDescriptionRect.width || headerText.match(/\n{2,}/g)) { 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 // add 40px to take the global header into account
const topOffset = (announcementBarSize * this.props.announcementBarCount) + 40; const topOffset = (announcementBarSize * this.props.announcementBarCount) + 40;
const channelHeaderPoverWidth = this.headerDescriptionRef.current?.clientWidth || 0 - (this.props.hasMoreThanOneTeam ? 64 : 0);
this.setState({topOffset}); this.setState({topOffset});
this.setState({channelHeaderPoverWidth});
}; };
toggleChannelMembersRHS = () => { toggleChannelMembersRHS = () => {
@ -526,7 +531,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
id='header-popover' id='header-popover'
popoverStyle='info' popoverStyle='info'
popoverSize='lg' 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' placement='bottom'
className={classNames('channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam})} className={classNames('channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam})}
> >
@ -579,7 +584,8 @@ class ChannelHeader extends React.PureComponent<Props, State> {
message={headerText.replace(/\n+/g, ' ')} message={headerText.replace(/\n+/g, ' ')}
options={this.getHeaderMarkdownOptions(channelNamesMap)} options={this.getHeaderMarkdownOptions(channelNamesMap)}
imageProps={imageProps} imageProps={imageProps}
/></div> />
</div>
<span <span
className='header-description__text' className='header-description__text'
onClick={this.handleFormattedTextClick} onClick={this.handleFormattedTextClick}
@ -587,7 +593,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
onMouseOut={() => this.setState({showChannelHeaderPopover: false})} onMouseOut={() => this.setState({showChannelHeaderPopover: false})}
ref={this.headerDescriptionRef} ref={this.headerDescriptionRef}
> >
<Overlay <Overlay
show={this.state.showChannelHeaderPopover} show={this.state.showChannelHeaderPopover}
placement='bottom' placement='bottom'