Unread indicator was invisible behind column header, adjusted (#3720)

* Unread indicator was invisible behind column header, adjusted

* Unread indicator now a CSS pseudo-element

* Adjust flex

app/javascript/mastodon/components/column_header.js

@@ -57,6 +57,10 @@ class ColumnHeader extends React.PureComponent {
     const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton } = this.props;
     const { collapsed, animating } = this.state;
 
+    const wrapperClassName = classNames('column-header__wrapper', {
+      'active': active,
+    });
+
     const buttonClassName = classNames('column-header', {
       'active': active,
     });
@@ -116,7 +120,7 @@ class ColumnHeader extends React.PureComponent {
     }
 
     return (
-      <div>
+      <div className={wrapperClassName}>
         <div role='button heading' tabIndex='0' className={buttonClassName} onClick={this.handleTitleClick}>
           <i className={`fa fa-fw fa-${icon} column-header__icon`} />
           {title}

app/javascript/mastodon/components/status_list.js

@@ -18,7 +18,6 @@ class StatusList extends ImmutablePureComponent {
     trackScroll: PropTypes.bool,
     shouldUpdateScroll: PropTypes.func,
     isLoading: PropTypes.bool,
-    isUnread: PropTypes.bool,
     hasMore: PropTypes.bool,
     prepend: PropTypes.node,
     emptyMessage: PropTypes.node,
@@ -89,25 +88,18 @@ class StatusList extends ImmutablePureComponent {
   }
 
   render () {
-    const { statusIds, onScrollToBottom, scrollKey, trackScroll, shouldUpdateScroll, isLoading, isUnread, hasMore, prepend, emptyMessage } = this.props;
+    const { statusIds, onScrollToBottom, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
 
     let loadMore       = null;
     let scrollableArea = null;
-    let unread         = null;
 
     if (!isLoading && statusIds.size > 0 && hasMore) {
       loadMore = <LoadMore onClick={this.handleLoadMore} />;
     }
 
-    if (isUnread) {
-      unread = <div className='status-list__unread-indicator' />;
-    }
-
     if (isLoading || statusIds.size > 0 || !emptyMessage) {
       scrollableArea = (
         <div className='scrollable' ref={this.setRef}>
-          {unread}
-
           <div className='status-list'>
             {prepend}
 

app/javascript/mastodon/features/ui/containers/status_list_container.js

@@ -42,7 +42,6 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, { timelineId }) => ({
     statusIds: getStatusIds(state, { type: timelineId }),
     isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
-    isUnread: state.getIn(['timelines', timelineId, 'unread']) > 0,
     hasMore: !!state.getIn(['timelines', timelineId, 'next']),
   });
 

app/javascript/styles/components.scss

@@ -60,7 +60,6 @@
 
 .column-collapsable {
   position: relative;
-  flex: 0 0 auto;
 
   .column-collapsable__content {
     overflow: auto;
@@ -2008,6 +2007,28 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.column-header__wrapper {
+  position: relative;
+  flex: 0 0 auto;
+
+  &.active {
+    &::before {
+      display: block;
+      content: "";
+      position: absolute;
+      top: 35px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      width: 60%;
+      pointer-events: none;
+      height: 28px;
+      z-index: 1;
+      background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
+    }
+  }
+}
+
 .column-header {
   padding: 15px;
   font-size: 16px;
@@ -2020,12 +2041,12 @@ button.icon-button.active i.fa-retweet {
 
   &.active {
     box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
-  }
 
-  &.active .column-header__icon {
+    .column-header__icon {
       color: $ui-highlight-color;
       text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
     }
+  }
 
   &.hidden-on-mobile {
     @media screen and (max-width: 1024px) {
@@ -2372,20 +2393,6 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.status-list__unread-indicator,
-.notifications__unread-indicator {
-  position: absolute;
-  top: 35px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  width: 60%;
-  pointer-events: none;
-  height: 28px;
-  z-index: 1;
-  background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
-}
-
 @keyframes pulse {
   0% {
     opacity: 1;