Mastodon/hyperspace-desktop-client-windows-linux-macos
1
0
Fork 0
mirror of https://github.com/hyperspacedev/hyperspace synced 2025-01-31 01:29:37 +01:00
Code Issues Releases Wiki Activity

Create basic UI

Browse Source
This commit is contained in:
Marquis Kurt 2019-04-27 15:00:01 -04:00
parent 041be26533
commit aca4af53ea
2 changed files with 75 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/PageLayout.styles.tsx
View File

@ -174,5 +174,12 @@ export const styles = (theme: Theme) => createStyles({
'& a': {
color: theme.palette.primary.light
}
}
},
youHeadingAvatar: {
height: 88,
width: 88
},
youPaper: {
padding: theme.spacing.unit * 2,
},
});

70
src/pages/You.tsx
View File

@ -1,18 +1,82 @@
import React, {Component} from 'react';
import {withStyles, Typography, Paper, Avatar, Button, TextField} from '@material-ui/core';
import {withStyles, Typography, Paper, Avatar, Button, TextField, ListItem, ListItemText, ListItemAvatar, List, Grid} from '@material-ui/core';
import {withSnackbar, withSnackbarProps} from 'notistack';
import {styles} from './PageLayout.styles';
import { Account } from '../types/Account';
import Mastodon from 'megalodon';
interface IYouProps extends withSnackbarProps {
classes: any;
}
class You extends Component<IYouProps, any> {
interface IYouState {
currentAccount: Account;
newProfile?: any;
newHeader?: any;
newDisplayName?: string;
newBio?: string;
}
class You extends Component<IYouProps, IYouState> {
client: Mastodon;
constructor(props: any) {
super(props);
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
this.state = {
currentAccount: this.getAccount()
}
}
getAccount() {
let acct = localStorage.getItem('account');
if (acct) {
return JSON.parse(acct);
}
}
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutConstraints}>
<div className={classes.pageListConstraints}>
<Paper>
<List>
<ListItem>
<ListItemAvatar>
<Avatar className={classes.youHeadingAvatar} src={this.state.currentAccount.avatar_static} alt={this.state.currentAccount.acct}/>
</ListItemAvatar>
<ListItemText primary={
<Typography variant="h5" component="h1"><b>{this.state.currentAccount.display_name || this.state.currentAccount.username} (you)</b></Typography>
} secondary={<Typography variant="h6" color="textSecondary" component="p">{"@" + this.state.currentAccount.acct}</Typography>}/>
</ListItem>
</List>
</Paper>
<br/>
<Paper className={classes.youPaper}>
<Typography variant="h6" component="h2">Update your profile images</Typography>
<br/>
<Grid container spacing={16}>
<Grid xs={12} md={6}>
<Typography>Wut</Typography>
</Grid>
<Grid xs={12} md={6}>
<Typography>Wut</Typography>
</Grid>
</Grid>
</Paper>
<br/>
<Paper className={classes.youPaper}>
<Typography variant="h6" component="h2">Change your display name</Typography>
</Paper>
<br/>
<Paper className={classes.youPaper}>
<Typography variant="h6" component="h2">Edit your bio</Typography>
</Paper>
</div>
</div>
);
}