Pull latest changes from Beta 4
This commit is contained in:
Marquis Kurt
commit
9403cd14b2
|
|
@ -1,3 +1 @@
|
|||
* @alicerunsonfedora
|
||||
* @Nomad1556
|
||||
* @Bio-ico
|
||||
* @alicerunsonfedora @Nomad1556 @Bio-ico
|
||||
|
|
|
|||
|
|
@ -63,9 +63,9 @@ typings/
|
|||
# VSCode dirs
|
||||
.vscode/
|
||||
|
||||
# Signing certificates
|
||||
desktop/*.provisionprofile
|
||||
desktop/*.plist
|
||||
# Production dirs
|
||||
build/
|
||||
|
||||
# Prod dirs
|
||||
build/
|
||||
# Electron app files
|
||||
desktop/*.plist
|
||||
desktop/*.provisionprofile
|
||||
|
|
|
|||
|
|
@ -11875,6 +11875,11 @@
|
|||
"safe-buffer": "^5.1.2"
|
||||
}
|
||||
},
|
||||
"mdi-material-ui": {
|
||||
"version": "5.11.0",
|
||||
"resolved": "https://registry.npmjs.org/mdi-material-ui/-/mdi-material-ui-5.11.0.tgz",
|
||||
"integrity": "sha512-9fIvdiKCKAfBoW11LqZsgaxZtu9WCQEd8FL9/8ceLHvStSf+fZM6sC7exwXaXZmzfwtJMfN1KiMGsPBPSTQFQg=="
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
"emoji-mart": "^2.8.2",
|
||||
"file-dialog": "^0.0.7",
|
||||
"material-ui-pickers": "^2.2.4",
|
||||
"mdi-material-ui": "^5.11.0",
|
||||
"megalodon": "^0.6.3",
|
||||
"moment": "^2.24.0",
|
||||
"notistack": "^0.5.1",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.0.0beta2u3",
|
||||
"version": "1.0.0beta4",
|
||||
"location": "https://hyperspaceapp-next.herokuapp.com",
|
||||
"branding": {
|
||||
"name": "Hyperspace",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import WelcomePage from './pages/Welcome';
|
|||
import MessagesPage from './pages/Messages';
|
||||
import RecommendationsPage from './pages/Recommendations';
|
||||
import Missingno from './pages/Missingno';
|
||||
import You from './pages/You';
|
||||
import {withSnackbar} from 'notistack';
|
||||
import {PrivateRoute} from './interfaces/overrides';
|
||||
import { userLoggedIn } from './utilities/accounts';
|
||||
|
|
@ -60,6 +61,7 @@ class App extends Component<any, any> {
|
|||
<PrivateRoute path="/conversation/:conversationId" component={Conversation}/>
|
||||
<PrivateRoute path="/search" component={SearchPage}/>
|
||||
<PrivateRoute path="/settings" component={Settings}/>
|
||||
<PrivateRoute path="/you" component={You}/>
|
||||
<PrivateRoute path="/about" component={AboutPage}/>
|
||||
<PrivateRoute path="/compose" component={Composer}/>
|
||||
<PrivateRoute path="/recommended" component={RecommendationsPage}/>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@ export const styles = (theme: Theme) => createStyles({
|
|||
backgroundColor: theme.palette.primary.dark,
|
||||
textAlign: 'center',
|
||||
zIndex: 1000,
|
||||
verticalAlign: 'middle'
|
||||
verticalAlign: 'middle',
|
||||
WebkitUserSelect: 'none',
|
||||
WebkitAppRegion: "drag"
|
||||
},
|
||||
titleBarText: {
|
||||
color: theme.palette.common.white,
|
||||
|
|
@ -148,5 +150,5 @@ export const styles = (theme: Theme) => createStyles({
|
|||
bottom: theme.spacing.unit * 2,
|
||||
right: theme.spacing.unit * 2,
|
||||
zIndex: 50
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
@ -10,7 +10,7 @@ import PublicIcon from '@material-ui/icons/Public';
|
|||
import GroupIcon from '@material-ui/icons/Group';
|
||||
import SettingsIcon from '@material-ui/icons/Settings';
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
import CreateIcon from '@material-ui/icons/Create';
|
||||
//import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
|
||||
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
|
||||
import {styles} from './AppLayout.styles';
|
||||
|
|
@ -395,7 +395,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
</Dialog>
|
||||
<Tooltip title="Create a new post">
|
||||
<LinkableFab to="/compose" className={classes.composeButton} color="secondary" aria-label="Compose">
|
||||
<EditIcon/>
|
||||
<CreateIcon/>
|
||||
</LinkableFab>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,18 +12,23 @@ import {
|
|||
withStyles,
|
||||
Typography,
|
||||
Link,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
Button
|
||||
} from '@material-ui/core';
|
||||
|
||||
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
|
||||
import DomainIcon from '@material-ui/icons/Domain';
|
||||
import ChatIcon from '@material-ui/icons/Chat';
|
||||
import PersonIcon from '@material-ui/icons/Person';
|
||||
import AssignmentIcon from '@material-ui/icons/Assignment';
|
||||
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||
import NetworkCheckIcon from '@material-ui/icons/NetworkCheck';
|
||||
import UpdateIcon from '@material-ui/icons/Update';
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
import NotesIcon from '@material-ui/icons/Notes';
|
||||
import CodeIcon from '@material-ui/icons/Code';
|
||||
import TicketAccountIcon from 'mdi-material-ui/TicketAccount';
|
||||
import MastodonIcon from 'mdi-material-ui/Mastodon';
|
||||
|
||||
import {styles} from './PageLayout.styles';
|
||||
import {Instance} from '../types/Instance';
|
||||
import {LinkableIconButton, LinkableAvatar} from '../interfaces/overrides';
|
||||
|
|
@ -33,13 +38,14 @@ import { getConfig } from '../utilities/settings';
|
|||
import { License } from '../types/Config';
|
||||
|
||||
interface IAboutPageState {
|
||||
instance?: Instance | any;
|
||||
instance?: Instance;
|
||||
federated?: boolean;
|
||||
developer?: boolean;
|
||||
hyperspaceAdmin?: UAccount;
|
||||
hyperspaceAdminName?: string;
|
||||
versionNumber?: string;
|
||||
brandName?: string;
|
||||
brandBg?: string;
|
||||
license: License;
|
||||
repository?: string;
|
||||
}
|
||||
|
|
@ -64,14 +70,13 @@ class AboutPage extends Component<any, IAboutPageState> {
|
|||
componentWillMount() {
|
||||
this.client.get('/instance').then((resp: any) => {
|
||||
this.setState({
|
||||
instance: resp.data
|
||||
instance: resp.data as Instance
|
||||
})
|
||||
})
|
||||
|
||||
getConfig().then((config: any) => {
|
||||
this.client.get('/accounts/' + (config.admin? config.admin.account: "0")).then((resp: any) => {
|
||||
let account = resp.data;
|
||||
console.log(config);
|
||||
this.setState({
|
||||
hyperspaceAdmin: account,
|
||||
hyperspaceAdminName: config.admin.name,
|
||||
|
|
@ -79,6 +84,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
|||
developer: config.developer? config.developer === "true": false,
|
||||
versionNumber: config.version,
|
||||
brandName: config.branding? config.branding.name: "Hyperspace",
|
||||
brandBg: config.branding.background,
|
||||
license: {
|
||||
name: config.license.name,
|
||||
url: config.license.url
|
||||
|
|
@ -95,24 +101,19 @@ class AboutPage extends Component<any, IAboutPageState> {
|
|||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.pageLayoutConstraints}>
|
||||
<ListSubheader>About your instance</ListSubheader>
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<DomainIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Instance location (URL)" secondary={this.state.instance ? this.state.instance.uri: "Loading..."}/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="Open in browser">
|
||||
<IconButton href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer">
|
||||
<OpenInNewIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<Paper>
|
||||
<div
|
||||
className={classes.instanceHeaderPaper}
|
||||
style={{
|
||||
backgroundImage: `url("${this.state.instance && this.state.instance.thumbnail? this.state.instance.thumbnail: ""}")`
|
||||
}}
|
||||
>
|
||||
<IconButton className={classes.instanceToolbar} href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer" color="inherit">
|
||||
<OpenInNewIcon/>
|
||||
</IconButton>
|
||||
<Typography className={classes.instanceHeaderText} variant="h4" component="p">{this.state.instance ? this.state.instance.uri: "Loading..."}</Typography>
|
||||
</div>
|
||||
<List className={classes.pageListConstraints}>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<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: ""}/>
|
||||
|
|
@ -134,64 +135,80 @@ class AboutPage extends Component<any, IAboutPageState> {
|
|||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Paper>
|
||||
<br/>
|
||||
<ListSubheader>About this app</ListSubheader>
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<InfoIcon/>
|
||||
<AssignmentIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="App version" secondary={`${this.state? this.state.brandName: "Hyperspace"} v${this.state? this.state.versionNumber: "1.0.x"} ${this.state && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": ""}`}/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<NotesIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="License" secondary={this.state.license.name}/>
|
||||
<ListItemText
|
||||
primary="Terms of service"
|
||||
secondary="View the rules and privacy policies"
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title = "View license">
|
||||
<IconButton href={this.state.license.url} target="_blank" rel="noreferrer">
|
||||
<Tooltip title="Open in browser">
|
||||
<IconButton href={localStorage.getItem("baseurl") as string + "/terms"} target="_blank" rel="noreferrer">
|
||||
<OpenInNewIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
{
|
||||
this.state.repository?
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<CodeIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Source code repository" secondary={this.state.repository?
|
||||
<span>
|
||||
<Typography className={classes.mobileOnly} color='textSecondary'>{this.state.repository.slice(0, 25) + "..."}</Typography>
|
||||
<Typography className={classes.desktopOnly} color='textSecondary'>{this.state.repository}</Typography>
|
||||
</span>:
|
||||
"No repository in config"}/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="View source code">
|
||||
<IconButton href={this.state.repository? this.state.repository: ""} target="_blank" rel="noreferrer">
|
||||
<OpenInNewIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>: null
|
||||
}
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<TicketAccountIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Invite a friend"
|
||||
secondary="Invite a friend to this instance"
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="Go to invite settings">
|
||||
<Button href={localStorage.getItem("baseurl") as string + "/invites"} target="_blank" rel="noreferrer">
|
||||
Invite
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<MastodonIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Mastodon version"
|
||||
secondary={this.state.instance? this.state.instance.version: "x.x.x"}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Paper>
|
||||
|
||||
<br/>
|
||||
<ListSubheader>Advanced app info</ListSubheader>
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
|
||||
<Paper>
|
||||
<div
|
||||
className={classes.instanceHeaderPaper}
|
||||
style={{
|
||||
backgroundImage: `url("${this.state.brandBg? this.state.brandBg: ""}")`
|
||||
}}
|
||||
>
|
||||
<div className={classes.instanceToolbar}>
|
||||
{
|
||||
this.state.repository?
|
||||
<Tooltip title="View source code">
|
||||
<IconButton href={this.state.repository} target="_blank" rel="noreferrer" color="inherit">
|
||||
<CodeIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>: null
|
||||
}
|
||||
</div>
|
||||
<Typography className={classes.instanceHeaderText} variant="h4" component="p">
|
||||
{this.state.brandName? this.state.brandName: "Hyperspace"}
|
||||
</Typography>
|
||||
</div>
|
||||
<List className={classes.pageListConstraints}>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<LinkableAvatar to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`} src={this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.avatar_static: ""}>
|
||||
|
|
@ -215,10 +232,17 @@ class AboutPage extends Component<any, IAboutPageState> {
|
|||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<NetworkCheckIcon/>
|
||||
<NotesIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Federation status" secondary={`This instance of ${this.state? this.state.brandName: "Hyperspace"} ${this.state? this.state.federated? "supports": "doesn't support": "might support"} federation.`}/>
|
||||
<ListItemText primary="License" secondary={this.state.license.name}/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title = "View license">
|
||||
<IconButton href={this.state.license.url} target="_blank" rel="noreferrer">
|
||||
<OpenInNewIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
|
|
@ -234,6 +258,28 @@ class AboutPage extends Component<any, IAboutPageState> {
|
|||
"Loading..."
|
||||
}/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<InfoIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="App version" secondary={`${this.state? this.state.brandName: "Hyperspace"} v${this.state? this.state.versionNumber: "1.0.x"} ${this.state && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": ""}`}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Paper>
|
||||
<br/>
|
||||
<ListSubheader>Federation status</ListSubheader>
|
||||
<Paper>
|
||||
<List className={classes.pageListConstraints}>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<NetworkCheckIcon/>
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Federation status" secondary={`This instance of ${this.state? this.state.brandName: "Hyperspace"} ${this.state? this.state.federated? "supports": "doesn't support": "might support"} federation.`}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Paper>
|
||||
<br/>
|
||||
|
|
|
|||
|
|
@ -86,8 +86,14 @@ export const styles = (theme: Theme) => createStyles({
|
|||
paddingLeft: '25%',
|
||||
paddingRight: '25%',
|
||||
},
|
||||
position: "relative",
|
||||
zIndex: 1
|
||||
},
|
||||
pageHeroToolbar: {
|
||||
position: "absolute",
|
||||
right: theme.spacing.unit * 2,
|
||||
marginTop: -16,
|
||||
},
|
||||
pageListConstraints: {
|
||||
paddingLeft: theme.spacing.unit,
|
||||
paddingRight: theme.spacing.unit,
|
||||
|
|
@ -179,4 +185,50 @@ export const styles = (theme: Theme) => createStyles({
|
|||
color: theme.palette.primary.light
|
||||
}
|
||||
},
|
||||
youHeadingAvatar: {
|
||||
height: 88,
|
||||
width: 88
|
||||
},
|
||||
youPaper: {
|
||||
padding: theme.spacing.unit * 2,
|
||||
},
|
||||
youGrid: {
|
||||
textAlign: "center",
|
||||
'& *': {
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}
|
||||
},
|
||||
youGridAvatar: {
|
||||
height: 128,
|
||||
width: 128
|
||||
},
|
||||
youGridImage: {
|
||||
width: 'auto',
|
||||
height: 128
|
||||
},
|
||||
instanceHeaderPaper: {
|
||||
height: 200,
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover",
|
||||
position: "relative",
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
borderTopLeftRadius: theme.shape.borderRadius,
|
||||
borderTopRightRadius: theme.shape.borderRadius
|
||||
},
|
||||
instanceHeaderText: {
|
||||
position: "absolute",
|
||||
bottom: theme.spacing.unit,
|
||||
left: theme.spacing.unit * 2,
|
||||
color: theme.palette.common.white,
|
||||
textShadow: `0 0 4px ${theme.palette.grey[700]}`,
|
||||
fontWeight: 600
|
||||
},
|
||||
instanceToolbar: {
|
||||
position: "absolute",
|
||||
top: theme.spacing.unit,
|
||||
right: theme.spacing.unit,
|
||||
color: theme.palette.common.white
|
||||
}
|
||||
});
|
||||
|
|
@ -7,9 +7,11 @@ import { Status } from '../types/Status';
|
|||
import { Relationship } from '../types/Relationship';
|
||||
import Post from '../components/Post';
|
||||
import {withSnackbar} from 'notistack';
|
||||
import { LinkableButton } from '../interfaces/overrides';
|
||||
import { LinkableButton, LinkableIconButton } from '../interfaces/overrides';
|
||||
import { emojifyString } from '../utilities/emojis';
|
||||
|
||||
import AccountEditIcon from 'mdi-material-ui/AccountEdit';
|
||||
|
||||
interface IProfilePageState {
|
||||
account?: Account;
|
||||
relationship?: Relationship;
|
||||
|
|
@ -89,6 +91,14 @@ class ProfilePage extends Component<any, IProfilePageState> {
|
|||
this.getAccountData(params.profileId);
|
||||
}
|
||||
|
||||
isItMe(): boolean {
|
||||
if (this.state.account) {
|
||||
return this.state.account.id === JSON.parse(localStorage.getItem('account') as string).id;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
getRelationships() {
|
||||
this.client.get("/accounts/relationships", {id: this.props.match.params.profileId }).then((resp: any) => {
|
||||
let relationship: Relationship = resp.data[0];
|
||||
|
|
@ -216,6 +226,14 @@ class ProfilePage extends Component<any, IProfilePageState> {
|
|||
<div className={classes.pageHeroBackground}>
|
||||
<div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: this.state.account? `url("${this.state.account.header}")`: `url("")`}}/>
|
||||
<div className={classes.pageHeroContent}>
|
||||
{
|
||||
this.isItMe()?
|
||||
<Tooltip title="Edit profile">
|
||||
<LinkableIconButton to="/you" color="inherit" className={classes.pageHeroToolbar}>
|
||||
<AccountEditIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>: null
|
||||
}
|
||||
<Avatar className={classes.pageProfileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
|
||||
<Typography variant="h4" color="inherit" dangerouslySetInnerHTML={{__html: this.state.account? emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji): ""}}></Typography>
|
||||
<Typography variant="caption" color="inherit">{this.state.account ? '@' + this.state.account.acct: ""}</Typography>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
List,
|
||||
ListItem,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
ListSubheader,
|
||||
ListItemSecondaryAction,
|
||||
|
|
@ -22,7 +23,6 @@ import {
|
|||
Theme,
|
||||
Typography
|
||||
} from '@material-ui/core';
|
||||
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
|
||||
import {styles} from './PageLayout.styles';
|
||||
import {setUserDefaultBool, getUserDefaultBool, getUserDefaultTheme, setUserDefaultTheme, getUserDefaultVisibility, setUserDefaultVisibility, getConfig} from '../utilities/settings';
|
||||
import {canSendNotifications, browserSupportsNotificationRequests} from '../utilities/notifications';
|
||||
|
|
@ -30,6 +30,19 @@ import {themes, defaultTheme} from '../types/HyperspaceTheme';
|
|||
import ThemePreview from '../components/ThemePreview';
|
||||
import {setHyperspaceTheme, getHyperspaceTheme} from '../utilities/themes';
|
||||
import { Visibility } from '../types/Visibility';
|
||||
import {LinkableButton} from '../interfaces/overrides';
|
||||
|
||||
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
|
||||
import DevicesIcon from '@material-ui/icons/Devices';
|
||||
import Brightness3Icon from '@material-ui/icons/Brightness3';
|
||||
import PaletteIcon from '@material-ui/icons/Palette';
|
||||
import AccountEditIcon from 'mdi-material-ui/AccountEdit';
|
||||
import MastodonIcon from 'mdi-material-ui/Mastodon';
|
||||
import VisibilityIcon from '@material-ui/icons/Visibility';
|
||||
import NotificationsIcon from '@material-ui/icons/Notifications';
|
||||
import BellAlertIcon from 'mdi-material-ui/BellAlert';
|
||||
import RefreshIcon from '@material-ui/icons/Refresh';
|
||||
import UndoIcon from '@material-ui/icons/Undo';
|
||||
|
||||
interface ISettingsState {
|
||||
darkModeEnabled: boolean;
|
||||
|
|
@ -302,6 +315,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<DevicesIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Match system appearance" secondary="Obey light/dark theme from your system"/>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
|
|
@ -311,6 +327,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Brightness3Icon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Dark mode" secondary="Toggles light or dark theme"/>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
|
|
@ -321,6 +340,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<PaletteIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Interface theme" secondary="The color palette used for the interface"/>
|
||||
<ListItemSecondaryAction>
|
||||
<Button onClick={this.toggleThemeDialog}>
|
||||
|
|
@ -331,10 +353,22 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
</List>
|
||||
</Paper>
|
||||
<br/>
|
||||
<ListSubheader>Accounts</ListSubheader>
|
||||
<ListSubheader>Your Account</ListSubheader>
|
||||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<AccountEditIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Edit your profile" secondary="Change your bio, display name, and images"/>
|
||||
<ListItemSecondaryAction>
|
||||
<LinkableButton to="/you">Edit</LinkableButton>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<MastodonIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Configure on Mastodon"/>
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton href={(localStorage.getItem("baseurl") as string) + "/settings/preferences"} target="_blank" rel="noreferrer">
|
||||
|
|
@ -349,6 +383,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<VisibilityIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Default visibility" secondary="New posts in composer will use this visiblity"/>
|
||||
<ListItemSecondaryAction>
|
||||
<Button onClick={this.toggleVisibilityDialog}>
|
||||
|
|
@ -363,6 +400,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<NotificationsIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Enable push notifications"
|
||||
secondary={
|
||||
|
|
@ -382,6 +422,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<BellAlertIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Notification badge counts all notifications"
|
||||
secondary={
|
||||
|
|
@ -402,6 +445,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
<Paper className={classes.pageListConstraints}>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<RefreshIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Refresh settings" secondary="Reset the settings to defaults."/>
|
||||
<ListItemSecondaryAction>
|
||||
<Button onClick={() => this.toggleResetSettingsDialog()}>
|
||||
|
|
@ -410,6 +456,9 @@ class SettingsPage extends Component<any, ISettingsState> {
|
|||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<UndoIcon color="action"/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={`Reset ${this.state.brandName}`} secondary="Deletes all data and resets the app"/>
|
||||
<ListItemSecondaryAction>
|
||||
<Button onClick={() => this.toggleResetDialog()}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,192 @@
|
|||
import React, {Component} from 'react';
|
||||
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';
|
||||
import filedialog from 'file-dialog';
|
||||
|
||||
import PersonIcon from '@material-ui/icons/Person';
|
||||
|
||||
interface IYouProps extends withSnackbarProps {
|
||||
classes: any;
|
||||
}
|
||||
|
||||
interface IYouState {
|
||||
currentAccount: Account;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
updateAvatar() {
|
||||
filedialog({
|
||||
multiple: false,
|
||||
accept: "image/*"
|
||||
}).then((images: FileList) => {
|
||||
if (images.length > 0) {
|
||||
this.props.enqueueSnackbar("Updating avatar...", { persist: true, key: "persistAvatar" });
|
||||
let upload = new FormData();
|
||||
upload.append("avatar", images[0]);
|
||||
this.client.patch("/accounts/update_credentials", upload).then((acct: any) => {
|
||||
let currentAccount: Account = acct.data;
|
||||
this.setState({ currentAccount });
|
||||
localStorage.setItem("account", JSON.stringify(currentAccount));
|
||||
this.props.closeSnackbar("persistAvatar");
|
||||
this.props.enqueueSnackbar("Avatar updated successfully.");
|
||||
}).catch((err: Error) => {
|
||||
this.props.closeSnackbar("persistAvatar");
|
||||
this.props.enqueueSnackbar("Couldn't update avatar: " + err.name, { variant: "error" });
|
||||
})
|
||||
}
|
||||
}).catch((err: Error) => {
|
||||
this.props.enqueueSnackbar("Couldn't update avatar: " + err.name);
|
||||
})
|
||||
}
|
||||
|
||||
updateHeader() {
|
||||
filedialog({
|
||||
multiple: false,
|
||||
accept: "image/*"
|
||||
}).then((images: FileList) => {
|
||||
if (images.length > 0) {
|
||||
this.props.enqueueSnackbar("Updating header...", { persist: true, key: "persistHeader" });
|
||||
let upload = new FormData();
|
||||
upload.append("header", images[0]);
|
||||
this.client.patch("/accounts/update_credentials", upload).then((acct: any) => {
|
||||
let currentAccount: Account = acct.data;
|
||||
this.setState({ currentAccount });
|
||||
localStorage.setItem("account", JSON.stringify(currentAccount));
|
||||
this.props.closeSnackbar("persistHeader");
|
||||
this.props.enqueueSnackbar("Header updated successfully.");
|
||||
}).catch((err: Error) => {
|
||||
this.props.closeSnackbar("persistHeader");
|
||||
this.props.enqueueSnackbar("Couldn't update header: " + err.name, { variant: "error" });
|
||||
})
|
||||
}
|
||||
}).catch((err: Error) => {
|
||||
this.props.enqueueSnackbar("Couldn't update header: " + err.name);
|
||||
})
|
||||
}
|
||||
|
||||
removeHTMLContent(text: string) {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = text;
|
||||
let innerContent = div.textContent || div.innerText || "";
|
||||
return innerContent;
|
||||
}
|
||||
changeDisplayName() {
|
||||
this.client.patch('/accounts/update_credentials', {
|
||||
display_name: this.state.newDisplayName? this.state.newDisplayName: this.state.currentAccount.display_name
|
||||
})
|
||||
.then((acct: any) =>{
|
||||
let currentAccount: Account = acct.data
|
||||
this.setState({currentAccount});
|
||||
localStorage.setItem('account', JSON.stringify(currentAccount));
|
||||
this.props.closeSnackbar("persistHeader");
|
||||
this.props.enqueueSnackbar("Display name updated to " + this.state.newDisplayName);
|
||||
} ).catch((err:Error) => {
|
||||
console.error(err.name)
|
||||
this.props.closeSnackbar("persistHeader");
|
||||
this.props.enqueueSnackbar("Couldn't update display name: " + err.name, { variant: "error" })
|
||||
})
|
||||
}
|
||||
|
||||
updateDisplayname(name: string) {
|
||||
this.setState({ newDisplayName: name });
|
||||
};
|
||||
changeBio() {
|
||||
this.client.patch('/accounts/update_credentials', {note: this.state.newBio? this.state.newBio: this.state.currentAccount.note})
|
||||
.then((acct:any) => {
|
||||
let currentAccount: Account = acct.data
|
||||
this.setState({currentAccount});
|
||||
localStorage.setItem('account', JSON.stringify(currentAccount));
|
||||
this.props.closeSnackbar("persistHeader");
|
||||
this.props.enqueueSnackbar("Bio updated successfully.");
|
||||
}).catch((err: Error) => {
|
||||
console.error(err.name)
|
||||
this.props.closeSnackbar("persistHeader");
|
||||
this.props.enqueueSnackbar("Couldn't update bio: " + err.name, { variant: "error"});
|
||||
})
|
||||
}
|
||||
|
||||
updateBio(bio:string){
|
||||
this.setState({newBio:bio})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {classes} = this.props;
|
||||
return (
|
||||
<div className={classes.pageLayoutMinimalConstraints}>
|
||||
<div className={classes.pageHeroBackground}>
|
||||
<div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: `url("${this.state.currentAccount.header_static}")`}}/>
|
||||
<div className={classes.pageHeroContent}>
|
||||
<Avatar className={classes.pageProfileAvatar} src={this.state.currentAccount.avatar_static}/>
|
||||
<Typography variant="h4" color="inherit" component="h1">Edit your profile</Typography>
|
||||
<br/>
|
||||
<div>
|
||||
<Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateAvatar()}>Change Avatar</Button>
|
||||
<Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateHeader()}>Change Header</Button>
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.pageContentLayoutConstraints}>
|
||||
<Paper className={classes.youPaper}>
|
||||
<Typography variant="h5" component="h2">Display Name</Typography>
|
||||
<br/>
|
||||
<TextField className = {classes.TextField}
|
||||
defaultValue = {this.state.currentAccount.display_name}
|
||||
rowsMax = "1"
|
||||
variant = "outlined"
|
||||
fullWidth
|
||||
onChange = {(event: any) => this.updateDisplayname(event.target.value)}>
|
||||
</TextField>
|
||||
<div style = {{textAlign: "right"}}>
|
||||
<Button className={classes.pageProfileFollowButton} color = "primary" onClick = {() => this.changeDisplayName()}>Update display Name</Button>
|
||||
</div>
|
||||
</Paper>
|
||||
<br/>
|
||||
<Paper className={classes.youPaper}>
|
||||
<Typography variant="h5" component="h2">About you</Typography>
|
||||
<br/>
|
||||
<TextField className = {classes.TextField}
|
||||
defaultValue = {this.state.currentAccount.note? this.removeHTMLContent(this.state.currentAccount.note): "Tell a little bit about yourself"}
|
||||
multiline
|
||||
variant = "outlined"
|
||||
rows = "2"
|
||||
rowsMax = "5"
|
||||
fullWidth
|
||||
onChange = {(event:any) =>this.updateBio(event.target.value)}>
|
||||
</TextField>
|
||||
<div style={{textAlign: "right"}}>
|
||||
<Button className={classes.pageProfileFollowButton} color = "primary" onClick = {() => this.changeBio()}>Update biography</Button>
|
||||
</div>
|
||||
</Paper>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(withSnackbar(You));
|
||||
Loading…
Reference in New Issue