1
0
mirror of https://github.com/hyperspacedev/hyperspace synced 2025-01-30 17:14:57 +01:00

adds masonry layout to local and public feeds

This commit is contained in:
Travis Kohlbeck 2019-12-21 18:10:24 -05:00
parent af4f6e1d53
commit 95e5849be8
4 changed files with 92 additions and 29 deletions

View File

@ -41,7 +41,8 @@
"dependencies": { "dependencies": {
"electron-notarize": "^0.1.1", "electron-notarize": "^0.1.1",
"electron-updater": "^4.1.2", "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", "main": "public/electron.js",
"scripts": { "scripts": {

View File

@ -15,11 +15,8 @@ import { Status } from "../types/Status";
import Mastodon, { StreamListener } from "megalodon"; import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack"; import { withSnackbar } from "notistack";
import Masonry from 'react-masonry-css' import Masonry from 'react-masonry-css'
import { getUserDefaultBool } from "../utilities/settings";
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
import {
getConfig,
getUserDefaultBool
} from "../utilities/settings";
interface IHomePageState { interface IHomePageState {
posts?: [Status]; posts?: [Status];
@ -214,8 +211,8 @@ class HomePage extends Component<any, IHomePageState> {
</div> </div>
); );
})} })}
</Masonry>) </Masonry>
: ( ) : (
<div> <div>
{this.state.posts.map((post: Status) => { {this.state.posts.map((post: Status) => {
return ( return (
@ -229,8 +226,7 @@ class HomePage extends Component<any, IHomePageState> {
); );
})} })}
</div> </div>
) )}
}
<br /> <br />
{this.state.viewDidLoad && !this.state.viewDidError ? ( {this.state.viewDidLoad && !this.state.viewDidError ? (
<div <div

View File

@ -14,6 +14,8 @@ import Post from "../components/Post";
import { Status } from "../types/Status"; import { Status } from "../types/Status";
import Mastodon, { StreamListener } from "megalodon"; import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack"; import { withSnackbar } from "notistack";
import Masonry from 'react-masonry-css';
import { getUserDefaultBool } from "../utilities/settings";
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
interface ILocalPageState { interface ILocalPageState {
@ -23,6 +25,7 @@ interface ILocalPageState {
viewDidLoad?: boolean; viewDidLoad?: boolean;
viewDidError?: boolean; viewDidError?: boolean;
viewDidErrorCode?: any; viewDidErrorCode?: any;
isMasonryLayout?: boolean;
} }
class LocalPage extends Component<any, ILocalPageState> { class LocalPage extends Component<any, ILocalPageState> {
@ -34,7 +37,8 @@ class LocalPage extends Component<any, ILocalPageState> {
this.state = { this.state = {
viewIsLoading: true, viewIsLoading: true,
backlogPosts: null backlogPosts: null,
isMasonryLayout: getUserDefaultBool('isMasonryLayout'),
}; };
this.client = new Mastodon( this.client = new Mastodon(
@ -186,15 +190,44 @@ class LocalPage extends Component<any, ILocalPageState> {
) : null} ) : null}
{this.state.posts ? ( {this.state.posts ? (
<div> <div>
{this.state.posts.map((post: Status) => { {this.state.isMasonryLayout ? (
return ( <Masonry
<Post breakpointCols={{
key={post.id} default: 4,
post={post} 2000: 3,
client={this.client} 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 /> <br />
{this.state.viewDidLoad && !this.state.viewDidError ? ( {this.state.viewDidLoad && !this.state.viewDidError ? (
<div <div

View File

@ -14,6 +14,8 @@ import Post from "../components/Post";
import { Status } from "../types/Status"; import { Status } from "../types/Status";
import Mastodon, { StreamListener } from "megalodon"; import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack"; import { withSnackbar } from "notistack";
import Masonry from 'react-masonry-css';
import { getUserDefaultBool } from "../utilities/settings";
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
interface IPublicPageState { interface IPublicPageState {
@ -23,6 +25,7 @@ interface IPublicPageState {
viewDidLoad?: boolean; viewDidLoad?: boolean;
viewDidError?: boolean; viewDidError?: boolean;
viewDidErrorCode?: any; viewDidErrorCode?: any;
isMasonryLayout?:boolean;
} }
class PublicPage extends Component<any, IPublicPageState> { class PublicPage extends Component<any, IPublicPageState> {
@ -34,7 +37,8 @@ class PublicPage extends Component<any, IPublicPageState> {
this.state = { this.state = {
viewIsLoading: true, viewIsLoading: true,
backlogPosts: null backlogPosts: null,
isMasonryLayout: getUserDefaultBool('isMasonryLayout')
}; };
this.client = new Mastodon( this.client = new Mastodon(
@ -185,15 +189,44 @@ class PublicPage extends Component<any, IPublicPageState> {
) : null} ) : null}
{this.state.posts ? ( {this.state.posts ? (
<div> <div>
{this.state.posts.map((post: Status) => { {this.state.isMasonryLayout ? (
return ( <Masonry
<Post breakpointCols={{
key={post.id} default: 4,
post={post} 2000: 3,
client={this.client} 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 /> <br />
{this.state.viewDidLoad && !this.state.viewDidError ? ( {this.state.viewDidLoad && !this.state.viewDidError ? (
<div <div