adds settings option for masonry layout

This commit is contained in:
Travis Kohlbeck 2019-12-21 17:57:26 -05:00
parent e178a01fff
commit af4f6e1d53
3 changed files with 79 additions and 26 deletions

View File

@ -16,6 +16,10 @@ import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack";
import Masonry from 'react-masonry-css'
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
import {
getConfig,
getUserDefaultBool
} from "../utilities/settings";
interface IHomePageState {
posts?: [Status];
@ -24,6 +28,7 @@ interface IHomePageState {
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
isMasonryLayout?: boolean;
}
class HomePage extends Component<any, IHomePageState> {
@ -35,7 +40,8 @@ class HomePage extends Component<any, IHomePageState> {
this.state = {
viewIsLoading: true,
backlogPosts: null
backlogPosts: null,
isMasonryLayout: getUserDefaultBool('isMasonryLayout')
};
this.client = new Mastodon(
@ -186,28 +192,45 @@ class HomePage extends Component<any, IHomePageState> {
) : null}
{this.state.posts ? (
<div>
<Masonry
breakpointCols={{
default: 4,
2000: 3,
1400: 2,
1050: 1,
}}
className={classes.masonryGrid}
columnClassName={classes['my-masonry-grid_column']}
>
{this.state.posts.map((post: Status) => {
return (
<div className={classes.masonryGrid_item}>
<Post
key={post.id}
post={post}
client={this.client}
/>
</div>
);
})}
</Masonry>
{this.state.isMasonryLayout ? (
<Masonry
breakpointCols={{
default: 4,
2000: 3,
1400: 2,
1050: 1,
}}
className={classes.masonryGrid}
columnClassName={classes['my-masonry-grid_column']}
>
{this.state.posts.map((post: Status) => {
return (
<div className={classes.masonryGrid_item}>
<Post
key={post.id}
post={post}
client={this.client}
/>
</div>
);
})}
</Masonry>)
: (
<div>
{this.state.posts.map((post: Status) => {
return (
<div className={classes.masonryGrid_item}>
<Post
key={post.id}
post={post}
client={this.client}
/>
</div>
);
})}
</div>
)
}
<br />
{this.state.viewDidLoad && !this.state.viewDidError ? (
<div

View File

@ -64,6 +64,7 @@ import UndoIcon from "@material-ui/icons/Undo";
import DomainDisabledIcon from "@material-ui/icons/DomainDisabled";
import AccountSettingsIcon from "mdi-material-ui/AccountSettings";
import AlphabeticalVariantOffIcon from "mdi-material-ui/AlphabeticalVariantOff";
import DashboardIcon from '@material-ui/icons/Dashboard'
import { Config } from "../types/Config";
import { Account } from "../types/Account";
@ -86,6 +87,7 @@ interface ISettingsState {
federated: boolean;
currentUser?: Account;
imposeCharacterLimit: boolean;
masonryLayout?: boolean;
}
class SettingsPage extends Component<any, ISettingsState> {
@ -117,7 +119,8 @@ class SettingsPage extends Component<any, ISettingsState> {
defaultVisibility: getUserDefaultVisibility() || "public",
brandName: "Hyperspace",
federated: true,
imposeCharacterLimit: getUserDefaultBool("imposeCharacterLimit")
imposeCharacterLimit: getUserDefaultBool("imposeCharacterLimit"),
masonryLayout: getUserDefaultBool("isMasonryLayout"),
};
this.toggleDarkMode = this.toggleDarkMode.bind(this);
@ -126,6 +129,7 @@ class SettingsPage extends Component<any, ISettingsState> {
this.toggleBadgeCount = this.toggleBadgeCount.bind(this);
this.toggleThemeDialog = this.toggleThemeDialog.bind(this);
this.toggleVisibilityDialog = this.toggleVisibilityDialog.bind(this);
this.toggleMasonryLayout = this.toggleMasonryLayout.bind(this)
this.changeThemeName = this.changeThemeName.bind(this);
this.changeTheme = this.changeTheme.bind(this);
this.setVisibility = this.setVisibility.bind(this);
@ -241,6 +245,14 @@ class SettingsPage extends Component<any, ISettingsState> {
this.setState({ resetSettingsDialog: !this.state.resetSettingsDialog });
}
toggleMasonryLayout() {
this.setState({ masonryLayout: !this.state.masonryLayout })
setUserDefaultBool(
"isMasonryLayout",
!this.state.masonryLayout
)
}
changeTheme() {
setUserDefaultTheme(this.state.selectThemeName);
window.location.reload();
@ -650,6 +662,22 @@ class SettingsPage extends Component<any, ISettingsState> {
</Button>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<DashboardIcon color="action" />
</ListItemAvatar>
<ListItemText
primary="Masonry layout"
secondary="Shows additional columns of posts on wider screens"
/>
<ListItemSecondaryAction>
<Switch
checked={this.state.masonryLayout}
onChange={this.toggleMasonryLayout}
/>
</ListItemSecondaryAction>
</ListItem>
</List>
</Paper>
<br />

View File

@ -101,7 +101,8 @@ export function createUserDefaults() {
clearNotificationsOnRead: false,
displayAllOnNotificationBadge: false,
defaultVisibility: "public",
imposeCharacterLimit: true
imposeCharacterLimit: true,
isMasonryLayout: false,
};
let settings = [
@ -110,7 +111,8 @@ export function createUserDefaults() {
"clearNotificationsOnRead",
"displayAllOnNotificationBadge",
"defaultVisibility",
"imposeCharacterLimit"
"imposeCharacterLimit",
"isMasonryLayout",
];
migrateExistingSettings();