Fix “new items glow” being displayed above settings and announcements (#12958)
This commit is contained in:
parent
c06d2ff437
commit
90b13ffd00
3 changed files with 16 additions and 6 deletions
|
@ -33,6 +33,7 @@ class ColumnHeader extends React.PureComponent {
|
||||||
onPin: PropTypes.func,
|
onPin: PropTypes.func,
|
||||||
onMove: PropTypes.func,
|
onMove: PropTypes.func,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
|
appendContent: PropTypes.node,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -81,7 +82,7 @@ class ColumnHeader extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder } = this.props;
|
const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent } = this.props;
|
||||||
const { collapsed, animating } = this.state;
|
const { collapsed, animating } = this.state;
|
||||||
|
|
||||||
const wrapperClassName = classNames('column-header__wrapper', {
|
const wrapperClassName = classNames('column-header__wrapper', {
|
||||||
|
@ -172,6 +173,8 @@ class ColumnHeader extends React.PureComponent {
|
||||||
{(!collapsed || animating) && collapsedContent}
|
{(!collapsed || animating) && collapsedContent}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{appendContent}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -143,12 +143,11 @@ class HomeTimeline extends React.PureComponent {
|
||||||
pinned={pinned}
|
pinned={pinned}
|
||||||
multiColumn={multiColumn}
|
multiColumn={multiColumn}
|
||||||
extraButton={announcementsButton}
|
extraButton={announcementsButton}
|
||||||
|
appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
|
||||||
>
|
>
|
||||||
<ColumnSettingsContainer />
|
<ColumnSettingsContainer />
|
||||||
</ColumnHeader>
|
</ColumnHeader>
|
||||||
|
|
||||||
{hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
|
|
||||||
|
|
||||||
<StatusListContainer
|
<StatusListContainer
|
||||||
trackScroll={!pinned}
|
trackScroll={!pinned}
|
||||||
scrollKey={`home_timeline-${columnId}`}
|
scrollKey={`home_timeline-${columnId}`}
|
||||||
|
|
|
@ -3224,13 +3224,16 @@ a.status-card.compact:hover {
|
||||||
.column-header__wrapper {
|
.column-header__wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 35px;
|
bottom: -13px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
@ -3241,6 +3244,11 @@ a.status-card.compact:hover {
|
||||||
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
|
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.announcements {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-header {
|
.column-header {
|
||||||
|
@ -3273,8 +3281,6 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
|
|
||||||
|
|
||||||
.column-header__icon {
|
.column-header__icon {
|
||||||
color: $highlight-text-color;
|
color: $highlight-text-color;
|
||||||
text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
|
text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
|
||||||
|
@ -3330,6 +3336,8 @@ a.status-card.compact:hover {
|
||||||
color: $darker-text-color;
|
color: $darker-text-color;
|
||||||
transition: max-height 150ms ease-in-out, opacity 300ms linear;
|
transition: max-height 150ms ease-in-out, opacity 300ms linear;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
|
|
Loading…
Reference in a new issue