From e616ffc5d60acafb67dadf90e396226d408d0cda Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 21 Nov 2016 10:03:55 +0100 Subject: [PATCH] Fix responsive layout breakpoint, replace mentions column with notifications --- .../features/notifications/index.jsx | 39 ++++++++++++------- .../features/ui/components/tabs_bar.jsx | 2 +- .../components/features/ui/index.jsx | 23 +++++------ 3 files changed, 39 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/components/features/notifications/index.jsx b/app/assets/javascripts/components/features/notifications/index.jsx index 9c8b07dea..00feeece7 100644 --- a/app/assets/javascripts/components/features/notifications/index.jsx +++ b/app/assets/javascripts/components/features/notifications/index.jsx @@ -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; - - return ( - - -
-
- {notifications.map(item => )} -
-
-
-
+ const { intl, notifications, trackScroll } = this.props; + + const scrollableArea = ( +
+
+ {notifications.map(item => )} +
+
); + + if (trackScroll) { + return ( + + + {scrollableArea} + + + ); + } else { + return ( + + {scrollableArea} + + ); + } } }); diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx index 8313d8826..868ebe00a 100644 --- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx +++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx @@ -31,7 +31,7 @@ const TabsBar = () => {
- +
); diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index 655b1e2ee..9b5469bbd 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -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} - + - + {this.props.children}