ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix responsive layout breakpoint, replace mentions column with notifications

rebase/4.0.0rc2
Eugen Rochko 2016-11-21 10:03:55 +01:00
parent 29b12f9e0a
commit e616ffc5d6
3 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/javascripts/components/features/notifications/index.jsx
View File

@ -22,7 +22,8 @@ const Notifications = React.createClass({
propTypes: {
notifications: ImmutablePropTypes.list.isRequired,
dispatch: React.PropTypes.func.isRequired
dispatch: React.PropTypes.func.isRequired,
trackScroll: React.PropTypes.bool
},
mixins: [PureRenderMixin],
@ -41,19 +42,31 @@ const Notifications = React.createClass({
},
render () {
const { intl, notifications } = this.props;
const { intl, notifications, trackScroll } = this.props;
return (
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
<ScrollContainer scrollKey='notifications'>
<div className='scrollable' onScroll={this.handleScroll}>
<div>
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
</div>
</div>
</ScrollContainer>
</Column>
const scrollableArea = (
<div className='scrollable' onScroll={this.handleScroll}>
<div>
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
</div>
</div>
);
if (trackScroll) {
return (
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
<ScrollContainer scrollKey='notifications'>
{scrollableArea}
</ScrollContainer>
</Column>
);
} else {
return (
<Column icon='bell' heading={intl.formatMessage(messages.title)}>
{scrollableArea}
</Column>
);
}
}
});

2
app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
View File

@ -31,7 +31,7 @@ const TabsBar = () => {
<div style={outerStyle}>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/mentions'><i className='fa fa-fw fa-at' /> <FormattedMessage id='tabs_bar.mentions' defaultMessage='Mentions' /></Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/public'><i className='fa fa-fw fa-globe' /> <FormattedMessage id='tabs_bar.public' defaultMessage='Public' /></Link>
</div>
);

23
app/assets/javascripts/components/features/ui/index.jsx
View File

@ -1,13 +1,14 @@
import ColumnsArea from './components/columns_area';
import ColumnsArea from './components/columns_area';
import NotificationsContainer from './containers/notifications_container';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import LoadingBarContainer from './containers/loading_bar_container';
import HomeTimeline from '../home_timeline';
import MentionsTimeline from '../mentions_timeline';
import Compose from '../compose';
import MediaQuery from 'react-responsive';
import TabsBar from './components/tabs_bar';
import ModalContainer from './containers/modal_container';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import LoadingBarContainer from './containers/loading_bar_container';
import HomeTimeline from '../home_timeline';
import MentionsTimeline from '../mentions_timeline';
import Compose from '../compose';
import MediaQuery from 'react-responsive';
import TabsBar from './components/tabs_bar';
import ModalContainer from './containers/modal_container';
import Notifications from '../notifications';
const UI = React.createClass({
@ -26,11 +27,11 @@ const UI = React.createClass({
{this.props.children}
</MediaQuery>
<MediaQuery minWidth={layoutBreakpoint}>
<MediaQuery minWidth={layoutBreakpoint + 1}>
<ColumnsArea>
<Compose />
<HomeTimeline trackScroll={false} />
<MentionsTimeline trackScroll={false} />
<Notifications trackScroll={false} />
{this.props.children}
</ColumnsArea>
</MediaQuery>