Merge pull request #148 from hyperspacedev/HD-5-masonry-layout
HD-5 #done
This commit is contained in:
Marquis Kurt
GitHub
commit
860375d6fc
|
|
@ -41,7 +41,8 @@
|
|||
"dependencies": {
|
||||
"electron-notarize": "^0.1.1",
|
||||
"electron-updater": "^4.1.2",
|
||||
"electron-window-state": "^5.0.3"
|
||||
"electron-window-state": "^5.0.3",
|
||||
"react-masonry-css": "^1.0.14"
|
||||
},
|
||||
"main": "public/electron.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ import Post from "../components/Post";
|
|||
import { Status } from "../types/Status";
|
||||
import Mastodon, { StreamListener } from "megalodon";
|
||||
import { withSnackbar } from "notistack";
|
||||
import Masonry from 'react-masonry-css'
|
||||
import { getUserDefaultBool } from "../utilities/settings";
|
||||
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
||||
|
||||
interface IHomePageState {
|
||||
|
|
@ -23,6 +25,7 @@ interface IHomePageState {
|
|||
viewDidLoad?: boolean;
|
||||
viewDidError?: boolean;
|
||||
viewDidErrorCode?: any;
|
||||
isMasonryLayout?: boolean;
|
||||
}
|
||||
|
||||
class HomePage extends Component<any, IHomePageState> {
|
||||
|
|
@ -34,7 +37,8 @@ class HomePage extends Component<any, IHomePageState> {
|
|||
|
||||
this.state = {
|
||||
viewIsLoading: true,
|
||||
backlogPosts: null
|
||||
backlogPosts: null,
|
||||
isMasonryLayout: getUserDefaultBool('isMasonryLayout')
|
||||
};
|
||||
|
||||
this.client = new Mastodon(
|
||||
|
|
@ -154,9 +158,13 @@ class HomePage extends Component<any, IHomePageState> {
|
|||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
const containerClasses = `${classes.pageLayoutMaxConstraints}${
|
||||
this.state.isMasonryLayout
|
||||
? ' ' + classes.pageLayoutMasonry
|
||||
: ''
|
||||
}`;
|
||||
return (
|
||||
<div className={classes.pageLayoutMaxConstraints}>
|
||||
<div className={containerClasses}>
|
||||
{this.state.backlogPosts ? (
|
||||
<div className={classes.pageTopChipContainer}>
|
||||
<div className={classes.pageTopChips}>
|
||||
|
|
@ -185,15 +193,42 @@ class HomePage extends Component<any, IHomePageState> {
|
|||
) : null}
|
||||
{this.state.posts ? (
|
||||
<div>
|
||||
{this.state.posts.map((post: Status) => {
|
||||
return (
|
||||
<Post
|
||||
key={post.id}
|
||||
post={post}
|
||||
client={this.client}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{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 (
|
||||
<Post
|
||||
key={post.id}
|
||||
post={post}
|
||||
client={this.client}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<br />
|
||||
{this.state.viewDidLoad && !this.state.viewDidError ? (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ import Post from "../components/Post";
|
|||
import { Status } from "../types/Status";
|
||||
import Mastodon, { StreamListener } from "megalodon";
|
||||
import { withSnackbar } from "notistack";
|
||||
import Masonry from 'react-masonry-css';
|
||||
import { getUserDefaultBool } from "../utilities/settings";
|
||||
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
||||
|
||||
interface ILocalPageState {
|
||||
|
|
@ -23,6 +25,7 @@ interface ILocalPageState {
|
|||
viewDidLoad?: boolean;
|
||||
viewDidError?: boolean;
|
||||
viewDidErrorCode?: any;
|
||||
isMasonryLayout?: boolean;
|
||||
}
|
||||
|
||||
class LocalPage extends Component<any, ILocalPageState> {
|
||||
|
|
@ -34,7 +37,8 @@ class LocalPage extends Component<any, ILocalPageState> {
|
|||
|
||||
this.state = {
|
||||
viewIsLoading: true,
|
||||
backlogPosts: null
|
||||
backlogPosts: null,
|
||||
isMasonryLayout: getUserDefaultBool('isMasonryLayout'),
|
||||
};
|
||||
|
||||
this.client = new Mastodon(
|
||||
|
|
@ -186,15 +190,44 @@ class LocalPage extends Component<any, ILocalPageState> {
|
|||
) : null}
|
||||
{this.state.posts ? (
|
||||
<div>
|
||||
{this.state.posts.map((post: Status) => {
|
||||
return (
|
||||
<Post
|
||||
key={post.id}
|
||||
post={post}
|
||||
client={this.client}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Theme, createStyles } from "@material-ui/core";
|
||||
import { Theme, createStyles, FormHelperText } from "@material-ui/core";
|
||||
import { isDarwinApp } from "../utilities/desktop";
|
||||
import { isAppbarExpanded } from "../utilities/appbar";
|
||||
|
||||
|
|
@ -34,21 +34,21 @@ export const styles = (theme: Theme) =>
|
|||
marginTop: 88,
|
||||
padding: theme.spacing.unit * 3,
|
||||
paddingLeft: theme.spacing.unit * 16,
|
||||
paddingRight: theme.spacing.unit * 16
|
||||
paddingRight: theme.spacing.unit * 16,
|
||||
},
|
||||
[theme.breakpoints.up("lg")]: {
|
||||
marginLeft: 250,
|
||||
marginTop: 88,
|
||||
padding: theme.spacing.unit * 3,
|
||||
paddingLeft: theme.spacing.unit * 32,
|
||||
paddingRight: theme.spacing.unit * 32
|
||||
paddingRight: theme.spacing.unit * 32,
|
||||
},
|
||||
[theme.breakpoints.up("xl")]: {
|
||||
marginLeft: 250,
|
||||
marginTop: 88,
|
||||
padding: theme.spacing.unit * 3,
|
||||
paddingLeft: theme.spacing.unit * 40,
|
||||
paddingRight: theme.spacing.unit * 40
|
||||
paddingRight: theme.spacing.unit * 40,
|
||||
},
|
||||
backgroundColor: theme.palette.background.default,
|
||||
minHeight: isDarwinApp() ? "100vh" : "auto"
|
||||
|
|
@ -323,5 +323,16 @@ export const styles = (theme: Theme) =>
|
|||
display: "block"
|
||||
},
|
||||
backgroundColor: theme.palette.primary.main
|
||||
}
|
||||
},
|
||||
pageLayoutMasonry: {
|
||||
paddingLeft: theme.spacing.unit * 3,
|
||||
paddingRight: theme.spacing.unit * 3,
|
||||
},
|
||||
masonryGrid: {
|
||||
display: 'flex',
|
||||
width: 'auto',
|
||||
},
|
||||
'my-masonry-grid_column': { // non-standard name fixes react-masonry-css bug :shrug:
|
||||
padding: 5,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ import Post from "../components/Post";
|
|||
import { Status } from "../types/Status";
|
||||
import Mastodon, { StreamListener } from "megalodon";
|
||||
import { withSnackbar } from "notistack";
|
||||
import Masonry from 'react-masonry-css';
|
||||
import { getUserDefaultBool } from "../utilities/settings";
|
||||
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
||||
|
||||
interface IPublicPageState {
|
||||
|
|
@ -23,6 +25,7 @@ interface IPublicPageState {
|
|||
viewDidLoad?: boolean;
|
||||
viewDidError?: boolean;
|
||||
viewDidErrorCode?: any;
|
||||
isMasonryLayout?:boolean;
|
||||
}
|
||||
|
||||
class PublicPage extends Component<any, IPublicPageState> {
|
||||
|
|
@ -34,7 +37,8 @@ class PublicPage extends Component<any, IPublicPageState> {
|
|||
|
||||
this.state = {
|
||||
viewIsLoading: true,
|
||||
backlogPosts: null
|
||||
backlogPosts: null,
|
||||
isMasonryLayout: getUserDefaultBool('isMasonryLayout')
|
||||
};
|
||||
|
||||
this.client = new Mastodon(
|
||||
|
|
@ -185,15 +189,44 @@ class PublicPage extends Component<any, IPublicPageState> {
|
|||
) : null}
|
||||
{this.state.posts ? (
|
||||
<div>
|
||||
{this.state.posts.map((post: Status) => {
|
||||
return (
|
||||
<Post
|
||||
key={post.id}
|
||||
post={post}
|
||||
client={this.client}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{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
|
||||
|
|
|
|||
|
|
@ -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="Show more posts"
|
||||
secondary="Shows additional columns of posts on wider screens"
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
checked={this.state.masonryLayout}
|
||||
onChange={this.toggleMasonryLayout}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Paper>
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue