diff options
Diffstat (limited to 'app')
4 files changed, 58 insertions, 22 deletions
diff --git a/app/assets/javascripts/components/components/lightbox.jsx b/app/assets/javascripts/components/components/lightbox.jsx index 29822ccb3..b5c2a69d8 100644 --- a/app/assets/javascripts/components/components/lightbox.jsx +++ b/app/assets/javascripts/components/components/lightbox.jsx @@ -41,15 +41,17 @@ const Lightbox = React.createClass({ mixins: [PureRenderMixin], componentDidMount () { - this._listener = window.addEventListener('keyup', e => { + this._listener = e => { if (e.key === 'Escape') { this.props.onCloseClicked(); } - }); + }; + + window.addEventListener('keyup', this._listener); }, componentWillUnmount () { - window.removeEventListener(this._listener); + window.removeEventListener('keyup', this._listener); }, render () { 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 868ebe00a..219979522 100644 --- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx +++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx @@ -5,8 +5,7 @@ const outerStyle = { background: '#373b4a', margin: '10px', flex: '0 0 auto', - marginBottom: '0', - display: 'flex' + marginBottom: '0' }; const tabStyle = { @@ -28,7 +27,7 @@ const tabActiveStyle = { const TabsBar = () => { return ( - <div style={outerStyle}> + <div className='tabs-bar' 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='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link> 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' }} /> diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index cc9f0eb3b..b1249ff7e 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -355,6 +355,16 @@ } } +.tabs-bar { + display: flex; +} + +@media screen and (min-width: 1025px) { + .tabs-bar { + display: none; + } +} + .react-autosuggest__container { position: relative; } |