mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-25 05:13:40 +01:00
Fix #341 - Remove react-responsive in favour of simpler resize handler/window width
This commit is contained in:
parent
2ef9f36cf2
commit
bf5f8a2449
6 changed files with 58 additions and 45 deletions
|
@ -41,15 +41,17 @@ const Lightbox = React.createClass({
|
||||||
mixins: [PureRenderMixin],
|
mixins: [PureRenderMixin],
|
||||||
|
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
this._listener = window.addEventListener('keyup', e => {
|
this._listener = e => {
|
||||||
if (e.key === 'Escape') {
|
if (e.key === 'Escape') {
|
||||||
this.props.onCloseClicked();
|
this.props.onCloseClicked();
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keyup', this._listener);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
window.removeEventListener(this._listener);
|
window.removeEventListener('keyup', this._listener);
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
|
|
@ -5,8 +5,7 @@ const outerStyle = {
|
||||||
background: '#373b4a',
|
background: '#373b4a',
|
||||||
margin: '10px',
|
margin: '10px',
|
||||||
flex: '0 0 auto',
|
flex: '0 0 auto',
|
||||||
marginBottom: '0',
|
marginBottom: '0'
|
||||||
display: 'flex'
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const tabStyle = {
|
const tabStyle = {
|
||||||
|
@ -28,7 +27,7 @@ const tabActiveStyle = {
|
||||||
|
|
||||||
const TabsBar = () => {
|
const TabsBar = () => {
|
||||||
return (
|
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='/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='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
|
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
|
||||||
|
|
|
@ -5,36 +5,61 @@ 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 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';
|
import Notifications from '../notifications';
|
||||||
|
import { debounce } from 'react-decoration';
|
||||||
|
|
||||||
const UI = React.createClass({
|
const UI = React.createClass({
|
||||||
|
|
||||||
|
getInitialState () {
|
||||||
|
return {
|
||||||
|
width: window.innerWidth
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
mixins: [PureRenderMixin],
|
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 () {
|
render () {
|
||||||
const layoutBreakpoint = 1024;
|
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 (
|
return (
|
||||||
<div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
|
<div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
|
||||||
<MediaQuery maxWidth={layoutBreakpoint}>
|
<TabsBar />
|
||||||
<TabsBar />
|
|
||||||
</MediaQuery>
|
|
||||||
|
|
||||||
<MediaQuery maxWidth={layoutBreakpoint} component={ColumnsArea}>
|
{mountedColumns}
|
||||||
{this.props.children}
|
|
||||||
</MediaQuery>
|
|
||||||
|
|
||||||
<MediaQuery minWidth={layoutBreakpoint + 1}>
|
|
||||||
<ColumnsArea>
|
|
||||||
<Compose />
|
|
||||||
<HomeTimeline trackScroll={false} />
|
|
||||||
<Notifications trackScroll={false} />
|
|
||||||
{this.props.children}
|
|
||||||
</ColumnsArea>
|
|
||||||
</MediaQuery>
|
|
||||||
|
|
||||||
<NotificationsContainer />
|
<NotificationsContainer />
|
||||||
<LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />
|
<LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />
|
||||||
|
|
|
@ -355,6 +355,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs-bar {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1025px) {
|
||||||
|
.tabs-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.react-autosuggest__container {
|
.react-autosuggest__container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,7 +39,6 @@
|
||||||
"react-proxy": "^1.1.8",
|
"react-proxy": "^1.1.8",
|
||||||
"react-redux": "^5.0.0-beta.3",
|
"react-redux": "^5.0.0-beta.3",
|
||||||
"react-redux-loading-bar": "^2.4.1",
|
"react-redux-loading-bar": "^2.4.1",
|
||||||
"react-responsive": "^1.1.5",
|
|
||||||
"react-router": "^2.8.0",
|
"react-router": "^2.8.0",
|
||||||
"react-router-scroll": "^0.3.2",
|
"react-router-scroll": "^0.3.2",
|
||||||
"react-simple-dropdown": "^1.1.4",
|
"react-simple-dropdown": "^1.1.4",
|
||||||
|
|
22
yarn.lock
22
yarn.lock
|
@ -1585,10 +1585,6 @@ css-loader@0.25.0:
|
||||||
postcss-modules-values "^1.1.0"
|
postcss-modules-values "^1.1.0"
|
||||||
source-list-map "^0.1.4"
|
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:
|
css-select@~1.2.0:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
|
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"
|
version "0.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
|
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:
|
iconv-lite@^0.4.13, iconv-lite@~0.4.13:
|
||||||
version "0.4.13"
|
version "0.4.13"
|
||||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
|
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-komposer "^1.9.0"
|
||||||
react-simple-di "^1.2.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:
|
math-expression-evaluator@^1.2.14:
|
||||||
version "1.2.14"
|
version "1.2.14"
|
||||||
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
|
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"
|
lodash-es "^4.2.0"
|
||||||
loose-envify "^1.1.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:
|
react-router-scroll:
|
||||||
version "0.3.2"
|
version "0.3.2"
|
||||||
resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.3.2.tgz#ba8b1d01b3681dc5a68d72865d35c10e84065e52"
|
resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.3.2.tgz#ba8b1d01b3681dc5a68d72865d35c10e84065e52"
|
||||||
|
|
Loading…
Reference in a new issue