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

More tooltips and welcome page cleanups

This commit is contained in:
Marquis Kurt 2019-04-12 14:26:27 -04:00
parent d64e8ab39e
commit a5ffae3f8a
4 changed files with 83 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/About.tsx
View File

@ -11,7 +11,8 @@ import {
IconButton,
withStyles,
Typography,
Link
Link,
Tooltip
} from '@material-ui/core';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import DomainIcon from '@material-ui/icons/Domain';
@ -104,9 +105,11 @@ class AboutPage extends Component<any, IAboutPageState> {
</ListItemAvatar>
<ListItemText primary="Instance location (URL)" secondary={this.state.instance ? this.state.instance.uri: "Loading..."}/>
<ListItemSecondaryAction>
<IconButton href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
<Tooltip title="Open in browser">
<IconButton href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
@ -118,12 +121,16 @@ class AboutPage extends Component<any, IAboutPageState> {
"Loading..."
}/>
<ListItemSecondaryAction>
<LinkableIconButton to={`/compose?visibility=public&acct=${this.state.instance? this.state.instance.contact_account.acct: ""}`}>
<ChatIcon/>
</LinkableIconButton>
<LinkableIconButton to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`}>
<PersonIcon/>
</LinkableIconButton>
<Tooltip title="Send a post or message">
<LinkableIconButton to={`/compose?visibility=public&acct=${this.state.instance? this.state.instance.contact_account.acct: ""}`}>
<ChatIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`}>
<PersonIcon/>
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
</List>
@ -148,9 +155,11 @@ class AboutPage extends Component<any, IAboutPageState> {
</ListItemAvatar>
<ListItemText primary="License" secondary={this.state.license.name}/>
<ListItemSecondaryAction>
<IconButton href={this.state.license.url} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
<Tooltip title = "View license">
<IconButton href={this.state.license.url} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
{
@ -161,11 +170,13 @@ class AboutPage extends Component<any, IAboutPageState> {
<CodeIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="View source code" secondary={this.state.repository? this.state.repository: "No repository in config"}/>
<ListItemText primary="Source code repository" secondary={this.state.repository? this.state.repository: "No repository in config"}/>
<ListItemSecondaryAction>
<IconButton href={this.state.repository? this.state.repository: ""} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
<Tooltip title="View source code">
<IconButton href={this.state.repository? this.state.repository: ""} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>: null
}
@ -183,12 +194,16 @@ class AboutPage extends Component<any, IAboutPageState> {
</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"}/>
<ListItemSecondaryAction>
<LinkableIconButton to={`/compose?visibility=${this.state.federated? "public": "private"}&acct=${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.acct: ""}`}>
<ChatIcon/>
</LinkableIconButton>
<LinkableIconButton to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`}>
<PersonIcon/>
</LinkableIconButton>
<Tooltip title="Send a post or message">
<LinkableIconButton to={`/compose?visibility=${this.state.federated? "public": "private"}&acct=${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.acct: ""}`}>
<ChatIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`}>
<PersonIcon/>
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>

10
src/pages/Messages.tsx
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import {withStyles, ListSubheader, Paper, List, ListItem, ListItemText, CircularProgress, ListItemAvatar, Avatar, ListItemSecondaryAction} from '@material-ui/core';
import {withStyles, ListSubheader, Paper, List, ListItem, ListItemText, CircularProgress, ListItemAvatar, Avatar, ListItemSecondaryAction, Tooltip} from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import ForumIcon from '@material-ui/icons/Forum';
import {styles} from './PageLayout.styles';
@ -79,9 +79,11 @@ class MessagesPage extends Component<any, IMessagesState> {
</ListItemAvatar>
<ListItemText primary={message.account.display_name || "@" + message.account.acct} secondary={this.removeHTMLContent(message.content)}/>
<ListItemSecondaryAction>
<LinkableIconButton to={`/conversation/${message.id}`}>
<ForumIcon/>
</LinkableIconButton>
<Tooltip title="View conversation">
<LinkableIconButton to={`/conversation/${message.id}`}>
<ForumIcon/>
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
)

27
src/pages/Notifications.tsx
View File

@ -17,7 +17,8 @@ import {
DialogTitle,
DialogContent,
DialogContentText,
DialogActions
DialogActions,
Tooltip
} from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
@ -152,19 +153,25 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
<ListItemSecondaryAction>
{
notif.type === "follow"?
<IconButton onClick={() => this.followMember(notif.account)}>
<PersonAddIcon/>
</IconButton>:
<Tooltip title="Follow account">
<IconButton onClick={() => this.followMember(notif.account)}>
<PersonAddIcon/>
</IconButton>
</Tooltip>:
notif.status?
<LinkableIconButton to={`/conversation/${notif.status.id}`}>
<ForumIcon/>
</LinkableIconButton>:
<Tooltip title="View conversation">
<LinkableIconButton to={`/conversation/${notif.status.id}`}>
<ForumIcon/>
</LinkableIconButton>
</Tooltip>:
null
}
<IconButton onClick={() => this.removeNotification(notif.id)}>
<DeleteIcon/>
</IconButton>
<Tooltip title="Remove notification">
<IconButton onClick={() => this.removeNotification(notif.id)}>
<DeleteIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);

31
src/pages/Welcome.tsx
View File

@ -23,6 +23,8 @@ interface IWelcomeState {
authUrl?: string;
foundSavedLogin: boolean;
authority: boolean;
license?: string;
repo?: string;
}
class WelcomePage extends Component<any, IWelcomeState> {
@ -47,7 +49,9 @@ class WelcomePage extends Component<any, IWelcomeState> {
backgroundUrl: result.branding? result.branding.background: "background.png",
brandName: result.branding? result.branding.name: "Hyperspace",
registerBase: result.registration? result.registration.defaultInstance: "",
federates: result.federated? result.federated === "true": true
federates: result.federated? result.federated === "true": true,
license: result.license.url,
repo: result.repository
});
}).catch(() => {
console.warn('config.json is missing. If you want to customize Hyperspace, please include config.json');
@ -115,7 +119,8 @@ class WelcomePage extends Component<any, IWelcomeState> {
}
startLogin() {
if (this.state.user != "") {
let error = this.checkForErrors();
if (!error) {
const scopes = 'read write follow';
const baseurl = this.getLoginUser(this.state.user);
localStorage.setItem("baseurl", baseurl);
@ -134,7 +139,7 @@ class WelcomePage extends Component<any, IWelcomeState> {
})
})
} else {
this.setState({ userInputError: true });
}
}
@ -163,25 +168,29 @@ class WelcomePage extends Component<any, IWelcomeState> {
}
}
checkForErrors() {
checkForErrors(): boolean {
let userInputError = false;
let userInputErrorMessage = "";
if (this.state.user === "") {
userInputError = true;
userInputErrorMessage = "Field cannot be blank.";
userInputErrorMessage = "Username cannot be blank.";
this.setState({ userInputError, userInputErrorMessage });
return true;
} else {
if (this.state.user.includes("@")) {
let baseUrl = this.state.user.split("@")[1];
axios.get("https://" + baseUrl + "/api/v1/timelines/public").catch((err: Error) => {
let userInputError = true;
let userInputErrorMessage = "Invalid instance name";
let userInputErrorMessage = "Instance name is invalid.";
this.setState({ userInputError, userInputErrorMessage });
return true;
})
} else {
this.setState({ userInputError, userInputErrorMessage });
return false;
}
return false;
}
}
@ -213,6 +222,7 @@ class WelcomePage extends Component<any, IWelcomeState> {
{
this.state.userInputError? <Typography color="error">{this.state.userInputErrorMessage}</Typography> : null
}
<br/>
{
this.state.registerBase? <Typography variant="caption">If you are from <b>{this.state.registerBase? this.state.registerBase: "noinstance"}</b>, sign in with your username.</Typography>: null
}
@ -226,7 +236,7 @@ class WelcomePage extends Component<any, IWelcomeState> {
<div className={classes.middlePadding}/>
<div style={{ display: "flex" }}>
<Tooltip title="Create a new account. You'll be redirected to a sign up page.">
<Tooltip title="Create account on site">
<Button
color="primary"
href={this.startRegistration()}
@ -235,7 +245,10 @@ class WelcomePage extends Component<any, IWelcomeState> {
>Create account</Button>
</Tooltip>
<div className={classes.flexGrow}/>
<Button color="primary" variant="contained" onClick={() => this.startLogin()}>Next</Button>
<Tooltip title="Continue sign-in">
<Button color="primary" variant="contained" onClick={() => this.startLogin()}>Next</Button>
</Tooltip>
</div>
</div>
);
@ -303,7 +316,7 @@ class WelcomePage extends Component<any, IWelcomeState> {
&copy; 2019 <Link href="https://hyperspace.marquiskurt.net" target="_blank" rel="noreferrer">Hyperspace</Link> developers. All rights reserved.
</Typography>
<Typography variant="caption">
<Link href="https://github.com/hyperspacedev" target="_blank" rel="noreferrer">GitHub</Link> | <Link href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer">License</Link> | <Link href="https://github.com/hyperspacedev/hyperspace/issues/new" target="_blank" rel="noreferrer">File an Issue</Link>
{ this.state.repo? <span><Link href={this.state.repo? this.state.repo: "https://github.com/hyperspacedev"} target="_blank" rel="noreferrer">Source code</Link> | </span>: null}<Link href={this.state.license? this.state.license: "https://www.apache.org/licenses/LICENSE-2.0"} target="_blank" rel="noreferrer">License</Link> | <Link href="https://github.com/hyperspacedev/hyperspace/issues/new" target="_blank" rel="noreferrer">File an Issue</Link>
</Typography>
</Paper>
</div>