Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add forceSingleColumn prop to <UI /> (#10807)

Browse source 
* Move TabsBar rendering logic from CSS to the ColumnsArea component

* Add forceSingleColumn mode

* Add unread notifications counter to tabs bar

* Add toggle to control `forceSingleColumn`

* Increase paddings in mobile layout responsively at large sizes
This commit is contained in:
Eugen Rochko 2019-05-23 01:35:22 +02:00 • committed by GitHub
parent ca6c93a2f5
commit 9ddeb30f90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 309 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/mastodon/features/ui/components/columns_area.js
View file

@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ReactSwipeableViews from 'react-swipeable-views';
import { links, getIndex, getLink } from './tabs_bar';
import TabsBar, { links, getIndex, getLink } from './tabs_bar';
import { Link } from 'react-router-dom';
import BundleContainer from '../containers/bundle_container';
@ -139,7 +139,7 @@ class ColumnsArea extends ImmutablePureComponent {
<ColumnLoading title={title} icon={icon} />;
return (
<div className='columns-area' key={index}>
<div className='columns-area columns-area--mobile' key={index}>
{view}
</div>
);
@ -164,13 +164,17 @@ class ColumnsArea extends ImmutablePureComponent {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
return columnIndex !== -1 ? [
<TabsBar key='tabs' />,
<ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
{links.map(this.renderView)}
</ReactSwipeableViews>,
floatingActionButton,
] : [
<div className='columns-area'>{children}</div>,
<TabsBar key='tabs' />,
<div key='content' className='columns-area columns-area--mobile'>{children}</div>,
floatingActionButton,
];