Skip to content

Commit

Permalink
MM-53564 : Multi-line channel header preview is narrow on web (matter…
Browse files Browse the repository at this point in the history 
…most#24029)
  • Loading branch information
@veronicadip
veronicadip authored Jul 17, 2023
1 parent b20ef95 commit 8ee38ee
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 42 deletions.
32 changes: 0 additions & 32 deletions webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,6 @@ exports[`components/ChannelHeader should match snapshot with last active display
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -206,7 +205,6 @@ exports[`components/ChannelHeader should match snapshot with last active display
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -497,7 +495,6 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -512,7 +509,6 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -803,7 +799,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -818,7 +813,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -1107,7 +1101,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -1122,7 +1115,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -1411,7 +1403,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -1426,7 +1417,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -1715,7 +1705,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -1730,7 +1719,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -1988,7 +1976,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -2003,7 +1990,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -2324,7 +2310,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -2339,7 +2324,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -2628,7 +2612,6 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -2643,7 +2626,6 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -2952,7 +2934,6 @@ exports[`components/ChannelHeader should render properly when custom status is e
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -2967,7 +2948,6 @@ exports[`components/ChannelHeader should render properly when custom status is e
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -3298,7 +3278,6 @@ exports[`components/ChannelHeader should render properly when custom status is s
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -3313,7 +3292,6 @@ exports[`components/ChannelHeader should render properly when custom status is s
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -3604,7 +3582,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -3619,7 +3596,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -3908,7 +3884,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -3923,7 +3898,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -4216,7 +4190,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -4231,7 +4204,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -4547,7 +4519,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -4562,7 +4533,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down Expand Up @@ -4861,7 +4831,6 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
Expand All @@ -4876,7 +4845,6 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
Expand Down
11 changes: 1 addition & 10 deletions webapp/channels/src/components/channel_header/channel_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ type State = {
showChannelHeaderPopover: boolean;
leftOffset: number;
topOffset: number;
popoverOverlayWidth: number;
};

class ChannelHeader extends React.PureComponent<Props, State> {
Expand All @@ -122,7 +121,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
this.headerOverlayRef = React.createRef();

this.state = {
popoverOverlayWidth: 0,
showChannelHeaderPopover: false,
leftOffset: 0,
topOffset: 0,
Expand Down Expand Up @@ -246,12 +244,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
}
};

setPopoverOverlayWidth = () => {
const headerDescriptionRect = this.headerDescriptionRef.current?.getBoundingClientRect();
const ellipsisWidthAdjustment = 10;
this.setState({popoverOverlayWidth: (headerDescriptionRect?.width ?? 0) + ellipsisWidthAdjustment});
};

handleFormattedTextClick = (e: MouseEvent<HTMLSpanElement>) => handleFormattedTextClick(e, this.props.currentRelativeTeamUrl);

renderCustomStatus = () => {
Expand Down Expand Up @@ -536,7 +528,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
id='header-popover'
popoverStyle='info'
popoverSize='lg'
style={{maxWidth: `${this.state.popoverOverlayWidth}px`, transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`}}
style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`}}
placement='bottom'
className={classNames('channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam})}
>
Expand Down Expand Up @@ -604,7 +596,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
rootClose={true}
target={this.headerDescriptionRef.current as React.ReactInstance}
ref={this.headerOverlayRef}
onEnter={this.setPopoverOverlayWidth}
onHide={() => this.setState({showChannelHeaderPopover: false})}
>
{popoverContent}
Expand Down

0 comments on commit 8ee38ee

Please sign in to comment.