Iconify Activity, Messages, Notifications, and Recommendations
This commit is contained in:
Marquis Kurt
parent
f36000a939
commit
7a977aeddd
|
|
@ -9461,9 +9461,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"handlebars": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz",
|
||||
"integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==",
|
||||
"version": "4.5.3",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
|
||||
"integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"neo-async": "^2.6.0",
|
||||
|
|
@ -10448,9 +10448,9 @@
|
|||
}
|
||||
},
|
||||
"invert-kv": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
|
||||
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
|
||||
"integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
|
||||
"dev": true
|
||||
},
|
||||
"ip": {
|
||||
|
|
@ -11848,12 +11848,12 @@
|
|||
"integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
|
||||
},
|
||||
"lcid": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
|
||||
"integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
|
||||
"integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"invert-kv": "^1.0.0"
|
||||
"invert-kv": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"left-pad": {
|
||||
|
|
@ -12275,12 +12275,22 @@
|
|||
}
|
||||
},
|
||||
"mem": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
|
||||
"integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
|
||||
"integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
|
||||
"dev": true,
|
||||
"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": {
|
||||
|
|
@ -13246,14 +13256,40 @@
|
|||
"dev": true
|
||||
},
|
||||
"os-locale": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
|
||||
"integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
|
||||
"integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"execa": "^0.7.0",
|
||||
"lcid": "^1.0.0",
|
||||
"mem": "^1.1.0"
|
||||
"execa": "^1.0.0",
|
||||
"lcid": "^2.0.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": {
|
||||
|
|
@ -21435,16 +21471,16 @@
|
|||
"dev": true
|
||||
},
|
||||
"yargs": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
|
||||
"integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
|
||||
"version": "11.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.1.tgz",
|
||||
"integrity": "sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cliui": "^4.0.0",
|
||||
"decamelize": "^1.1.1",
|
||||
"find-up": "^2.1.0",
|
||||
"get-caller-file": "^1.0.1",
|
||||
"os-locale": "^2.0.0",
|
||||
"os-locale": "^3.1.0",
|
||||
"require-directory": "^2.1.1",
|
||||
"require-main-filename": "^1.0.1",
|
||||
"set-blocking": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ import CreateIcon from "@material-ui/icons/Create";
|
|||
import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle";
|
||||
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
|
||||
import TrendingUpIcon from "@material-ui/icons/TrendingUp";
|
||||
import BuildIcon from "@material-ui/icons/Build";
|
||||
|
||||
import { styles } from "./AppLayout.styles";
|
||||
import { MultiAccount, UAccount } from "../../types/Account";
|
||||
|
|
@ -295,7 +296,11 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
return (
|
||||
<div className={classes.titleBarRoot}>
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ class ActivityPage extends Component<any, IActivityPageState> {
|
|||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
<FireplaceIcon style={{ fontSize: 64 }} />
|
||||
<FireplaceIcon style={{ fontSize: 64 }} color="action"/>
|
||||
<Typography variant="h6">
|
||||
Hey there,{" "}
|
||||
{this.state.user
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@ import {
|
|||
ListItemAvatar,
|
||||
Avatar,
|
||||
ListItemSecondaryAction,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@material-ui/core";
|
||||
import PersonIcon from "@material-ui/icons/Person";
|
||||
import ForumIcon from "@material-ui/icons/Forum";
|
||||
import MailIcon from "@material-ui/icons/Mail";
|
||||
import { styles } from "./PageLayout.styles";
|
||||
import Mastodon from "megalodon";
|
||||
import { Status } from "../types/Status";
|
||||
|
|
@ -70,67 +72,82 @@ class MessagesPage extends Component<any, IMessagesState> {
|
|||
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() {
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.pageLayoutConstraints}>
|
||||
{this.state.viewDidLoad ? (
|
||||
<div className={classes.pageListContsraints}>
|
||||
<ListSubheader>Recent messages</ListSubheader>
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
{this.state.posts
|
||||
? this.state.posts.map(
|
||||
(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>
|
||||
);
|
||||
}
|
||||
)
|
||||
: null}
|
||||
</List>
|
||||
</Paper>
|
||||
<br />
|
||||
{this.state.posts && this.state.posts.length > 0 ? (
|
||||
<div>
|
||||
<ListSubheader>Recent messages</ListSubheader>
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
{this.state.posts
|
||||
? this.state.posts.map(
|
||||
(message: Status) =>
|
||||
this.renderMessage(
|
||||
message
|
||||
)
|
||||
)
|
||||
: null}
|
||||
</List>
|
||||
</Paper>
|
||||
<br />
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div
|
||||
className={
|
||||
classes.pageLayoutEmptyTextConstraints
|
||||
}
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
<MailIcon
|
||||
color="action"
|
||||
style={{ fontSize: 48 }}
|
||||
/>
|
||||
<Typography variant="h6">
|
||||
You don't have any messages.
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Why not interact with the fediverse a
|
||||
bit by sending a message?
|
||||
</Typography>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
{this.state.viewIsLoading ? (
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import {
|
|||
DialogActions,
|
||||
Tooltip
|
||||
} from "@material-ui/core";
|
||||
|
||||
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
|
||||
import PersonIcon from "@material-ui/icons/Person";
|
||||
import PersonAddIcon from "@material-ui/icons/PersonAdd";
|
||||
|
|
@ -27,6 +28,8 @@ import { styles } from "./PageLayout.styles";
|
|||
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
|
||||
import ForumIcon from "@material-ui/icons/Forum";
|
||||
import ReplyIcon from "@material-ui/icons/Reply";
|
||||
import NotificationsIcon from "@material-ui/icons/Notifications";
|
||||
|
||||
import Mastodon from "megalodon";
|
||||
import { Notification } from "../types/Notification";
|
||||
import { Account } from "../types/Account";
|
||||
|
|
@ -337,12 +340,20 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
|
|||
</Paper>
|
||||
</div>
|
||||
) : (
|
||||
<div className={classes.pageLayoutEmptyTextConstraints}>
|
||||
<Typography variant="h4">All clear!</Typography>
|
||||
<div
|
||||
className={classes.pageLayoutEmptyTextConstraints}
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
<NotificationsIcon
|
||||
color="action"
|
||||
style={{ fontSize: 48 }}
|
||||
/>
|
||||
<Typography variant="h6">All clear!</Typography>
|
||||
<Typography paragraph>
|
||||
It looks like you have no notifications. Why not
|
||||
get the conversation going with a new post?
|
||||
</Typography>
|
||||
<br />
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
|
|||
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
|
||||
import PersonAddIcon from "@material-ui/icons/PersonAdd";
|
||||
import { withSnackbar, withSnackbarProps } from "notistack";
|
||||
import GroupIcon from "@material-ui/icons/Group";
|
||||
|
||||
interface IRecommendationsPageProps extends withSnackbarProps {
|
||||
classes: any;
|
||||
|
|
@ -179,14 +180,20 @@ class RecommendationsPage extends Component<
|
|||
className={
|
||||
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.
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Why not interact with the fediverse a bit by
|
||||
creating a new post?
|
||||
</Typography>
|
||||
<br />
|
||||
</div>
|
||||
)}
|
||||
<br />
|
||||
|
|
|
|||
Loading…
Reference in New Issue