commit: bf5f8a2449fa10f93ecc7386d9fff21738dd0466
parent: 2ef9f36cf2b956a6e9057a4ef784f7770a97419e
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 6 Dec 2016 19:18:37 +0100
Fix #341 - Remove react-responsive in favour of simpler resize handler/window width
Diffstat:
6 files changed, 58 insertions(+), 45 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -355,6 +355,16 @@
}
}
+.tabs-bar {
+ display: flex;
+}
+
+@media screen and (min-width: 1025px) {
+ .tabs-bar {
+ display: none;
+ }
+}
+
.react-autosuggest__container {
position: relative;
}
diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
"react-proxy": "^1.1.8",
"react-redux": "^5.0.0-beta.3",
"react-redux-loading-bar": "^2.4.1",
- "react-responsive": "^1.1.5",
"react-router": "^2.8.0",
"react-router-scroll": "^0.3.2",
"react-simple-dropdown": "^1.1.4",
diff --git a/yarn.lock b/yarn.lock
@@ -1585,10 +1585,6 @@ css-loader@0.25.0:
postcss-modules-values "^1.1.0"
source-list-map "^0.1.4"
-css-mediaquery@^0.1.2:
- version "0.1.2"
- resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
-
css-select@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -2414,10 +2410,6 @@ https-browserify@~0.0.0:
version "0.0.1"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
-hyphenate-style-name@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.1.tgz#bc49b9446e02b4570641afdd29c1ce7609d1b9cc"
-
iconv-lite@^0.4.13, iconv-lite@~0.4.13:
version "0.4.13"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
@@ -3011,12 +3003,6 @@ mantra-core@^1.6.1:
react-komposer "^1.9.0"
react-simple-di "^1.2.0"
-matchmedia@^0.1.2:
- version "0.1.2"
- resolved "https://registry.yarnpkg.com/matchmedia/-/matchmedia-0.1.2.tgz#cfd47f2bf68fbc7f5ea1bd3a3cf1715ecba3c1bd"
- dependencies:
- css-mediaquery "^0.1.2"
-
math-expression-evaluator@^1.2.14:
version "1.2.14"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
@@ -3977,14 +3963,6 @@ react-redux@^5.0.0-beta.3:
lodash-es "^4.2.0"
loose-envify "^1.1.0"
-react-responsive:
- version "1.1.5"
- resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-1.1.5.tgz#a7019a28817dcb601ef31d10d72f798a0d710a17"
- dependencies:
- hyphenate-style-name "^1.0.0"
- matchmedia "^0.1.2"
- object-assign "^4.0.1"
-
react-router-scroll:
version "0.3.2"
resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.3.2.tgz#ba8b1d01b3681dc5a68d72865d35c10e84065e52"
