@@ -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; | ||||