Make all avatars clickable and change profile button to new icon
This commit is contained in:
parent
5ae9f688e7
commit
4db838590d
|
@ -18,6 +18,7 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNew';
|
||||||
import DomainIcon from '@material-ui/icons/Domain';
|
import DomainIcon from '@material-ui/icons/Domain';
|
||||||
import ChatIcon from '@material-ui/icons/Chat';
|
import ChatIcon from '@material-ui/icons/Chat';
|
||||||
import PersonIcon from '@material-ui/icons/Person';
|
import PersonIcon from '@material-ui/icons/Person';
|
||||||
|
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||||
import NetworkCheckIcon from '@material-ui/icons/NetworkCheck';
|
import NetworkCheckIcon from '@material-ui/icons/NetworkCheck';
|
||||||
import UpdateIcon from '@material-ui/icons/Update';
|
import UpdateIcon from '@material-ui/icons/Update';
|
||||||
import InfoIcon from '@material-ui/icons/Info';
|
import InfoIcon from '@material-ui/icons/Info';
|
||||||
|
@ -25,7 +26,7 @@ import NotesIcon from '@material-ui/icons/Notes';
|
||||||
import CodeIcon from '@material-ui/icons/Code';
|
import CodeIcon from '@material-ui/icons/Code';
|
||||||
import {styles} from './PageLayout.styles';
|
import {styles} from './PageLayout.styles';
|
||||||
import {Instance} from '../types/Instance';
|
import {Instance} from '../types/Instance';
|
||||||
import {LinkableIconButton} from '../interfaces/overrides';
|
import {LinkableIconButton, LinkableAvatar} from '../interfaces/overrides';
|
||||||
import Mastodon from 'megalodon';
|
import Mastodon from 'megalodon';
|
||||||
import { UAccount } from '../types/Account';
|
import { UAccount } from '../types/Account';
|
||||||
import { getConfig } from '../utilities/settings';
|
import { getConfig } from '../utilities/settings';
|
||||||
|
@ -114,7 +115,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar alt="Instance admin" src={this.state.instance? this.state.instance.contact_account.avatar_static: ""}/>
|
<LinkableAvatar to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`} alt="Instance admin" src={this.state.instance? this.state.instance.contact_account.avatar_static: ""}/>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText primary="Instance admin" secondary={
|
<ListItemText primary="Instance admin" secondary={
|
||||||
this.state.instance ? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`:
|
this.state.instance ? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`:
|
||||||
|
@ -128,7 +129,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="View profile">
|
<Tooltip title="View profile">
|
||||||
<LinkableIconButton to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`}>
|
<LinkableIconButton to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`}>
|
||||||
<PersonIcon/>
|
<AssignmentIndIcon/>
|
||||||
</LinkableIconButton>
|
</LinkableIconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</ListItemSecondaryAction>
|
</ListItemSecondaryAction>
|
||||||
|
@ -193,9 +194,9 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
<List>
|
<List>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar src={this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.avatar_static: ""}>
|
<LinkableAvatar to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`} src={this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.avatar_static: ""}>
|
||||||
<PersonIcon/>
|
<PersonIcon/>
|
||||||
</Avatar>
|
</LinkableAvatar>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText primary="App provider" secondary={this.state.hyperspaceAdmin && this.state.hyperspaceAdminName? (this.state.hyperspaceAdminName || this.state.hyperspaceAdmin.display_name || "@" + this.state.hyperspaceAdmin.acct): "No provider set in config"}/>
|
<ListItemText primary="App provider" secondary={this.state.hyperspaceAdmin && this.state.hyperspaceAdminName? (this.state.hyperspaceAdminName || this.state.hyperspaceAdmin.display_name || "@" + this.state.hyperspaceAdmin.acct): "No provider set in config"}/>
|
||||||
<ListItemSecondaryAction>
|
<ListItemSecondaryAction>
|
||||||
|
@ -206,7 +207,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="View profile">
|
<Tooltip title="View profile">
|
||||||
<LinkableIconButton to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`}>
|
<LinkableIconButton to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`}>
|
||||||
<PersonIcon/>
|
<AssignmentIndIcon/>
|
||||||
</LinkableIconButton>
|
</LinkableIconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</ListItemSecondaryAction>
|
</ListItemSecondaryAction>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import ForumIcon from '@material-ui/icons/Forum';
|
||||||
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';
|
||||||
import { LinkableIconButton } from '../interfaces/overrides';
|
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
|
||||||
|
|
||||||
interface IMessagesState {
|
interface IMessagesState {
|
||||||
posts?: [Status];
|
posts?: [Status];
|
||||||
|
@ -73,9 +73,9 @@ class MessagesPage extends Component<any, IMessagesState> {
|
||||||
return (
|
return (
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar alt={message.account.username} src={message.account.avatar_static}>
|
<LinkableAvatar to={`/profile/${message.account.id}`} alt={message.account.username} src={message.account.avatar_static}>
|
||||||
<PersonIcon/>
|
<PersonIcon/>
|
||||||
</Avatar>
|
</LinkableAvatar>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText primary={message.account.display_name || "@" + message.account.acct} secondary={this.removeHTMLContent(message.content)}/>
|
<ListItemText primary={message.account.display_name || "@" + message.account.acct} secondary={this.removeHTMLContent(message.content)}/>
|
||||||
<ListItemSecondaryAction>
|
<ListItemSecondaryAction>
|
||||||
|
|
|
@ -3,8 +3,9 @@ import {withStyles, Typography, List, ListItem, Paper, ListItemText, Avatar, Lis
|
||||||
import {styles} from './PageLayout.styles';
|
import {styles} from './PageLayout.styles';
|
||||||
import Mastodon from 'megalodon';
|
import Mastodon from 'megalodon';
|
||||||
import {Account} from '../types/Account';
|
import {Account} from '../types/Account';
|
||||||
import { LinkableIconButton } from '../interfaces/overrides';
|
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
|
||||||
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
|
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
|
||||||
|
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||||
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
||||||
import CheckIcon from '@material-ui/icons/Check';
|
import CheckIcon from '@material-ui/icons/Check';
|
||||||
import CloseIcon from '@material-ui/icons/Close';
|
import CloseIcon from '@material-ui/icons/Close';
|
||||||
|
@ -120,7 +121,7 @@ class RecommendationsPage extends Component<IRecommendationsPageProps, IRecommen
|
||||||
return (
|
return (
|
||||||
<ListItem key={request.id}>
|
<ListItem key={request.id}>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar alt={request.username} src={request.avatar_static}/>
|
<LinkableAvatar to={`/profile/${request.id}`} alt={request.username} src={request.avatar_static}/>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText primary={request.display_name || request.acct} secondary={request.acct}/>
|
<ListItemText primary={request.display_name || request.acct} secondary={request.acct}/>
|
||||||
<ListItemSecondaryAction>
|
<ListItemSecondaryAction>
|
||||||
|
@ -164,20 +165,20 @@ class RecommendationsPage extends Component<IRecommendationsPageProps, IRecommen
|
||||||
return (
|
return (
|
||||||
<ListItem key={suggestion.id}>
|
<ListItem key={suggestion.id}>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar alt={suggestion.username} src={suggestion.avatar_static}/>
|
<LinkableAvatar to={`/profile/${suggestion.id}`} alt={suggestion.username} src={suggestion.avatar_static}/>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText primary={suggestion.display_name || suggestion.acct} secondary={suggestion.acct}/>
|
<ListItemText primary={suggestion.display_name || suggestion.acct} secondary={suggestion.acct}/>
|
||||||
<ListItemSecondaryAction>
|
<ListItemSecondaryAction>
|
||||||
|
<Tooltip title="View profile">
|
||||||
|
<LinkableIconButton to={`/profile/${suggestion.id}`}>
|
||||||
|
<AssignmentIndIcon/>
|
||||||
|
</LinkableIconButton>
|
||||||
|
</Tooltip>
|
||||||
<Tooltip title="Follow">
|
<Tooltip title="Follow">
|
||||||
<IconButton onClick={() => this.followMember(suggestion)}>
|
<IconButton onClick={() => this.followMember(suggestion)}>
|
||||||
<PersonAddIcon/>
|
<PersonAddIcon/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="View profile">
|
|
||||||
<LinkableIconButton to={`/profile/${suggestion.id}`}>
|
|
||||||
<AccountCircleIcon/>
|
|
||||||
</LinkableIconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</ListItemSecondaryAction>
|
</ListItemSecondaryAction>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
);
|
);
|
||||||
|
|
|
@ -10,11 +10,15 @@ import {
|
||||||
Paper,
|
Paper,
|
||||||
withStyles,
|
withStyles,
|
||||||
Typography,
|
Typography,
|
||||||
CircularProgress
|
CircularProgress,
|
||||||
|
Tooltip,
|
||||||
|
IconButton
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import PersonIcon from '@material-ui/icons/Person';
|
import PersonIcon from '@material-ui/icons/Person';
|
||||||
|
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||||
|
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
||||||
import {styles} from './PageLayout.styles';
|
import {styles} from './PageLayout.styles';
|
||||||
import {LinkableIconButton} from '../interfaces/overrides';
|
import {LinkableIconButton, LinkableAvatar} from '../interfaces/overrides';
|
||||||
import Mastodon from 'megalodon';
|
import Mastodon from 'megalodon';
|
||||||
import {parse as parseParams, ParsedQuery} from 'query-string';
|
import {parse as parseParams, ParsedQuery} from 'query-string';
|
||||||
import { Results } from '../types/Search';
|
import { Results } from '../types/Search';
|
||||||
|
@ -145,6 +149,16 @@ class SearchPage extends Component<any, ISearchPageState> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
followMemberFromQuery(acct: Account) {
|
||||||
|
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
|
||||||
|
client.post(`/accounts/${acct.id}/follow`).then((resp: any) => {
|
||||||
|
this.props.enqueueSnackbar('You are now following this account.');
|
||||||
|
}).catch((err: Error) => {
|
||||||
|
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, { variant: 'error' });
|
||||||
|
console.error(err.message);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
showAllAccountsFromQuery() {
|
showAllAccountsFromQuery() {
|
||||||
const { classes } = this.props;
|
const { classes } = this.props;
|
||||||
return (
|
return (
|
||||||
|
@ -158,13 +172,20 @@ class SearchPage extends Component<any, ISearchPageState> {
|
||||||
return (
|
return (
|
||||||
<ListItem key={acct.id}>
|
<ListItem key={acct.id}>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar alt={acct.username} src={acct.avatar_static}/>
|
<LinkableAvatar to={`/profile/${acct.id}`} alt={acct.username} src={acct.avatar_static}/>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText primary={acct.display_name || acct.acct} secondary={acct.acct}/>
|
<ListItemText primary={acct.display_name || acct.acct} secondary={acct.acct}/>
|
||||||
<ListItemSecondaryAction>
|
<ListItemSecondaryAction>
|
||||||
|
<Tooltip title="View profile">
|
||||||
<LinkableIconButton to={`/profile/${acct.id}`}>
|
<LinkableIconButton to={`/profile/${acct.id}`}>
|
||||||
<PersonIcon/>
|
<AssignmentIndIcon/>
|
||||||
</LinkableIconButton>
|
</LinkableIconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Follow">
|
||||||
|
<IconButton onClick={() => this.followMemberFromQuery(acct)}>
|
||||||
|
<PersonAddIcon/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
</ListItemSecondaryAction>
|
</ListItemSecondaryAction>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue