Add forceSingleColumn
prop to <UI />
(#10807)
* 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:
parent
ca6c93a2f5
commit
9ddeb30f90
9 changed files with 309 additions and 131 deletions
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import Icon from 'mastodon/components/icon';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
count: state.getIn(['notifications', 'unread']),
|
||||
});
|
||||
|
||||
const formatNumber = num => num > 99 ? '99+' : num;
|
||||
|
||||
const NotificationsCounterIcon = ({ count }) => (
|
||||
<i className='icon-with-badge'>
|
||||
<Icon id='bell' fixedWidth />
|
||||
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
|
||||
</i>
|
||||
);
|
||||
|
||||
NotificationsCounterIcon.propTypes = {
|
||||
count: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(NotificationsCounterIcon);
|
Loading…
Add table
Add a link
Reference in a new issue