Mastodon
/
hyperspace-desktop-client-windows-linux-macos
mirror of https://github.com/hyperspacedev/hyperspace
1
0
Fork 0
Code Issues Releases Wiki Activity

Iconify Activity, Messages, Notifications, and Recommendations

This commit is contained in:
Marquis Kurt 2019-11-21 10:50:10 -05:00
parent f36000a939
commit 7a977aeddd
No known key found for this signature in database
GPG Key ID: 725636D259F5402D
6 changed files with 161 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
package-lock.json generated
View File

@ -9461,9 +9461,9 @@
"dev": true "dev": true
}, },
"handlebars": { "handlebars": {
"version": "4.4.0", "version": "4.5.3",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
"integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==", "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
"dev": true, "dev": true,
"requires": { "requires": {
"neo-async": "^2.6.0", "neo-async": "^2.6.0",
@ -10448,9 +10448,9 @@
} }
}, },
"invert-kv": { "invert-kv": {
"version": "1.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
"dev": true "dev": true
}, },
"ip": { "ip": {
@ -11848,12 +11848,12 @@
"integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q==" "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
}, },
"lcid": { "lcid": {
"version": "1.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
"integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
"dev": true, "dev": true,
"requires": { "requires": {
"invert-kv": "^1.0.0" "invert-kv": "^2.0.0"
} }
}, },
"left-pad": { "left-pad": {
@ -12275,12 +12275,22 @@
} }
}, },
"mem": { "mem": {
"version": "1.1.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz", "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
"integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=", "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
"dev": true, "dev": true,
"requires": { "requires": {
"mimic-fn": "^1.0.0" "map-age-cleaner": "^0.1.1",
"mimic-fn": "^2.0.0",
"p-is-promise": "^2.0.0"
},
"dependencies": {
"mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true
}
} }
}, },
"memory-fs": { "memory-fs": {
@ -13246,14 +13256,40 @@
"dev": true "dev": true
}, },
"os-locale": { "os-locale": {
"version": "2.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz", "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
"integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==", "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"execa": "^0.7.0", "execa": "^1.0.0",
"lcid": "^1.0.0", "lcid": "^2.0.0",
"mem": "^1.1.0" "mem": "^4.0.0"
},
"dependencies": {
"execa": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
"dev": true,
"requires": {
"cross-spawn": "^6.0.0",
"get-stream": "^4.0.0",
"is-stream": "^1.1.0",
"npm-run-path": "^2.0.0",
"p-finally": "^1.0.0",
"signal-exit": "^3.0.0",
"strip-eof": "^1.0.0"
}
},
"get-stream": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
"dev": true,
"requires": {
"pump": "^3.0.0"
}
}
} }
}, },
"os-tmpdir": { "os-tmpdir": {
@ -21435,16 +21471,16 @@
"dev": true "dev": true
}, },
"yargs": { "yargs": {
"version": "11.1.0", "version": "11.1.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.1.tgz",
"integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "integrity": "sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==",
"dev": true, "dev": true,
"requires": { "requires": {
"cliui": "^4.0.0", "cliui": "^4.0.0",
"decamelize": "^1.1.1", "decamelize": "^1.1.1",
"find-up": "^2.1.0", "find-up": "^2.1.0",
"get-caller-file": "^1.0.1", "get-caller-file": "^1.0.1",
"os-locale": "^2.0.0", "os-locale": "^3.1.0",
"require-directory": "^2.1.1", "require-directory": "^2.1.1",
"require-main-filename": "^1.0.1", "require-main-filename": "^1.0.1",
"set-blocking": "^2.0.0", "set-blocking": "^2.0.0",

7
src/components/AppLayout/AppLayout.tsx
View File

@ -43,6 +43,7 @@ import CreateIcon from "@material-ui/icons/Create";
import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle"; import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle";
import ExitToAppIcon from "@material-ui/icons/ExitToApp"; import ExitToAppIcon from "@material-ui/icons/ExitToApp";
import TrendingUpIcon from "@material-ui/icons/TrendingUp"; import TrendingUpIcon from "@material-ui/icons/TrendingUp";
import BuildIcon from "@material-ui/icons/Build";
import { styles } from "./AppLayout.styles"; import { styles } from "./AppLayout.styles";
import { MultiAccount, UAccount } from "../../types/Account"; import { MultiAccount, UAccount } from "../../types/Account";
@ -295,7 +296,11 @@ export class AppLayout extends Component<any, IAppLayoutState> {
return ( return (
<div className={classes.titleBarRoot}> <div className={classes.titleBarRoot}>
<Typography className={classes.titleBarText}> <Typography className={classes.titleBarText}>
🛠 Careful: you're running in developer mode. <BuildIcon
color="inherit"
style={{ fontSize: "1em", verticalAlign: "middle" }}
/>{" "}
Careful: you're running in developer mode.
</Typography> </Typography>
</div> </div>
); );

2
src/pages/Activity.tsx
View File

@ -131,7 +131,7 @@ class ActivityPage extends Component<any, IActivityPageState> {
textAlign: "center" textAlign: "center"
}} }}
> >
<FireplaceIcon style={{ fontSize: 64 }} /> <FireplaceIcon style={{ fontSize: 64 }} color="action"/>
<Typography variant="h6"> <Typography variant="h6">
Hey there,{" "} Hey there,{" "}
{this.state.user {this.state.user

129
src/pages/Messages.tsx
View File

@ -10,10 +10,12 @@ import {
ListItemAvatar, ListItemAvatar,
Avatar, Avatar,
ListItemSecondaryAction, ListItemSecondaryAction,
Tooltip Tooltip,
Typography
} from "@material-ui/core"; } from "@material-ui/core";
import PersonIcon from "@material-ui/icons/Person"; import PersonIcon from "@material-ui/icons/Person";
import ForumIcon from "@material-ui/icons/Forum"; import ForumIcon from "@material-ui/icons/Forum";
import MailIcon from "@material-ui/icons/Mail";
import { styles } from "./PageLayout.styles"; import { styles } from "./PageLayout.styles";
import Mastodon from "megalodon"; import Mastodon from "megalodon";
import { Status } from "../types/Status"; import { Status } from "../types/Status";
@ -70,67 +72,82 @@ class MessagesPage extends Component<any, IMessagesState> {
return innerContent; return innerContent;
} }
renderMessage(message: Status) {
return (
<ListItem>
<ListItemAvatar>
<LinkableAvatar
to={`/profile/${message.account.id}`}
alt={message.account.username}
src={message.account.avatar_static}
>
<PersonIcon />
</LinkableAvatar>
</ListItemAvatar>
<ListItemText
primary={
message.account.display_name ||
"@" + message.account.acct
}
secondary={this.removeHTMLContent(message.content)}
/>
<ListItemSecondaryAction>
<Tooltip title="View conversation">
<LinkableIconButton to={`/conversation/${message.id}`}>
<ForumIcon />
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
}
render() { render() {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<div className={classes.pageLayoutConstraints}> <div className={classes.pageLayoutConstraints}>
{this.state.viewDidLoad ? ( {this.state.viewDidLoad ? (
<div className={classes.pageListContsraints}> <div className={classes.pageListContsraints}>
<ListSubheader>Recent messages</ListSubheader> {this.state.posts && this.state.posts.length > 0 ? (
<Paper className={classes.pageListConstraints}> <div>
<List> <ListSubheader>Recent messages</ListSubheader>
{this.state.posts <Paper className={classes.pageListConstraints}>
? this.state.posts.map( <List>
(message: Status) => { {this.state.posts
return ( ? this.state.posts.map(
<ListItem> (message: Status) =>
<ListItemAvatar> this.renderMessage(
<LinkableAvatar message
to={`/profile/${message.account.id}`} )
alt={ )
message : null}
.account </List>
.username </Paper>
} <br />
src={ </div>
message ) : (
.account <div>
.avatar_static <div
} className={
> classes.pageLayoutEmptyTextConstraints
<PersonIcon /> }
</LinkableAvatar> style={{ textAlign: "center" }}
</ListItemAvatar> >
<ListItemText <MailIcon
primary={ color="action"
message.account style={{ fontSize: 48 }}
.display_name || />
"@" + <Typography variant="h6">
message You don't have any messages.
.account </Typography>
.acct <Typography paragraph>
} Why not interact with the fediverse a
secondary={this.removeHTMLContent( bit by sending a message?
message.content </Typography>
)} <br />
/> </div>
<ListItemSecondaryAction> </div>
<Tooltip title="View conversation"> )}
<LinkableIconButton
to={`/conversation/${message.id}`}
>
<ForumIcon />
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
}
)
: null}
</List>
</Paper>
<br />
</div> </div>
) : null} ) : null}
{this.state.viewIsLoading ? ( {this.state.viewIsLoading ? (

15
src/pages/Notifications.tsx
View File

@ -19,6 +19,7 @@ import {
DialogActions, DialogActions,
Tooltip Tooltip
} from "@material-ui/core"; } from "@material-ui/core";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd"; import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import PersonIcon from "@material-ui/icons/Person"; import PersonIcon from "@material-ui/icons/Person";
import PersonAddIcon from "@material-ui/icons/PersonAdd"; import PersonAddIcon from "@material-ui/icons/PersonAdd";
@ -27,6 +28,8 @@ import { styles } from "./PageLayout.styles";
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides"; import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
import ForumIcon from "@material-ui/icons/Forum"; import ForumIcon from "@material-ui/icons/Forum";
import ReplyIcon from "@material-ui/icons/Reply"; import ReplyIcon from "@material-ui/icons/Reply";
import NotificationsIcon from "@material-ui/icons/Notifications";
import Mastodon from "megalodon"; import Mastodon from "megalodon";
import { Notification } from "../types/Notification"; import { Notification } from "../types/Notification";
import { Account } from "../types/Account"; import { Account } from "../types/Account";
@ -337,12 +340,20 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
</Paper> </Paper>
</div> </div>
) : ( ) : (
<div className={classes.pageLayoutEmptyTextConstraints}> <div
<Typography variant="h4">All clear!</Typography> className={classes.pageLayoutEmptyTextConstraints}
style={{ textAlign: "center" }}
>
<NotificationsIcon
color="action"
style={{ fontSize: 48 }}
/>
<Typography variant="h6">All clear!</Typography>
<Typography paragraph> <Typography paragraph>
It looks like you have no notifications. Why not It looks like you have no notifications. Why not
get the conversation going with a new post? get the conversation going with a new post?
</Typography> </Typography>
<br />
</div> </div>
) )
) : null} ) : null}

9
src/pages/Recommendations.tsx
View File

@ -21,6 +21,7 @@ import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd"; import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import PersonAddIcon from "@material-ui/icons/PersonAdd"; import PersonAddIcon from "@material-ui/icons/PersonAdd";
import { withSnackbar, withSnackbarProps } from "notistack"; import { withSnackbar, withSnackbarProps } from "notistack";
import GroupIcon from "@material-ui/icons/Group";
interface IRecommendationsPageProps extends withSnackbarProps { interface IRecommendationsPageProps extends withSnackbarProps {
classes: any; classes: any;
@ -179,14 +180,20 @@ class RecommendationsPage extends Component<
className={ className={
classes.pageLayoutEmptyTextConstraints classes.pageLayoutEmptyTextConstraints
} }
style={{ textAlign: "center" }}
> >
<Typography variant="h5"> <GroupIcon
color="action"
style={{ fontSize: 48 }}
/>
<Typography variant="h6">
We don't have any suggestions for you. We don't have any suggestions for you.
</Typography> </Typography>
<Typography paragraph> <Typography paragraph>
Why not interact with the fediverse a bit by Why not interact with the fediverse a bit by
creating a new post? creating a new post?
</Typography> </Typography>
<br />
</div> </div>
)} )}
<br /> <br />