cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Fix #341 - Remove react-responsive in favour of simpler resize handler/window width

This commit is contained in:
Eugen Rochko 2016-12-06 19:18:37 +01:00
parent 2ef9f36cf2
commit bf5f8a2449
6 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/components/components/lightbox.jsx
View File

@ -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 () {

5
app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
View File

@ -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>

57
app/assets/javascripts/components/features/ui/index.jsx
View File

@ -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' }} />

10
app/assets/stylesheets/components.scss
View File

@ -355,6 +355,16 @@
}
}
.tabs-bar {
display: flex;
}
@media screen and (min-width: 1025px) {
.tabs-bar {
display: none;
}
}
.react-autosuggest__container {
position: relative;
}

1
package.json
View File

@ -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",

22
yarn.lock
View File

@ -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"