mirror of
https://github.com/glitch-soc/mastodon.git
synced 2024-11-28 19:10:22 -05:00
Use Redux store to keep track of layout
This commit is contained in:
parent
ceb545c080
commit
ddba5d3b8c
@ -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 {
|
||||||
|
@ -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} />
|
||||||
|
@ -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;
|
||||||
|
@ -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({
|
||||||
|
Loading…
Reference in New Issue
Block a user