From 7ea899c4621fc361798d78270fc3e6a2cfa6ec71 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Sun, 15 Sep 2019 17:12:15 -0400 Subject: [PATCH] Add appbar utility, finalize profile page styles Signed-off-by: Marquis Kurt --- package.json | 2 +- src/pages/PageLayout.styles.tsx | 24 +++++++++++++++--------- src/pages/ProfilePage.tsx | 31 ++++++++++++++++++++++++++----- src/utilities/appbar.tsx | 11 +++++++++++ 4 files changed, 53 insertions(+), 15 deletions(-) create mode 100644 src/utilities/appbar.tsx diff --git a/package.json b/package.json index 5da9da4..73a12d3 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ ], "build": { "appId": "net.marquiskurt.hyperspace", - "afterSign": "desktop/notarize.js", + "afterSign": "desktop/notarize.js", "directories": { "buildResources": "desktop" }, diff --git a/src/pages/PageLayout.styles.tsx b/src/pages/PageLayout.styles.tsx index c88779d..70a0cd7 100644 --- a/src/pages/PageLayout.styles.tsx +++ b/src/pages/PageLayout.styles.tsx @@ -1,5 +1,6 @@ import { Theme, createStyles } from "@material-ui/core"; import { isDarwinApp } from "../utilities/desktop"; +import { isAppbarExpanded } from "../utilities/appbar"; export const styles = (theme: Theme) => createStyles({ root: { @@ -69,7 +70,8 @@ export const styles = (theme: Theme) => createStyles({ backgroundColor: theme.palette.primary.dark, width: '100%', color: theme.palette.common.white, - zIndex: 1 + zIndex: 1, + top: isAppbarExpanded()? 80: 64, }, pageHeroBackgroundImage: { position: 'absolute', @@ -80,12 +82,13 @@ export const styles = (theme: Theme) => createStyles({ backgroundSize: 'cover', height: '100%', width: '100%', - opacity: 0.40, - zIndex: -1 + opacity: 0.35, + zIndex: -1, + filter: 'blur(2px)' }, pageHeroContent: { padding: 16, - paddingTop: 116, + paddingTop: 8, textAlign: 'center', width: '100%', height: '100%', @@ -112,13 +115,15 @@ export const styles = (theme: Theme) => createStyles({ }, profileToolbar: { zIndex: 2, - paddingTop: 100, + paddingTop: 8, }, profileContent: { padding: 16, [theme.breakpoints.up('md')]: { paddingLeft: '5%', - paddingRight: '5%' + paddingRight: '5%', + paddingBottom: 48, + paddingTop: 24, }, width: '100%', height: '100%', @@ -126,7 +131,7 @@ export const styles = (theme: Theme) => createStyles({ zIndex: 1, display: 'flex', paddingBottom: 24, - paddingTop: 0 + paddingTop: 24, }, profileAvatar: { width: 64, @@ -149,7 +154,8 @@ export const styles = (theme: Theme) => createStyles({ backgroundColor: theme.palette.primary.main }, pageProfileNameEmoji: { - height: theme.typography.h4.fontSize + height: theme.typography.h4.fontSize, + fontWeight: theme.typography.fontWeightMedium, }, pageProfileStatsDiv: { display: 'inline-flex', @@ -169,7 +175,7 @@ export const styles = (theme: Theme) => createStyles({ pageContentLayoutConstraints: { paddingLeft: theme.spacing.unit, paddingRight: theme.spacing.unit, - paddingTop: theme.spacing.unit * 4, + paddingTop: theme.spacing.unit * 12, paddingBottom: theme.spacing.unit * 2, [theme.breakpoints.up('lg')]: { paddingLeft: theme.spacing.unit * 32, diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 6a08afd..b2ee4bc 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -23,7 +23,7 @@ import { Status } from '../types/Status'; import { Relationship } from '../types/Relationship'; import Post from '../components/Post'; import {withSnackbar} from 'notistack'; -import { LinkableButton, LinkableIconButton } from '../interfaces/overrides'; +import { LinkableIconButton } from '../interfaces/overrides'; import { emojifyString } from '../utilities/emojis'; import AccountEditIcon from 'mdi-material-ui/AccountEdit'; @@ -31,7 +31,9 @@ import PersonAddIcon from '@material-ui/icons/PersonAdd'; import PersonAddDisabledIcon from '@material-ui/icons/PersonAddDisabled'; import AccountMinusIcon from 'mdi-material-ui/AccountMinus'; import ChatIcon from '@material-ui/icons/Chat'; -import CancelIcon from '@material-ui/icons/Cancel'; +import AccountRemoveIcon from 'mdi-material-ui/AccountRemove'; +import AccountHeartIcon from 'mdi-material-ui/AccountHeart'; +import OpenInNewIcon from '@material-ui/icons/OpenInNew'; @@ -257,7 +259,14 @@ class ProfilePage extends Component { this.toggleBlockDialog()}> - + { + this.state.relationship && this.state.relationship.blocking? : + } + + + + + { @@ -272,9 +281,21 @@ class ProfilePage extends Component {
- + {this.state.account ? '@' + this.state.account.acct: ""} - {this.state.account ? this.state.account.note: ""} + { + this.state.account ? + this.state.account.note? + this.state.account.note + : "No bio provided by user." + : "No bio available." + } {this.state.account? this.state.account.followers_count: 0} followers | {this.state.account? this.state.account.following_count: 0} following | {this.state.account? this.state.account.statuses_count: 0} posts diff --git a/src/utilities/appbar.tsx b/src/utilities/appbar.tsx new file mode 100644 index 0000000..07558ad --- /dev/null +++ b/src/utilities/appbar.tsx @@ -0,0 +1,11 @@ +import { isDarwinApp } from "./desktop"; + +/** + * Determine whether the title bar is being displayed. + * This might be useful in cases where styles are dependent on the title bar's visibility, such as heights. + * + * @returns Boolean dictating if the title bar is visible + */ +export function isAppbarExpanded(): boolean { + return isDarwinApp() || process.env.NODE_ENV === "development"; +} \ No newline at end of file