diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2017-06-24 17:07:25 -0700 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2017-06-24 18:30:30 -0700 |
commit | ddba5d3b8c065cdf1ef206b13fea02444ffdf1f7 (patch) | |
tree | 7321fc9c0700dcc58701b8122d756409044c0824 /app | |
parent | ceb545c08002ed34f8837ddd2fd032178f59c6ed (diff) |
Use Redux store to keep track of layout
Diffstat (limited to 'app')
-rw-r--r-- | app/javascript/mastodon/containers/mastodon.js | 1 | ||||
-rw-r--r-- | app/javascript/mastodon/features/ui/index.js | 31 | ||||
-rw-r--r-- | app/javascript/mastodon/is_mobile.js | 4 | ||||
-rw-r--r-- | app/javascript/mastodon/reducers/settings.js | 1 |
4 files changed, 22 insertions, 15 deletions
diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index 3bd89902f..f66110520 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -24,6 +24,7 @@ addLocaleData(localeData); const store = configureStore(); const initialState = JSON.parse(document.getElementById('initial-state').textContent); +if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout'); store.dispatch(hydrateStore(initialState)); export default class Mastodon extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index a372deac5..f8c10f9a3 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -74,21 +74,17 @@ class WrappedRoute extends React.Component { } -function columnClass(columns) { - switch (columns) { - case "auto": return "auto-columns"; - case "single": return "single-column"; - case "multiple": return "multi-columns"; - default: return "auto-columns"; - } -} +const mapStateToProps = state => ({ + layout: state.getIn(['settings', 'layout']), +}); -@connect() +@connect(mapStateToProps) export default class UI extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, children: PropTypes.node, + layout: PropTypes.string, }; state = { @@ -184,15 +180,24 @@ export default class UI extends React.PureComponent { } render () { - const { width, draggingOver } = this.state; + const { width, draggingOver, layout } = this.state; const { children } = this.props; - const columns = "auto"; + const columnsClass = layout => { + switch (layout) { + case 'single': + return 'single-column'; + case 'multiple': + return 'multiple-columns'; + default: + return 'auto-columns'; + } + } return ( - <div className={'ui ' + columnClass(columns)} ref={this.setRef}> + <div className={'ui ' + columnsClass(layout)} ref={this.setRef}> <TabsBar /> - <ColumnsAreaContainer singleColumn={isMobile(width, columns)}> + <ColumnsAreaContainer singleColumn={isMobile(width, layout)}> <WrappedSwitch> <Redirect from='/' to='/getting-started' exact /> <WrappedRoute path='/getting-started' component={GettingStarted} content={children} /> diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index 8689dbe23..014a9a8d5 100644 --- a/app/javascript/mastodon/is_mobile.js +++ b/app/javascript/mastodon/is_mobile.js @@ -2,9 +2,9 @@ const LAYOUT_BREAKPOINT = 1024; export function isMobile(width, columns) { switch (columns) { - case "multiple": + case 'multiple': return false; - case "single": + case 'single': return true; default: return width <= LAYOUT_BREAKPOINT; diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js index ddad7a4fc..9a15a1fe3 100644 --- a/app/javascript/mastodon/reducers/settings.js +++ b/app/javascript/mastodon/reducers/settings.js @@ -6,6 +6,7 @@ import uuid from '../uuid'; const initialState = Immutable.Map({ onboarded: false, + layout: 'auto', home: Immutable.Map({ shows: Immutable.Map({ |