Trim headers on About page, move version to underneath header text, put app version first
Signed-off-by: Marquis Kurt <software@marquiskurt.net>
This commit is contained in:
parent
d3f1c890e6
commit
29ae5ab09e
|
@ -106,7 +106,87 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
return (
|
return (
|
||||||
<div className={classes.pageLayoutConstraints}>
|
<div className={classes.pageLayoutConstraints}>
|
||||||
<Paper>
|
<Paper>
|
||||||
<div
|
<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>
|
||||||
|
<div className={classes.instanceHeaderText}>
|
||||||
|
<Typography variant="h4" component="p">
|
||||||
|
{this.state.brandName? this.state.brandName: "Hyperspace"}
|
||||||
|
</Typography>
|
||||||
|
<Typography>Version {`${this.state? this.state.versionNumber: "1.0.x"} ${this.state && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": ""}`}</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</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: ""}>
|
||||||
|
<PersonIcon/>
|
||||||
|
</LinkableAvatar>
|
||||||
|
</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>
|
||||||
|
<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}`}>
|
||||||
|
<AssignmentIndIcon/>
|
||||||
|
</LinkableIconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</ListItemSecondaryAction>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemAvatar>
|
||||||
|
<Avatar>
|
||||||
|
<NotesIcon/>
|
||||||
|
</Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<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>
|
||||||
|
<Avatar>
|
||||||
|
<UpdateIcon/>
|
||||||
|
</Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText primary="Release channel" secondary={
|
||||||
|
this.state?
|
||||||
|
this.state.developer?
|
||||||
|
"Developer":
|
||||||
|
"Release":
|
||||||
|
"Loading..."
|
||||||
|
}/>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Paper>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<Paper>
|
||||||
|
<div
|
||||||
className={classes.instanceHeaderPaper}
|
className={classes.instanceHeaderPaper}
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url("${this.state.instance && this.state.instance.thumbnail? this.state.instance.thumbnail: ""}")`
|
backgroundImage: `url("${this.state.instance && this.state.instance.thumbnail? this.state.instance.thumbnail: ""}")`
|
||||||
|
@ -115,7 +195,10 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
<IconButton className={classes.instanceToolbar} href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer" color="inherit">
|
<IconButton className={classes.instanceToolbar} href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer" color="inherit">
|
||||||
<OpenInNewIcon/>
|
<OpenInNewIcon/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<Typography className={classes.instanceHeaderText} variant="h4" component="p">{this.state.instance ? this.state.instance.uri: "Loading..."}</Typography>
|
<div className={classes.instanceHeaderText}>
|
||||||
|
<Typography variant="h4" component="p">{this.state.instance ? this.state.instance.uri: "Loading..."}</Typography>
|
||||||
|
<Typography>Server version {this.state.instance? this.state.instance.version: "x.x.x"}</Typography>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<List className={classes.pageListConstraints}>
|
<List className={classes.pageListConstraints}>
|
||||||
{(localStorage['isPleroma'] == "false") && <ListItem>
|
{(localStorage['isPleroma'] == "false") && <ListItem>
|
||||||
|
@ -124,7 +207,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
</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})`:
|
||||||
"Loading..."
|
"Loading..."
|
||||||
}/>
|
}/>
|
||||||
<ListItemSecondaryAction>
|
<ListItemSecondaryAction>
|
||||||
<Tooltip title="Send a post or message">
|
<Tooltip title="Send a post or message">
|
||||||
|
@ -175,101 +258,6 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</ListItemSecondaryAction>
|
</ListItemSecondaryAction>
|
||||||
</ListItem>
|
</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/>
|
|
||||||
|
|
||||||
<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: ""}>
|
|
||||||
<PersonIcon/>
|
|
||||||
</LinkableAvatar>
|
|
||||||
</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>
|
|
||||||
<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}`}>
|
|
||||||
<AssignmentIndIcon/>
|
|
||||||
</LinkableIconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem>
|
|
||||||
<ListItemAvatar>
|
|
||||||
<Avatar>
|
|
||||||
<NotesIcon/>
|
|
||||||
</Avatar>
|
|
||||||
</ListItemAvatar>
|
|
||||||
<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>
|
|
||||||
<Avatar>
|
|
||||||
<UpdateIcon/>
|
|
||||||
</Avatar>
|
|
||||||
</ListItemAvatar>
|
|
||||||
<ListItemText primary="Release channel" secondary={
|
|
||||||
this.state?
|
|
||||||
this.state.developer?
|
|
||||||
"Developer":
|
|
||||||
"Release":
|
|
||||||
"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>
|
</List>
|
||||||
</Paper>
|
</Paper>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
|
@ -253,7 +253,7 @@ export const styles = (theme: Theme) => createStyles({
|
||||||
height: 128
|
height: 128
|
||||||
},
|
},
|
||||||
instanceHeaderPaper: {
|
instanceHeaderPaper: {
|
||||||
height: 200,
|
height: 150,
|
||||||
backgroundPosition: "center",
|
backgroundPosition: "center",
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
|
@ -266,9 +266,11 @@ export const styles = (theme: Theme) => createStyles({
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
bottom: theme.spacing.unit,
|
bottom: theme.spacing.unit,
|
||||||
left: theme.spacing.unit * 2,
|
left: theme.spacing.unit * 2,
|
||||||
color: theme.palette.common.white,
|
'& *': {
|
||||||
textShadow: `0 0 4px ${theme.palette.grey[700]}`,
|
color: theme.palette.common.white,
|
||||||
fontWeight: 600
|
textShadow: `0 0 4px ${theme.palette.grey[700]}`,
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
instanceToolbar: {
|
instanceToolbar: {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
|
|
Loading…
Reference in New Issue