Fix #38 - Unread indicator when new content appears above the fold
This commit is contained in:
parent
2ff3e458bf
commit
8a961477eb
10 changed files with 116 additions and 23 deletions
|
@ -15,6 +15,7 @@ export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS';
|
||||||
export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL';
|
export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL';
|
||||||
|
|
||||||
export const NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
|
export const NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
|
||||||
|
export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
|
||||||
|
|
||||||
const fetchRelatedRelationships = (dispatch, notifications) => {
|
const fetchRelatedRelationships = (dispatch, notifications) => {
|
||||||
const accountIds = notifications.filter(item => item.type === 'follow').map(item => item.account.id);
|
const accountIds = notifications.filter(item => item.type === 'follow').map(item => item.account.id);
|
||||||
|
@ -151,3 +152,10 @@ export function clearNotifications() {
|
||||||
api(getState).post('/api/v1/notifications/clear');
|
api(getState).post('/api/v1/notifications/clear');
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export function scrollTopNotifications(top) {
|
||||||
|
return {
|
||||||
|
type: NOTIFICATIONS_SCROLL_TOP,
|
||||||
|
top
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
|
@ -14,6 +14,7 @@ const StatusList = React.createClass({
|
||||||
onScroll: React.PropTypes.func,
|
onScroll: React.PropTypes.func,
|
||||||
trackScroll: React.PropTypes.bool,
|
trackScroll: React.PropTypes.bool,
|
||||||
isLoading: React.PropTypes.bool,
|
isLoading: React.PropTypes.bool,
|
||||||
|
isUnread: React.PropTypes.bool,
|
||||||
prepend: React.PropTypes.node,
|
prepend: React.PropTypes.node,
|
||||||
emptyMessage: React.PropTypes.node
|
emptyMessage: React.PropTypes.node
|
||||||
},
|
},
|
||||||
|
@ -72,18 +73,25 @@ const StatusList = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { statusIds, onScrollToBottom, trackScroll, isLoading, prepend, emptyMessage } = this.props;
|
const { statusIds, onScrollToBottom, trackScroll, isLoading, isUnread, prepend, emptyMessage } = this.props;
|
||||||
|
|
||||||
let loadMore = '';
|
let loadMore = '';
|
||||||
let scrollableArea = '';
|
let scrollableArea = '';
|
||||||
|
let unread = '';
|
||||||
|
|
||||||
if (!isLoading && statusIds.size > 0) {
|
if (!isLoading && statusIds.size > 0) {
|
||||||
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>
|
<div>
|
||||||
{prepend}
|
{prepend}
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,7 @@ const messages = defineMessages({
|
||||||
const Header = React.createClass({
|
const Header = React.createClass({
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
account: ImmutablePropTypes.map.isRequired,
|
account: ImmutablePropTypes.map,
|
||||||
me: React.PropTypes.number.isRequired,
|
me: React.PropTypes.number.isRequired,
|
||||||
onFollow: React.PropTypes.func.isRequired,
|
onFollow: React.PropTypes.func.isRequired,
|
||||||
intl: React.PropTypes.object.isRequired
|
intl: React.PropTypes.object.isRequired
|
||||||
|
@ -25,6 +25,10 @@ const Header = React.createClass({
|
||||||
render () {
|
render () {
|
||||||
const { account, me, intl } = this.props;
|
const { account, me, intl } = this.props;
|
||||||
|
|
||||||
|
if (!account) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
let displayName = account.get('display_name');
|
let displayName = account.get('display_name');
|
||||||
let info = '';
|
let info = '';
|
||||||
let actionBtn = '';
|
let actionBtn = '';
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { connect } from 'react-redux';
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import Column from '../ui/components/column';
|
import Column from '../ui/components/column';
|
||||||
import { expandNotifications, clearNotifications } from '../../actions/notifications';
|
import { expandNotifications, clearNotifications, scrollTopNotifications } from '../../actions/notifications';
|
||||||
import NotificationContainer from './containers/notification_container';
|
import NotificationContainer from './containers/notification_container';
|
||||||
import { ScrollContainer } from 'react-router-scroll';
|
import { ScrollContainer } from 'react-router-scroll';
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
|
@ -23,7 +23,8 @@ const getNotifications = createSelector([
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
notifications: getNotifications(state),
|
notifications: getNotifications(state),
|
||||||
isLoading: state.getIn(['notifications', 'isLoading'], true)
|
isLoading: state.getIn(['notifications', 'isLoading'], true),
|
||||||
|
isUnread: state.getIn(['notifications', 'unread']) > 0
|
||||||
});
|
});
|
||||||
|
|
||||||
const Notifications = React.createClass({
|
const Notifications = React.createClass({
|
||||||
|
@ -33,7 +34,8 @@ const Notifications = React.createClass({
|
||||||
dispatch: React.PropTypes.func.isRequired,
|
dispatch: React.PropTypes.func.isRequired,
|
||||||
trackScroll: React.PropTypes.bool,
|
trackScroll: React.PropTypes.bool,
|
||||||
intl: React.PropTypes.object.isRequired,
|
intl: React.PropTypes.object.isRequired,
|
||||||
isLoading: React.PropTypes.bool
|
isLoading: React.PropTypes.bool,
|
||||||
|
isUnread: React.PropTypes.bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps () {
|
getDefaultProps () {
|
||||||
|
@ -51,6 +53,10 @@ const Notifications = React.createClass({
|
||||||
|
|
||||||
if (250 > offset && !this.props.isLoading) {
|
if (250 > offset && !this.props.isLoading) {
|
||||||
this.props.dispatch(expandNotifications());
|
this.props.dispatch(expandNotifications());
|
||||||
|
} else if (scrollTop < 100) {
|
||||||
|
this.props.dispatch(scrollTopNotifications(true));
|
||||||
|
} else {
|
||||||
|
this.props.dispatch(scrollTopNotifications(false));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -74,18 +80,25 @@ const Notifications = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { intl, notifications, trackScroll, isLoading } = this.props;
|
const { intl, notifications, trackScroll, isLoading, isUnread } = this.props;
|
||||||
|
|
||||||
let loadMore = '';
|
let loadMore = '';
|
||||||
let scrollableArea = '';
|
let scrollableArea = '';
|
||||||
|
let unread = '';
|
||||||
|
|
||||||
if (!isLoading && notifications.size > 0) {
|
if (!isLoading && notifications.size > 0) {
|
||||||
loadMore = <LoadMore onClick={this.handleLoadMore} />;
|
loadMore = <LoadMore onClick={this.handleLoadMore} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isUnread) {
|
||||||
|
unread = <div className='notifications__unread-indicator' />;
|
||||||
|
}
|
||||||
|
|
||||||
if (isLoading || notifications.size > 0) {
|
if (isLoading || notifications.size > 0) {
|
||||||
scrollableArea = (
|
scrollableArea = (
|
||||||
<div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
|
<div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
|
||||||
|
{unread}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
|
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
|
||||||
{loadMore}
|
{loadMore}
|
||||||
|
@ -102,7 +115,7 @@ const Notifications = React.createClass({
|
||||||
|
|
||||||
if (trackScroll) {
|
if (trackScroll) {
|
||||||
return (
|
return (
|
||||||
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
|
<Column icon='bell' active={isUnread} heading={intl.formatMessage(messages.title)}>
|
||||||
<ColumnSettingsContainer />
|
<ColumnSettingsContainer />
|
||||||
<ClearColumnButton onClick={this.handleClear} />
|
<ClearColumnButton onClick={this.handleClear} />
|
||||||
<ScrollContainer scrollKey='notifications'>
|
<ScrollContainer scrollKey='notifications'>
|
||||||
|
@ -112,7 +125,7 @@ const Notifications = React.createClass({
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
|
<Column icon='bell' active={isUnread} heading={intl.formatMessage(messages.title)}>
|
||||||
<ColumnSettingsContainer />
|
<ColumnSettingsContainer />
|
||||||
<ClearColumnButton onClick={this.handleClear} />
|
<ClearColumnButton onClick={this.handleClear} />
|
||||||
{scrollableArea}
|
{scrollableArea}
|
||||||
|
|
|
@ -34,7 +34,8 @@ const Column = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
heading: React.PropTypes.string,
|
heading: React.PropTypes.string,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
children: React.PropTypes.node
|
children: React.PropTypes.node,
|
||||||
|
active: React.PropTypes.bool
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [PureRenderMixin],
|
mixins: [PureRenderMixin],
|
||||||
|
@ -51,12 +52,12 @@ const Column = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { heading, icon, children } = this.props;
|
const { heading, icon, children, active } = this.props;
|
||||||
|
|
||||||
let header = '';
|
let header = '';
|
||||||
|
|
||||||
if (heading) {
|
if (heading) {
|
||||||
header = <ColumnHeader icon={icon} type={heading} onClick={this.handleHeaderClick} />;
|
header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -5,6 +5,7 @@ const ColumnHeader = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
type: React.PropTypes.string,
|
type: React.PropTypes.string,
|
||||||
|
active: React.PropTypes.bool,
|
||||||
onClick: React.PropTypes.func
|
onClick: React.PropTypes.func
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -15,6 +16,8 @@ const ColumnHeader = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
const { type, active } = this.props;
|
||||||
|
|
||||||
let icon = '';
|
let icon = '';
|
||||||
|
|
||||||
if (this.props.icon) {
|
if (this.props.icon) {
|
||||||
|
@ -22,9 +25,9 @@ const ColumnHeader = React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='column-header' onClick={this.handleClick}>
|
<div className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick}>
|
||||||
{icon}
|
{icon}
|
||||||
{this.props.type}
|
{type}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ import Immutable from 'immutable';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { debounce } from 'react-decoration';
|
import { debounce } from 'react-decoration';
|
||||||
|
|
||||||
const getStatusIds = createSelector([
|
const makeGetStatusIds = () => createSelector([
|
||||||
(state, { type }) => state.getIn(['settings', type], Immutable.Map()),
|
(state, { type }) => state.getIn(['settings', type], Immutable.Map()),
|
||||||
(state, { type }) => state.getIn(['timelines', type, 'items'], Immutable.List()),
|
(state, { type }) => state.getIn(['timelines', type, 'items'], Immutable.List()),
|
||||||
(state) => state.get('statuses'),
|
(state) => state.get('statuses'),
|
||||||
|
@ -34,10 +34,17 @@ const getStatusIds = createSelector([
|
||||||
return showStatus;
|
return showStatus;
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => ({
|
const makeMapStateToProps = () => {
|
||||||
|
const getStatusIds = makeGetStatusIds();
|
||||||
|
|
||||||
|
const mapStateToProps = (state, props) => ({
|
||||||
statusIds: getStatusIds(state, props),
|
statusIds: getStatusIds(state, props),
|
||||||
isLoading: state.getIn(['timelines', props.type, 'isLoading'], true)
|
isLoading: state.getIn(['timelines', props.type, 'isLoading'], true),
|
||||||
});
|
isUnread: state.getIn(['timelines', props.type, 'unread']) > 0
|
||||||
|
});
|
||||||
|
|
||||||
|
return mapStateToProps;
|
||||||
|
};
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch, { type, id }) => ({
|
const mapDispatchToProps = (dispatch, { type, id }) => ({
|
||||||
|
|
||||||
|
@ -59,4 +66,4 @@ const mapDispatchToProps = (dispatch, { type, id }) => ({
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(StatusList);
|
export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);
|
||||||
|
|
|
@ -6,7 +6,8 @@ import {
|
||||||
NOTIFICATIONS_EXPAND_REQUEST,
|
NOTIFICATIONS_EXPAND_REQUEST,
|
||||||
NOTIFICATIONS_REFRESH_FAIL,
|
NOTIFICATIONS_REFRESH_FAIL,
|
||||||
NOTIFICATIONS_EXPAND_FAIL,
|
NOTIFICATIONS_EXPAND_FAIL,
|
||||||
NOTIFICATIONS_CLEAR
|
NOTIFICATIONS_CLEAR,
|
||||||
|
NOTIFICATIONS_SCROLL_TOP
|
||||||
} from '../actions/notifications';
|
} from '../actions/notifications';
|
||||||
import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts';
|
import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts';
|
||||||
import Immutable from 'immutable';
|
import Immutable from 'immutable';
|
||||||
|
@ -14,6 +15,8 @@ import Immutable from 'immutable';
|
||||||
const initialState = Immutable.Map({
|
const initialState = Immutable.Map({
|
||||||
items: Immutable.List(),
|
items: Immutable.List(),
|
||||||
next: null,
|
next: null,
|
||||||
|
top: true,
|
||||||
|
unread: 0,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
isLoading: true
|
isLoading: true
|
||||||
});
|
});
|
||||||
|
@ -26,6 +29,10 @@ const notificationToMap = notification => Immutable.Map({
|
||||||
});
|
});
|
||||||
|
|
||||||
const normalizeNotification = (state, notification) => {
|
const normalizeNotification = (state, notification) => {
|
||||||
|
if (!state.get('top')) {
|
||||||
|
state = state.update('unread', unread => unread + 1);
|
||||||
|
}
|
||||||
|
|
||||||
return state.update('items', list => list.unshift(notificationToMap(notification)));
|
return state.update('items', list => list.unshift(notificationToMap(notification)));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -64,6 +71,14 @@ const filterNotifications = (state, relationship) => {
|
||||||
return state.update('items', list => list.filterNot(item => item.get('account') === relationship.id));
|
return state.update('items', list => list.filterNot(item => item.get('account') === relationship.id));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const updateTop = (state, top) => {
|
||||||
|
if (top) {
|
||||||
|
state = state.set('unread', 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return state.set('top', top);
|
||||||
|
};
|
||||||
|
|
||||||
export default function notifications(state = initialState, action) {
|
export default function notifications(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case NOTIFICATIONS_REFRESH_REQUEST:
|
case NOTIFICATIONS_REFRESH_REQUEST:
|
||||||
|
@ -71,6 +86,8 @@ export default function notifications(state = initialState, action) {
|
||||||
case NOTIFICATIONS_REFRESH_FAIL:
|
case NOTIFICATIONS_REFRESH_FAIL:
|
||||||
case NOTIFICATIONS_EXPAND_FAIL:
|
case NOTIFICATIONS_EXPAND_FAIL:
|
||||||
return state.set('isLoading', true);
|
return state.set('isLoading', true);
|
||||||
|
case NOTIFICATIONS_SCROLL_TOP:
|
||||||
|
return updateTop(state, action.top);
|
||||||
case NOTIFICATIONS_UPDATE:
|
case NOTIFICATIONS_UPDATE:
|
||||||
return normalizeNotification(state, action.notification);
|
return normalizeNotification(state, action.notification);
|
||||||
case NOTIFICATIONS_REFRESH_SUCCESS:
|
case NOTIFICATIONS_REFRESH_SUCCESS:
|
||||||
|
|
|
@ -36,6 +36,7 @@ const initialState = Immutable.Map({
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
top: true,
|
top: true,
|
||||||
|
unread: 0,
|
||||||
items: Immutable.List()
|
items: Immutable.List()
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -45,6 +46,7 @@ const initialState = Immutable.Map({
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
top: true,
|
top: true,
|
||||||
|
unread: 0,
|
||||||
items: Immutable.List()
|
items: Immutable.List()
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -55,6 +57,7 @@ const initialState = Immutable.Map({
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
top: true,
|
top: true,
|
||||||
|
unread: 0,
|
||||||
items: Immutable.List()
|
items: Immutable.List()
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -65,6 +68,7 @@ const initialState = Immutable.Map({
|
||||||
id: null,
|
id: null,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
top: true,
|
top: true,
|
||||||
|
unread: 0,
|
||||||
items: Immutable.List()
|
items: Immutable.List()
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -155,6 +159,10 @@ const updateTimeline = (state, timeline, status, references) => {
|
||||||
|
|
||||||
state = normalizeStatus(state, status);
|
state = normalizeStatus(state, status);
|
||||||
|
|
||||||
|
if (!top) {
|
||||||
|
state = state.updateIn([timeline, 'unread'], unread => unread + 1);
|
||||||
|
}
|
||||||
|
|
||||||
state = state.updateIn([timeline, 'items'], Immutable.List(), list => {
|
state = state.updateIn([timeline, 'items'], Immutable.List(), list => {
|
||||||
if (top && list.size > 40) {
|
if (top && list.size > 40) {
|
||||||
list = list.take(20);
|
list = list.take(20);
|
||||||
|
@ -249,6 +257,14 @@ const resetTimeline = (state, timeline, id) => {
|
||||||
return state;
|
return state;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const updateTop = (state, timeline, top) => {
|
||||||
|
if (top) {
|
||||||
|
state = state.setIn([timeline, 'unread'], 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return state.setIn([timeline, 'top'], top);
|
||||||
|
};
|
||||||
|
|
||||||
export default function timelines(state = initialState, action) {
|
export default function timelines(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case TIMELINE_REFRESH_REQUEST:
|
case TIMELINE_REFRESH_REQUEST:
|
||||||
|
@ -280,7 +296,7 @@ export default function timelines(state = initialState, action) {
|
||||||
case ACCOUNT_BLOCK_SUCCESS:
|
case ACCOUNT_BLOCK_SUCCESS:
|
||||||
return filterTimelines(state, action.relationship, action.statuses);
|
return filterTimelines(state, action.relationship, action.statuses);
|
||||||
case TIMELINE_SCROLL_TOP:
|
case TIMELINE_SCROLL_TOP:
|
||||||
return state.setIn([action.timeline, 'top'], action.top);
|
return updateTop(state, action.timeline, action.top);
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1079,6 +1079,11 @@ button.active i.fa-retweet {
|
||||||
background: lighten($color1, 4%);
|
background: lighten($color1, 4%);
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $color4;
|
||||||
|
text-shadow: 0 0 10px rgba($color4, 0.4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
|
@ -1201,3 +1206,14 @@ button.active i.fa-retweet {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.status-list__unread-indicator, .notifications__unread-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 48px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
height: 30px;
|
||||||
|
z-index: 2;
|
||||||
|
background: linear-gradient(to bottom, rgba($color4, 0.3) 0%, rgba($color4, 0) 60%);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue