me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use Redux store to keep track of layout

Browse source
This commit is contained in:
kibigo! 2017-06-24 17:07:25 -07:00
parent b01b111ca1
commit b4b03c99f1
4 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/mastodon/containers/mastodon.js
View file

@ -24,6 +24,7 @@ addLocaleData(localeData);
const store = configureStore(); const store = configureStore();
const initialState = JSON.parse(document.getElementById('initial-state').textContent); const initialState = JSON.parse(document.getElementById('initial-state').textContent);
if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout');
store.dispatch(hydrateStore(initialState)); store.dispatch(hydrateStore(initialState));
export default class Mastodon extends React.PureComponent { export default class Mastodon extends React.PureComponent {

31
app/javascript/mastodon/features/ui/index.js
View file

@ -74,21 +74,17 @@ class WrappedRoute extends React.Component {
} }
function columnClass(columns) { const mapStateToProps = state => ({
switch (columns) { layout: state.getIn(['settings', 'layout']),
case "auto": return "auto-columns"; });
case "single": return "single-column";
case "multiple": return "multi-columns";
default: return "auto-columns";
}
}
@connect() @connect(mapStateToProps)
export default class UI extends React.PureComponent { export default class UI extends React.PureComponent {
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
children: PropTypes.node, children: PropTypes.node,
layout: PropTypes.string,
}; };
state = { state = {
@ -184,15 +180,24 @@ export default class UI extends React.PureComponent {
} }
render () { render () {
const { width, draggingOver } = this.state; const { width, draggingOver, layout } = this.state;
const { children } = this.props; 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 ( return (
<div className={'ui ' + columnClass(columns)} ref={this.setRef}> <div className={'ui ' + columnsClass(layout)} ref={this.setRef}>
<TabsBar /> <TabsBar />
<ColumnsAreaContainer singleColumn={isMobile(width, columns)}> <ColumnsAreaContainer singleColumn={isMobile(width, layout)}>
<WrappedSwitch> <WrappedSwitch>
<Redirect from='/' to='/getting-started' exact /> <Redirect from='/' to='/getting-started' exact />
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} /> <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />

4
app/javascript/mastodon/is_mobile.js
View file

@ -2,9 +2,9 @@ const LAYOUT_BREAKPOINT = 1024;
export function isMobile(width, columns) { export function isMobile(width, columns) {
switch (columns) { switch (columns) {
case "multiple": case 'multiple':
return false; return false;
case "single": case 'single':
return true; return true;
default: default:
return width <= LAYOUT_BREAKPOINT; return width <= LAYOUT_BREAKPOINT;

1
app/javascript/mastodon/reducers/settings.js
View file

@ -6,6 +6,7 @@ import uuid from '../uuid';
const initialState = Immutable.Map({ const initialState = Immutable.Map({
onboarded: false, onboarded: false,
layout: 'auto',
home: Immutable.Map({ home: Immutable.Map({
shows: Immutable.Map({ shows: Immutable.Map({