tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* Unread indicator was invisible behind column header, adjusted

* Unread indicator now a CSS pseudo-element

* Adjust flex
This commit is contained in:
Eugen Rochko 2017-06-12 20:02:17 +02:00 committed by GitHub
parent 0d23c81662
commit 37dbfa4cd7
4 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/components/column_header.js
View File

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

10
app/javascript/mastodon/components/status_list.js
View File

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

1
app/javascript/mastodon/features/ui/containers/status_list_container.js
View File

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

41
app/javascript/styles/components.scss
View File

@ -60,7 +60,6 @@
.column-collapsable { .column-collapsable {
position: relative; position: relative;
flex: 0 0 auto;
.column-collapsable__content { .column-collapsable__content {
overflow: auto; 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 { .column-header {
padding: 15px; padding: 15px;
font-size: 16px; font-size: 16px;
@ -2020,12 +2041,12 @@ button.icon-button.active i.fa-retweet {
&.active { &.active {
box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
}
&.active .column-header__icon { .column-header__icon {
color: $ui-highlight-color; color: $ui-highlight-color;
text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
} }
}
&.hidden-on-mobile { &.hidden-on-mobile {
@media screen and (max-width: 1024px) { @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 { @keyframes pulse {
0% { 0% {
opacity: 1; opacity: 1;