From 37dbfa4cd7f97cfbab68d1bfd774aabf5ca2e0af Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 12 Jun 2017 20:02:17 +0200 Subject: [PATCH] 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 --- .../mastodon/components/column_header.js | 6 ++- .../mastodon/components/status_list.js | 10 +---- .../ui/containers/status_list_container.js | 1 - app/javascript/styles/components.scss | 45 +++++++++++-------- 4 files changed, 32 insertions(+), 30 deletions(-) diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 7a9dba72..175ee800 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/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 ( -
+
{title} diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index 39909d98..b5a85358 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/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 = ; } - if (isUnread) { - unread =
; - } - if (isLoading || statusIds.size > 0 || !emptyMessage) { scrollableArea = (
- {unread} -
{prepend} diff --git a/app/javascript/mastodon/features/ui/containers/status_list_container.js b/app/javascript/mastodon/features/ui/containers/status_list_container.js index 8d8dc9ba..45ad6209 100644 --- a/app/javascript/mastodon/features/ui/containers/status_list_container.js +++ b/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']), }); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 1156a17f..65971a01 100644 --- a/app/javascript/styles/components.scss +++ b/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,11 +2041,11 @@ button.icon-button.active i.fa-retweet { &.active { box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); - } - &.active .column-header__icon { - color: $ui-highlight-color; - text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + .column-header__icon { + color: $ui-highlight-color; + text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + } } &.hidden-on-mobile { @@ -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;