gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix #38 - Unread indicator when new content appears above the fold

Browse source
This commit is contained in:
Eugen Rochko 2017-02-21 00:10:49 +01:00
parent f338cc6c94
commit 5997bb47a8
10 changed files with 116 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/components/features/ui/components/column.jsx
View file

@ -34,7 +34,8 @@ const Column = React.createClass({
propTypes: {
heading: React.PropTypes.string,
icon: React.PropTypes.string,
children: React.PropTypes.node
children: React.PropTypes.node,
active: React.PropTypes.bool
},
mixins: [PureRenderMixin],
@ -51,12 +52,12 @@ const Column = React.createClass({
},
render () {
const { heading, icon, children } = this.props;
const { heading, icon, children, active } = this.props;
let header = '';
if (heading) {
header = <ColumnHeader icon={icon} type={heading} onClick={this.handleHeaderClick} />;
header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} />;
}
return (

7
app/assets/javascripts/components/features/ui/components/column_header.jsx
View file

@ -5,6 +5,7 @@ const ColumnHeader = React.createClass({
propTypes: {
icon: React.PropTypes.string,
type: React.PropTypes.string,
active: React.PropTypes.bool,
onClick: React.PropTypes.func
},
@ -15,6 +16,8 @@ const ColumnHeader = React.createClass({
},
render () {
const { type, active } = this.props;
let icon = '';
if (this.props.icon) {
@ -22,9 +25,9 @@ const ColumnHeader = React.createClass({
}
return (
<div className='column-header' onClick={this.handleClick}>
<div className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick}>
{icon}
{this.props.type}
{type}
</div>
);
}

19
app/assets/javascripts/components/features/ui/containers/status_list_container.jsx
View file

@ -5,7 +5,7 @@ import Immutable from 'immutable';
import { createSelector } from 'reselect';
import { debounce } from 'react-decoration';
const getStatusIds = createSelector([
const makeGetStatusIds = () => createSelector([
(state, { type }) => state.getIn(['settings', type], Immutable.Map()),
(state, { type }) => state.getIn(['timelines', type, 'items'], Immutable.List()),
(state) => state.get('statuses'),
@ -34,10 +34,17 @@ const getStatusIds = createSelector([
return showStatus;
}));
const mapStateToProps = (state, props) => ({
statusIds: getStatusIds(state, props),
isLoading: state.getIn(['timelines', props.type, 'isLoading'], true)
});
const makeMapStateToProps = () => {
const getStatusIds = makeGetStatusIds();
const mapStateToProps = (state, props) => ({
statusIds: getStatusIds(state, props),
isLoading: state.getIn(['timelines', props.type, 'isLoading'], true),
isUnread: state.getIn(['timelines', props.type, 'unread']) > 0
});
return mapStateToProps;
};
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);