tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add single-column mode

Browse Source 
Port 9ddeb30f90 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko
2019-05-23 01:35:22 +02:00
committed by ThibG
parent fe5c4f976c
commit 610b4b44c4
11 changed files with 247 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/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 @@ export default 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 @@ export default 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)}><i className='fa fa-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%' }} disabled={!swipeToChangeColumns}>
{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,
];

24
app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Icon from 'flavours/glitch/components/icon';
const mapStateToProps = state => ({
count: state.getIn(['notifications', 'unread']),
showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
});
const formatNumber = num => num > 99 ? '99+' : num;
const NotificationsCounterIcon = ({ count, showBadge }) => (
<i className='icon-with-badge'>
<Icon icon='bell' fixedWidth />
{showBadge && count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
</i>
);
NotificationsCounterIcon.propTypes = {
count: PropTypes.number.isRequired,
};
export default connect(mapStateToProps)(NotificationsCounterIcon);

27
app/javascript/flavours/glitch/features/ui/components/tabs_bar.js
View File

@@ -4,34 +4,11 @@ import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage, injectIntl } from 'react-intl';
import { debounce } from 'lodash';
import { isUserTouching } from 'flavours/glitch/util/is_mobile';
import { connect } from 'react-redux';
const mapStateToProps = state => ({
unreadNotifications: state.getIn(['notifications', 'unread']),
showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
});
@connect(mapStateToProps)
class NotificationsIcon extends React.PureComponent {
static propTypes = {
unreadNotifications: PropTypes.number,
showBadge: PropTypes.bool,
};
render() {
const { unreadNotifications, showBadge } = this.props;
return (
<span className='icon-badge-wrapper'>
<i className='fa fa-fw fa-bell' />
{ showBadge && unreadNotifications > 0 && <div className='icon-badge' />}
</span>
);
}
}
import NotificationsCounterIcon from './notifications_counter_icon';
export const links = [
<NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>,
<NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsIcon /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
<NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
<NavLink className='tabs-bar__link secondary' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>,
<NavLink className='tabs-bar__link secondary' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>,