diff options
Diffstat (limited to 'app/assets/javascripts/components/features/ui/index.jsx')
-rw-r--r-- | app/assets/javascripts/components/features/ui/index.jsx | 57 |
1 files changed, 41 insertions, 16 deletions
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index 9b5469bbd..39ef35676 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -5,36 +5,61 @@ 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'; +import { debounce } from 'react-decoration'; const UI = React.createClass({ + getInitialState () { + return { + width: window.innerWidth + }; + }, + mixins: [PureRenderMixin], + @debounce(500) + handleResize () { + this.setState({ width: window.innerWidth }); + }, + + componentWillMount () { + window.addEventListener('resize', this.handleResize, { passive: true }); + }, + + componentWillUnmount () { + window.removeEventListener('resize', this.handleResize); + }, + render () { const layoutBreakpoint = 1024; + let mountedColumns; + + if (this.state.width <= layoutBreakpoint) { + mountedColumns = ( + <ColumnsArea> + {this.props.children} + </ColumnsArea> + ); + } else { + mountedColumns = ( + <ColumnsArea> + <Compose /> + <HomeTimeline trackScroll={false} /> + <Notifications trackScroll={false} /> + {this.props.children} + </ColumnsArea> + ); + } + return ( <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}> - <MediaQuery maxWidth={layoutBreakpoint}> - <TabsBar /> - </MediaQuery> + <TabsBar /> - <MediaQuery maxWidth={layoutBreakpoint} component={ColumnsArea}> - {this.props.children} - </MediaQuery> - - <MediaQuery minWidth={layoutBreakpoint + 1}> - <ColumnsArea> - <Compose /> - <HomeTimeline trackScroll={false} /> - <Notifications trackScroll={false} /> - {this.props.children} - </ColumnsArea> - </MediaQuery> + {mountedColumns} <NotificationsContainer /> <LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} /> |