Added settings toggle to move the navbar at the bottom in mobile view (#93)

This commit is contained in:
Ondřej Hruška 2017-07-22 19:51:34 +02:00 committed by GitHub
parent 984d2d4cb6
commit 74a0cc6a11
4 changed files with 15 additions and 2 deletions

View File

@ -53,6 +53,14 @@ export default class LocalSettingsPage extends React.PureComponent {
>
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['navbar_under']}
id='mastodon-settings--navbar_under'
onChange={onChange}
>
<FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' />
</LocalSettingsPageItem>
</div>
),
({ onChange, settings }) => (

View File

@ -26,6 +26,7 @@
"settings.media_fullwidth": "Full-width media previews",
"settings.preferences": "User preferences",
"settings.wide_view": "Wide view (Desktop mode only)",
"settings.navbar_under": "Navbar at the bottom (Mobile only)",
"status.collapse": "Collapse",
"status.uncollapse": "Uncollapse",
"notification.markForDeletion": "Mark for deletion"

View File

@ -51,6 +51,7 @@ These are only used if no previously-saved values exist.
const initialState = ImmutableMap({
layout : 'auto',
stretch : true,
navbar_under : false,
collapsed : ImmutableMap({
enabled : true,
auto : ImmutableMap({

View File

@ -45,6 +45,7 @@ const mapStateToProps = state => ({
systemFontUi: state.getIn(['meta', 'system_font_ui']),
layout: state.getIn(['local_settings', 'layout']),
isWide: state.getIn(['local_settings', 'stretch']),
navbarUnder: state.getIn(['local_settings', 'navbar_under']),
isComposing: state.getIn(['compose', 'is_composing']),
});
@ -57,6 +58,7 @@ export default class UI extends React.PureComponent {
layout: PropTypes.string,
isWide: PropTypes.bool,
systemFontUi: PropTypes.bool,
navbarUnder: PropTypes.bool,
isComposing: PropTypes.bool,
};
@ -167,7 +169,7 @@ export default class UI extends React.PureComponent {
render () {
const { width, draggingOver } = this.state;
const { children, layout, isWide } = this.props;
const { children, layout, isWide, navbarUnder } = this.props;
const columnsClass = layout => {
switch (layout) {
@ -187,7 +189,7 @@ export default class UI extends React.PureComponent {
return (
<div className={className} ref={this.setRef}>
<TabsBar />
{navbarUnder ? null : (<TabsBar />)}
<ColumnsAreaContainer singleColumn={isMobile(width, layout)}>
<WrappedSwitch>
<Redirect from='/' to='/getting-started' exact />
@ -218,6 +220,7 @@ export default class UI extends React.PureComponent {
</WrappedSwitch>
</ColumnsAreaContainer>
<NotificationsContainer />
{navbarUnder ? (<TabsBar />) : null}
<LoadingBarContainer className='loading-bar' />
<ModalContainer />
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />