specter/mastodon
1
0
Fork 1
forked from fedi/mastodon
Code Pull requests Activity

Fix responsive layout breakpoint, replace mentions column with notifications

Browse source
This commit is contained in:
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: { propTypes: {
notifications: ImmutablePropTypes.list.isRequired, notifications: ImmutablePropTypes.list.isRequired,
dispatch: React.PropTypes.func.isRequired dispatch: React.PropTypes.func.isRequired,
trackScroll: React.PropTypes.bool
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -41,19 +42,31 @@ const Notifications = React.createClass({
}, },
render () { render () {
const { intl, notifications } = this.props; const { intl, notifications, trackScroll } = this.props;
return ( const scrollableArea = (
<Column icon='bell' heading={intl.formatMessage(messages.title)}> <div className='scrollable' onScroll={this.handleScroll}>
<ScrollContainer scrollKey='notifications'> <div>
<div className='scrollable' onScroll={this.handleScroll}> {notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
<div> </div>
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)} </div>
</div>
</div>
</ScrollContainer>
</Column>
); );
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}> <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='/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/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> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/public'><i className='fa fa-fw fa-globe' /> <FormattedMessage id='tabs_bar.public' defaultMessage='Public' /></Link>
</div> </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 NotificationsContainer from './containers/notifications_container';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import LoadingBarContainer from './containers/loading_bar_container'; import LoadingBarContainer from './containers/loading_bar_container';
import HomeTimeline from '../home_timeline'; import HomeTimeline from '../home_timeline';
import MentionsTimeline from '../mentions_timeline'; import MentionsTimeline from '../mentions_timeline';
import Compose from '../compose'; import Compose from '../compose';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
import TabsBar from './components/tabs_bar'; import TabsBar from './components/tabs_bar';
import ModalContainer from './containers/modal_container'; import ModalContainer from './containers/modal_container';
import Notifications from '../notifications';
const UI = React.createClass({ const UI = React.createClass({
@ -26,11 +27,11 @@ const UI = React.createClass({
{this.props.children} {this.props.children}
</MediaQuery> </MediaQuery>
<MediaQuery minWidth={layoutBreakpoint}> <MediaQuery minWidth={layoutBreakpoint + 1}>
<ColumnsArea> <ColumnsArea>
<Compose /> <Compose />
<HomeTimeline trackScroll={false} /> <HomeTimeline trackScroll={false} />
<MentionsTimeline trackScroll={false} /> <Notifications trackScroll={false} />
{this.props.children} {this.props.children}
</ColumnsArea> </ColumnsArea>
</MediaQuery> </MediaQuery>