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)' /> <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
</LocalSettingsPageItem> </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> </div>
), ),
({ onChange, settings }) => ( ({ onChange, settings }) => (

View file

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

View file

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

View file

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