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-53564 : Multi-line channel header preview is narrow on web (#24029)

Browse Source
This commit is contained in:
Veronica Dip 2023-07-17 06:39:16 -03:00 committed by GitHub
parent b20ef95b91
commit 8ee38ee644
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 1 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
@ -206,7 +205,6 @@ exports[`components/ChannelHeader should match snapshot with last active display
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -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}
@ -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)",
}
}
@ -803,7 +799,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -818,7 +813,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -1107,7 +1101,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -1122,7 +1115,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -1411,7 +1403,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -1426,7 +1417,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -1715,7 +1705,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -1730,7 +1719,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -1988,7 +1976,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -2003,7 +1990,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -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}
@ -2339,7 +2324,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -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}
@ -2643,7 +2626,6 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -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}
@ -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)",
}
}
@ -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}
@ -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)",
}
}
@ -3604,7 +3582,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -3619,7 +3596,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -3908,7 +3884,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -3923,7 +3898,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -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}
@ -4231,7 +4204,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -4547,7 +4519,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
>
<Overlay
animation={[Function]}
onEnter={[Function]}
onHide={[Function]}
placement="bottom"
rootClose={true}
@ -4562,7 +4533,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
popoverStyle="info"
style={
Object {
"maxWidth": "0px",
"transform": "translate(0px, 0px)",
}
}
@ -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}
@ -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)",
}
}

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

@ -103,7 +103,6 @@ type State = {
showChannelHeaderPopover: boolean;
leftOffset: number;
topOffset: number;
popoverOverlayWidth: number;
};
class ChannelHeader extends React.PureComponent<Props, State> {
@ -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,
@ -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 = () => {
@ -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})}
>
@ -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}