From 37dbfa4cd7f97cfbab68d1bfd774aabf5ca2e0af Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
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 7a9dba7238..175ee800f1 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 (
- <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}
diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js
index 39909d98bd..b5a8535898 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 = <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}
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 8d8dc9ba98..45ad6209b6 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 1156a17f97..65971a018a 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;
--
GitLab