From d3f1c890e6f71eeb2b3662b1cc29a532f08b7c60 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Wed, 18 Sep 2019 13:28:20 -0400 Subject: [PATCH 01/10] Remove unnecessary console logs in App Signed-off-by: Marquis Kurt --- src/App.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c1991d9..eb1dca5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -54,8 +54,6 @@ class App extends Component { removeBodyBackground() { if (isDarwinApp()) { document.body.style.backgroundColor = "transparent"; - console.log("Changed!") - console.log(`New color: ${document.body.style.backgroundColor}`) } } From 29ae5ab09e27e070fe63a0a34162f02d3c0ae2d2 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Wed, 18 Sep 2019 13:28:57 -0400 Subject: [PATCH 02/10] Trim headers on About page, move version to underneath header text, put app version first Signed-off-by: Marquis Kurt --- src/pages/About.tsx | 184 +++++++++++++++----------------- src/pages/PageLayout.styles.tsx | 10 +- 2 files changed, 92 insertions(+), 102 deletions(-) diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 931300b..ba56ef0 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -106,7 +106,87 @@ class AboutPage extends Component { return (
-
+
+ { + this.state.repository? + + + + + : null + } +
+
+ + {this.state.brandName? this.state.brandName: "Hyperspace"} + + Version {`${this.state? this.state.versionNumber: "1.0.x"} ${this.state && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": ""}`} +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
{ - {this.state.instance ? this.state.instance.uri: "Loading..."} +
+ {this.state.instance ? this.state.instance.uri: "Loading..."} + Server version {this.state.instance? this.state.instance.version: "x.x.x"} +
{(localStorage['isPleroma'] == "false") && @@ -124,7 +207,7 @@ class AboutPage extends Component { @@ -175,101 +258,6 @@ class AboutPage extends Component { - - - - - - - - - - - -
- - -
-
- { - this.state.repository? - - - - - : null - } -
- - {this.state.brandName? this.state.brandName: "Hyperspace"} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/src/pages/PageLayout.styles.tsx b/src/pages/PageLayout.styles.tsx index 70a0cd7..c7c81c3 100644 --- a/src/pages/PageLayout.styles.tsx +++ b/src/pages/PageLayout.styles.tsx @@ -253,7 +253,7 @@ export const styles = (theme: Theme) => createStyles({ height: 128 }, instanceHeaderPaper: { - height: 200, + height: 150, backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundSize: "cover", @@ -266,9 +266,11 @@ export const styles = (theme: Theme) => createStyles({ 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 + '& *': { + color: theme.palette.common.white, + textShadow: `0 0 4px ${theme.palette.grey[700]}`, + fontWeight: 600, + }, }, instanceToolbar: { position: "absolute", From 340156876dd7a38102afa1a8c8a16b02f00ac142 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Wed, 18 Sep 2019 13:35:09 -0400 Subject: [PATCH 03/10] Add "Edit profile" to account menu Signed-off-by: Marquis Kurt --- src/components/AppLayout/AppLayout.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 8835d92..5d2c452 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -344,6 +344,9 @@ export class AppLayout extends Component { /> + + Edit profile + {/* Switch account */} this.toggleLogOutDialog()}>Log out
From d92ed116f30193883e6407384c08f224061ed100 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Wed, 18 Sep 2019 13:44:10 -0400 Subject: [PATCH 04/10] Add Prettier to fix code styles Signed-off-by: Marquis Kurt --- .prettierrc | 4 + package-lock.json | 8 +- package.json | 1 + src/components/AppLayout/AppLayout.tsx | 954 ++++++++++++++++--------- 4 files changed, 618 insertions(+), 349 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b0987a6 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "bracketSpacing": true, + "tabWidth": 4 +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2676737..bd7af84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "hyperspace", - "version": "1.0.0-beta6", + "version": "1.0.0-beta7", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -17778,6 +17778,12 @@ "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=", "dev": true }, + "prettier": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz", + "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==", + "dev": true + }, "pretty-bytes": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", diff --git a/package.json b/package.json index 72ea036..0397a79 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "megalodon": "^0.6.4", "moment": "^2.24.0", "notistack": "^0.5.1", + "prettier": "1.18.2", "query-string": "^6.8.2", "react": "^16.8.6", "react-dom": "^16.8.6", diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 5d2c452..0d00cd9 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -1,28 +1,60 @@ -import React, { Component } from 'react'; -import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles, Menu, MenuItem, ClickAwayListener, Badge, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, ListItem, Tooltip } from '@material-ui/core'; -import MenuIcon from '@material-ui/icons/Menu'; -import SearchIcon from '@material-ui/icons/Search'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import MailIcon from '@material-ui/icons/Mail'; -import HomeIcon from '@material-ui/icons/Home'; -import DomainIcon from '@material-ui/icons/Domain'; -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 CreateIcon from '@material-ui/icons/Create'; +import React, { Component } from "react"; +import { + Typography, + AppBar, + Toolbar, + IconButton, + InputBase, + Avatar, + ListItemText, + Divider, + List, + ListItemIcon, + Hidden, + Drawer, + ListSubheader, + ListItemAvatar, + withStyles, + Menu, + MenuItem, + ClickAwayListener, + Badge, + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, + Button, + ListItem, + Tooltip +} from "@material-ui/core"; +import MenuIcon from "@material-ui/icons/Menu"; +import SearchIcon from "@material-ui/icons/Search"; +import NotificationsIcon from "@material-ui/icons/Notifications"; +import MailIcon from "@material-ui/icons/Mail"; +import HomeIcon from "@material-ui/icons/Home"; +import DomainIcon from "@material-ui/icons/Domain"; +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 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'; -import { UAccount } from '../../types/Account'; -import {LinkableListItem, LinkableIconButton, LinkableFab} from '../../interfaces/overrides'; -import Mastodon from 'megalodon'; -import { Notification } from '../../types/Notification'; -import {sendNotificationRequest} from '../../utilities/notifications'; -import {withSnackbar} from 'notistack'; -import { getConfig, getUserDefaultBool } from '../../utilities/settings'; -import { isDesktopApp, isDarwinApp } from '../../utilities/desktop'; -import { Config } from '../../types/Config'; +import ExitToAppIcon from "@material-ui/icons/ExitToApp"; +import { styles } from "./AppLayout.styles"; +import { UAccount } from "../../types/Account"; +import { + LinkableListItem, + LinkableIconButton, + LinkableFab +} from "../../interfaces/overrides"; +import Mastodon from "megalodon"; +import { Notification } from "../../types/Notification"; +import { sendNotificationRequest } from "../../utilities/notifications"; +import { withSnackbar } from "notistack"; +import { getConfig, getUserDefaultBool } from "../../utilities/settings"; +import { isDesktopApp, isDarwinApp } from "../../utilities/desktop"; +import { Config } from "../../types/Config"; interface IAppLayoutState { acctMenuOpen: boolean; @@ -36,380 +68,606 @@ interface IAppLayoutState { } export class AppLayout extends Component { - client: Mastodon; streamListener: any; constructor(props: any) { super(props); - this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1"); - + this.client = new Mastodon( + localStorage.getItem("access_token") as string, + (localStorage.getItem("baseurl") as string) + "/api/v1" + ); + this.state = { - drawerOpenOnMobile: false, - acctMenuOpen: false, - notificationCount: 0, - logOutOpen: false - } - + drawerOpenOnMobile: false, + acctMenuOpen: false, + notificationCount: 0, + logOutOpen: false + }; + this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this); this.toggleAcctMenu = this.toggleAcctMenu.bind(this); this.clearBadge = this.clearBadge.bind(this); - } + } - componentDidMount() { - - let acct = localStorage.getItem('account'); + componentDidMount() { + let acct = localStorage.getItem("account"); if (acct) { - this.setState({ currentUser: JSON.parse(acct) }); + this.setState({ currentUser: JSON.parse(acct) }); } else { - this.client.get('/accounts/verify_credentials').then((resp: any) => { - let data: UAccount = resp.data; - this.setState({ currentUser: data }); - }).catch((err: Error) => { - this.props.enqueueSnackbar("Couldn't find profile info: " + err.name); - console.error(err.message); - }) + this.client + .get("/accounts/verify_credentials") + .then((resp: any) => { + let data: UAccount = resp.data; + this.setState({ currentUser: data }); + }) + .catch((err: Error) => { + this.props.enqueueSnackbar( + "Couldn't find profile info: " + err.name + ); + console.error(err.message); + }); } getConfig().then((result: any) => { - if (result !== undefined) { - let config: Config = result; - this.setState({ - enableFederation: config.federation.enablePublicTimeline, - brandName: config.branding? config.branding.name: "Hyperspace", - developerMode: config.developer + if (result !== undefined) { + let config: Config = result; + this.setState({ + enableFederation: config.federation.enablePublicTimeline, + brandName: config.branding + ? config.branding.name + : "Hyperspace", + developerMode: config.developer + }); + } + }); + + this.streamNotifications(); + } + + streamNotifications() { + this.streamListener = this.client.stream("/streaming/user"); + + if (getUserDefaultBool("displayAllOnNotificationBadge")) { + this.client.get("/notifications").then((resp: any) => { + let notifArray = resp.data; + this.setState({ notificationCount: notifArray.length }); }); - } - }) - - this.streamNotifications() - - } - - streamNotifications() { - this.streamListener = this.client.stream('/streaming/user'); - - if (getUserDefaultBool('displayAllOnNotificationBadge')) { - this.client.get('/notifications').then((resp: any) => { - let notifArray = resp.data; - this.setState({ notificationCount: notifArray.length }); - }) } - this.streamListener.on('notification', (notif: Notification) => { - const notificationCount = this.state.notificationCount + 1; - this.setState({ notificationCount }); - if (!document.hasFocus()) { - let primaryMessage = ""; - let secondaryMessage = ""; + this.streamListener.on("notification", (notif: Notification) => { + const notificationCount = this.state.notificationCount + 1; + this.setState({ notificationCount }); + if (!document.hasFocus()) { + let primaryMessage = ""; + let secondaryMessage = ""; - switch(notif.type) { - case "favourite": - primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " favorited your post."; - if (notif.status) { - const div = document.createElement('div'); - div.innerHTML = notif.status.content; - secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..." + switch (notif.type) { + case "favourite": + primaryMessage = + (notif.account.display_name || + "@" + notif.account.username) + + " favorited your post."; + if (notif.status) { + const div = document.createElement("div"); + div.innerHTML = notif.status.content; + secondaryMessage = + (div.textContent || div.innerText || "").slice( + 0, + 100 + ) + "..."; + } + break; + case "follow": + primaryMessage = + (notif.account.display_name || + "@" + notif.account.username) + + " is now following you."; + break; + case "mention": + primaryMessage = + (notif.account.display_name || + "@" + notif.account.username) + + " mentioned you in a post."; + if (notif.status) { + const div = document.createElement("div"); + div.innerHTML = notif.status.content; + secondaryMessage = + (div.textContent || div.innerText || "").slice( + 0, + 100 + ) + "..."; + } + break; + case "reblog": + primaryMessage = + (notif.account.display_name || + "@" + notif.account.username) + + " reblogged your post."; + if (notif.status) { + const div = document.createElement("div"); + div.innerHTML = notif.status.content; + secondaryMessage = + (div.textContent || div.innerText || "").slice( + 0, + 100 + ) + "..."; + } + break; } - break; - case "follow": - primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " is now following you."; - break; - case "mention": - primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " mentioned you in a post."; - if (notif.status) { - const div = document.createElement('div'); - div.innerHTML = notif.status.content; - secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..." - } - break; - case "reblog": - primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " reblogged your post."; - if (notif.status) { - const div = document.createElement('div'); - div.innerHTML = notif.status.content; - secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..." - } - break; + + sendNotificationRequest(primaryMessage, secondaryMessage); } - - sendNotificationRequest(primaryMessage, secondaryMessage); - } }); - } + } - toggleAcctMenu() { + toggleAcctMenu() { this.setState({ acctMenuOpen: !this.state.acctMenuOpen }); - } + } - toggleDrawerOnMobile() { + toggleDrawerOnMobile() { this.setState({ - drawerOpenOnMobile: !this.state.drawerOpenOnMobile - }) - } + drawerOpenOnMobile: !this.state.drawerOpenOnMobile + }); + } - toggleLogOutDialog() { + toggleLogOutDialog() { this.setState({ logOutOpen: !this.state.logOutOpen }); - } + } - searchForQuery(what: string) { - window.location.href = isDesktopApp()? "hyperspace://hyperspace/app/index.html#/search?query=" + what: "/#/search?query=" + what; + searchForQuery(what: string) { + window.location.href = isDesktopApp() + ? "hyperspace://hyperspace/app/index.html#/search?query=" + what + : "/#/search?query=" + what; window.location.reload; - } + } - logOutAndRestart() { + logOutAndRestart() { let loginData = localStorage.getItem("login"); if (loginData) { - let items = ["login", "account", "baseurl", "access_token"]; - items.forEach((entry) => { - localStorage.removeItem(entry); - }) - window.location.reload(); + let items = ["login", "account", "baseurl", "access_token"]; + items.forEach(entry => { + localStorage.removeItem(entry); + }); + window.location.reload(); } - } + } - clearBadge() { - if (!getUserDefaultBool('displayAllOnNotificationBadge')) { - this.setState({ notificationCount: 0 }); + clearBadge() { + if (!getUserDefaultBool("displayAllOnNotificationBadge")) { + this.setState({ notificationCount: 0 }); } - } + } - titlebar() { + titlebar() { const { classes } = this.props; if (isDarwinApp()) { - return ( -
- {this.state.brandName? this.state.brandName: "Hyperspace"} {this.state.developerMode? "(beta)": null} -
- ); - } else if (this.state.developerMode || process.env.NODE_ENV === "development") { - return ( -
- Careful: you're running in developer mode. -
- ); - } - } + return ( +
+ + {this.state.brandName + ? this.state.brandName + : "Hyperspace"}{" "} + {this.state.developerMode ? "(beta)" : null} + +
+ ); + } else if ( + this.state.developerMode || + process.env.NODE_ENV === "development" + ) { + return ( +
+ + Careful: you're running in developer mode. + +
+ ); + } + } - appDrawer() { + appDrawer() { const { classes } = this.props; return ( -
- -
- - - - - - - {/* +
+ +
+ + + + + + + {/* */} - this.toggleLogOutDialog()}> - - - - -
- Timelines - - - - - - - - - { - this.state.enableFederation? - - - - : - - - - - } - -
- Account - - - 0? this.state.notificationCount: ""} color="secondary"> - - - - - - - - - - -
- More - - - - - - - - - - - - - -
- ); + this.toggleLogOutDialog()} + > + + + + + + +
+ Timelines + + + + + + + + + + + + + {this.state.enableFederation ? ( + + + + + + + ) : ( + + + + + + + )} + +
+ Account + + + 0 + ? this.state.notificationCount + : "" + } + color="secondary" + > + + + + + + + + + + + + +
+ More + + + + + + + + + + + + + + + + + + + +
+ ); } - render() { - const { classes } = this.props; - return ( -
-
- {this.titlebar()} - - - - - - - {this.state.brandName? this.state.brandName: "Hyperspace"} - -
-
-
- -
- { - if (event.keyCode === 13) { - this.searchForQuery(event.currentTarget.value); - } - }} - /> -
-
-
- - - 0? this.state.notificationCount: ""} color="secondary"> - - - - - - - - - - - - - - + render() { + const { classes } = this.props; + return ( +
+
+ {this.titlebar()} + + + + + + + {this.state.brandName + ? this.state.brandName + : "Hyperspace"} + +
+
+
+ +
+ { + if (event.keyCode === 13) { + this.searchForQuery( + event.currentTarget.value + ); + } + }} + /> +
+
+
+ + + 0 + ? this.state + .notificationCount + : "" + } + color="secondary" + > + + + + + + + + + + + + + + - - -
- - - - - - - - - Edit profile - - {/* Switch account */} - this.toggleLogOutDialog()}>Log out -
- - -
- - -
+ + + +
+ this.toggleLogOutDialog()} > - {this.appDrawer()} - - - - - {this.appDrawer()} - - - -
- this.toggleLogOutDialog()} - > - Log out of {this.state.brandName? this.state.brandName: "Hyperspace"} - - - You'll need to remove {this.state.brandName? this.state.brandName: "Hyperspace"} from your list of authorized apps and log in again if you want to use {this.state.brandName? this.state.brandName: "Hyperspace"}. - - - - - - - - - - - - -
- ); - } + + Log out of{" "} + {this.state.brandName + ? this.state.brandName + : "Hyperspace"} + + + + You'll need to remove{" "} + {this.state.brandName + ? this.state.brandName + : "Hyperspace"}{" "} + from your list of authorized apps and log in again + if you want to use{" "} + {this.state.brandName + ? this.state.brandName + : "Hyperspace"} + . + + + + + + + + + + + + +
+ ); + } } export default withStyles(styles)(withSnackbar(AppLayout)); From cbb7a76218445355206ab20e33994fd215734875 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Wed, 18 Sep 2019 13:52:39 -0400 Subject: [PATCH 05/10] Run Prettier on all existing files Signed-off-by: Marquis Kurt --- src/App.styles.tsx | 41 +- src/App.tsx | 169 ++-- src/components/AppLayout/AppLayout.styles.tsx | 325 +++---- src/components/AppLayout/index.tsx | 10 +- .../Attachment/Attachment.styles.tsx | 31 +- src/components/Attachment/Attachment.tsx | 115 ++- src/components/Attachment/index.tsx | 8 +- .../ComposeMediaAttachment.styles.tsx | 33 +- .../ComposeMediaAttachment.tsx | 83 +- .../ComposeMediaAttachment/index.tsx | 8 +- src/components/EmojiPicker/index.tsx | 14 +- src/components/Post/Post.styles.tsx | 187 ++-- src/components/Post/Post.tsx | 891 ++++++++++++------ src/components/Post/PostShareMenu.tsx | 23 +- src/components/Post/index.tsx | 10 +- src/components/ThemePreview/ThemePreview.tsx | 72 +- src/components/ThemePreview/index.tsx | 4 +- src/index.tsx | 40 +- src/interfaces/overrides.tsx | 78 +- src/pages/Compose.styles.tsx | 91 +- src/pages/Compose.tsx | 622 +++++++----- src/pages/Conversation.tsx | 180 ++-- src/pages/Home.tsx | 247 +++-- src/pages/Local.tsx | 244 +++-- src/pages/Messages.tsx | 178 ++-- src/pages/Missingno.tsx | 31 +- src/pages/Notifications.tsx | 424 +++++---- src/pages/PageLayout.styles.tsx | 545 +++++------ src/pages/ProfilePage.tsx | 637 ++++++++----- src/pages/Public.tsx | 242 +++-- src/pages/Recommendations.tsx | 490 ++++++---- src/pages/Search.tsx | 349 ++++--- src/pages/Settings.tsx | 419 +++++--- src/pages/Welcome.tsx | 607 ++++++++---- src/pages/WelcomePage.styles.tsx | 137 +-- src/pages/You.tsx | 351 ++++--- src/types/Account.tsx | 8 +- src/types/Attachment.tsx | 2 +- src/types/Card.tsx | 2 +- src/types/Config.tsx | 6 +- src/types/Context.tsx | 4 +- src/types/Emojis.tsx | 2 +- src/types/Field.tsx | 2 +- src/types/HyperspaceTheme.tsx | 81 +- src/types/Instance.tsx | 2 +- src/types/Mention.tsx | 2 +- src/types/Notification.tsx | 2 +- src/types/Poll.tsx | 8 +- src/types/Relationship.tsx | 2 +- src/types/Search.tsx | 2 +- src/types/SessionData.tsx | 2 +- src/types/Status.tsx | 18 +- src/types/Tag.tsx | 2 +- src/types/Visibility.tsx | 2 +- src/utilities/accounts.tsx | 32 +- src/utilities/appbar.tsx | 4 +- src/utilities/desktop.tsx | 8 +- src/utilities/emojis.tsx | 61 +- src/utilities/login.tsx | 51 +- src/utilities/notifications.tsx | 26 +- src/utilities/settings.tsx | 58 +- src/utilities/themes.tsx | 57 +- 62 files changed, 5164 insertions(+), 3218 deletions(-) diff --git a/src/App.styles.tsx b/src/App.styles.tsx index c379a4f..c5c9a33 100644 --- a/src/App.styles.tsx +++ b/src/App.styles.tsx @@ -1,21 +1,24 @@ import { Theme, createStyles } from "@material-ui/core"; -import { isDarwinApp } from './utilities/desktop'; +import { isDarwinApp } from "./utilities/desktop"; -export const styles = (theme: Theme) => createStyles({ - root: { - width: '100%', - display: 'flex', - height: '100%', - minHeight: '100vh', - backgroundColor: isDarwinApp()? "transparent": theme.palette.background.default, - }, - content: { - marginTop: 72, - flexGrow: 1, - padding: theme.spacing.unit * 3, - [theme.breakpoints.up('md')]: { - marginLeft: 250, - marginTop: 88, - }, - }, - }); \ No newline at end of file +export const styles = (theme: Theme) => + createStyles({ + root: { + width: "100%", + display: "flex", + height: "100%", + minHeight: "100vh", + backgroundColor: isDarwinApp() + ? "transparent" + : theme.palette.background.default + }, + content: { + marginTop: 72, + flexGrow: 1, + padding: theme.spacing.unit * 3, + [theme.breakpoints.up("md")]: { + marginLeft: 250, + marginTop: 88 + } + } + }); diff --git a/src/App.tsx b/src/App.tsx index eb1dca5..fc17344 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,92 +1,105 @@ -import React, { Component } from 'react'; -import {MuiThemeProvider, CssBaseline, withStyles } from '@material-ui/core'; -import { setHyperspaceTheme, darkMode } from './utilities/themes'; -import AppLayout from './components/AppLayout'; -import {styles} from './App.styles'; -import {Route} from 'react-router-dom'; -import AboutPage from './pages/About'; -import Settings from './pages/Settings'; -import { getUserDefaultBool, getUserDefaultTheme } from './utilities/settings'; -import ProfilePage from './pages/ProfilePage'; -import HomePage from './pages/Home'; -import LocalPage from './pages/Local'; -import PublicPage from './pages/Public'; -import Conversation from './pages/Conversation'; -import NotificationsPage from './pages/Notifications'; -import SearchPage from './pages/Search'; -import Composer from './pages/Compose'; -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'; -import { isDarwinApp } from './utilities/desktop'; +import React, { Component } from "react"; +import { MuiThemeProvider, CssBaseline, withStyles } from "@material-ui/core"; +import { setHyperspaceTheme, darkMode } from "./utilities/themes"; +import AppLayout from "./components/AppLayout"; +import { styles } from "./App.styles"; +import { Route } from "react-router-dom"; +import AboutPage from "./pages/About"; +import Settings from "./pages/Settings"; +import { getUserDefaultBool, getUserDefaultTheme } from "./utilities/settings"; +import ProfilePage from "./pages/ProfilePage"; +import HomePage from "./pages/Home"; +import LocalPage from "./pages/Local"; +import PublicPage from "./pages/Public"; +import Conversation from "./pages/Conversation"; +import NotificationsPage from "./pages/Notifications"; +import SearchPage from "./pages/Search"; +import Composer from "./pages/Compose"; +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"; +import { isDarwinApp } from "./utilities/desktop"; let theme = setHyperspaceTheme(getUserDefaultTheme()); class App extends Component { + offline: any; - offline: any; + constructor(props: any) { + super(props); - constructor(props: any) { - super(props); - - this.state = { - theme: theme + this.state = { + theme: theme + }; } - } - componentWillMount() { - let newTheme = darkMode(this.state.theme, getUserDefaultBool('darkModeEnabled')); - this.setState({ theme: newTheme }); - } - - componentDidMount() { - this.removeBodyBackground() - } - - componentDidUpdate() { - this.removeBodyBackground() - } - - removeBodyBackground() { - if (isDarwinApp()) { - document.body.style.backgroundColor = "transparent"; + componentWillMount() { + let newTheme = darkMode( + this.state.theme, + getUserDefaultBool("darkModeEnabled") + ); + this.setState({ theme: newTheme }); } - } - render() { - const { classes } = this.props; + componentDidMount() { + this.removeBodyBackground(); + } - this.removeBodyBackground() - - return ( - - - -
- { userLoggedIn()? : null} - - - - - - - - - - - - - - -
+ componentDidUpdate() { + this.removeBodyBackground(); + } - - ); - } + removeBodyBackground() { + if (isDarwinApp()) { + document.body.style.backgroundColor = "transparent"; + } + } + + render() { + const { classes } = this.props; + + this.removeBodyBackground(); + + return ( + + + +
+ {userLoggedIn() ? : null} + + + + + + + + + + + + + + +
+ + ); + } } export default withStyles(styles)(withSnackbar(App)); diff --git a/src/components/AppLayout/AppLayout.styles.tsx b/src/components/AppLayout/AppLayout.styles.tsx index 7c4d125..bcbb18a 100644 --- a/src/components/AppLayout/AppLayout.styles.tsx +++ b/src/components/AppLayout/AppLayout.styles.tsx @@ -1,164 +1,171 @@ import { Theme, createStyles } from "@material-ui/core"; import { darken } from "@material-ui/core/styles/colorManipulator"; -import { isDarwinApp } from '../../utilities/desktop'; +import { isDarwinApp } from "../../utilities/desktop"; import { fade } from "@material-ui/core/styles/colorManipulator"; -export const styles = (theme: Theme) => createStyles({ - root: { - width: '100%', - display: 'flex', - }, - stickyArea: { - position: 'fixed', - width: '100%', - top: 0, - left: 0, - zIndex: 1000, - }, - titleBarRoot: { - top: 0, - left: 0, - height: 24, - width: '100%', - backgroundColor: isDarwinApp()? theme.palette.primary.main: theme.palette.primary.dark, - textAlign: 'center', - zIndex: 1000, - verticalAlign: 'middle', - WebkitUserSelect: 'none', - WebkitAppRegion: "drag", - }, - titleBarText: { - color: theme.palette.common.white, - fontSize: 12, - paddingTop: 2, - paddingBottom: 1 - }, - appBar: { - zIndex: 1000, - backgroundImage: isDarwinApp()? `linear-gradient(${theme.palette.primary.main}, ${theme.palette.primary.dark})`: undefined, - backgroundColor: theme.palette.primary.main, - borderBottomColor: darken(theme.palette.primary.dark, 0.2), - borderBottomWidth: 1, - borderBottomStyle: isDarwinApp()? "solid": "none", - boxShadow: isDarwinApp()? "none": "inherit" - }, - appBarMenuButton: { - marginLeft: -12, - marginRight: 20, - [theme.breakpoints.up('md')]: { - display: 'none' - } - }, - appBarTitle: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'block', - } - }, - appBarSearch: { - position: 'relative', - borderRadius: theme.shape.borderRadius, - backgroundColor: fade(theme.palette.common.white, 0.15), - '&:hover': { - backgroundColor: fade(theme.palette.common.white, 0.25) - }, - width: '100%', - marginLeft: 0, - marginRight: theme.spacing.unit, - [theme.breakpoints.up('md')]: { - marginLeft: theme.spacing.unit * 6, - width: '50%' - } - }, - appBarSearchIcon: { - width: theme.spacing.unit * 9, - height: '100%', - position: 'absolute', - pointerEvents: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center' - }, - appBarSearchInputRoot: { - color: 'inherit', - width: '100%' - }, - appBarSearchInputInput: { - paddingTop: theme.spacing.unit, - paddingBottom: theme.spacing.unit, - paddingLeft: theme.spacing.unit * 10, - paddingRight: theme.spacing.unit, - transition: theme.transitions.create('width'), - width: '100%', - }, - appBarFlexGrow: { - flexGrow: 1 - }, - appBarActionButtons: { - display: 'none', - [theme.breakpoints.up('sm')]: { - display: 'flex', - }, - }, - appBarAcctMenuIcon: { - backgroundColor: theme.palette.primary.dark - }, - acctMenu: { - - }, - drawer: { - [theme.breakpoints.up('sm')]: { - width: 250, - flexShrink: 0 - }, - zIndex: 1, - }, - drawerPaper: { - width: 250, - zIndex: 1 - }, - drawerPaperWithAppBar: { - width: 250, - zIndex: -1, - marginTop: 64, - backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper - }, - drawerPaperWithTitleAndAppBar: { - width: 250, - zIndex: -1, - marginTop: 88, - backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper - }, - drawerDisplayMobile: { - [theme.breakpoints.up('md')]: { - display: 'none' - } - }, - toolbar: theme.mixins.toolbar, - sectionDesktop: { - display: 'none', - [theme.breakpoints.up('md')]: { - display: 'flex', - }, - }, - sectionMobile: { - display: 'flex', - [theme.breakpoints.up('md')]: { - display: 'none', - }, - }, - content: { - padding: theme.spacing.unit * 3, - [theme.breakpoints.up('md')]: { - marginLeft: 250 - }, - overflowY: 'auto', - }, - composeButton: { - position: "fixed", - bottom: theme.spacing.unit * 2, - right: theme.spacing.unit * 2, - zIndex: 50 - }, - }); \ No newline at end of file +export const styles = (theme: Theme) => + createStyles({ + root: { + width: "100%", + display: "flex" + }, + stickyArea: { + position: "fixed", + width: "100%", + top: 0, + left: 0, + zIndex: 1000 + }, + titleBarRoot: { + top: 0, + left: 0, + height: 24, + width: "100%", + backgroundColor: isDarwinApp() + ? theme.palette.primary.main + : theme.palette.primary.dark, + textAlign: "center", + zIndex: 1000, + verticalAlign: "middle", + WebkitUserSelect: "none", + WebkitAppRegion: "drag" + }, + titleBarText: { + color: theme.palette.common.white, + fontSize: 12, + paddingTop: 2, + paddingBottom: 1 + }, + appBar: { + zIndex: 1000, + backgroundImage: isDarwinApp() + ? `linear-gradient(${theme.palette.primary.main}, ${theme.palette.primary.dark})` + : undefined, + backgroundColor: theme.palette.primary.main, + borderBottomColor: darken(theme.palette.primary.dark, 0.2), + borderBottomWidth: 1, + borderBottomStyle: isDarwinApp() ? "solid" : "none", + boxShadow: isDarwinApp() ? "none" : "inherit" + }, + appBarMenuButton: { + marginLeft: -12, + marginRight: 20, + [theme.breakpoints.up("md")]: { + display: "none" + } + }, + appBarTitle: { + display: "none", + [theme.breakpoints.up("md")]: { + display: "block" + } + }, + appBarSearch: { + position: "relative", + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + "&:hover": { + backgroundColor: fade(theme.palette.common.white, 0.25) + }, + width: "100%", + marginLeft: 0, + marginRight: theme.spacing.unit, + [theme.breakpoints.up("md")]: { + marginLeft: theme.spacing.unit * 6, + width: "50%" + } + }, + appBarSearchIcon: { + width: theme.spacing.unit * 9, + height: "100%", + position: "absolute", + pointerEvents: "none", + display: "flex", + alignItems: "center", + justifyContent: "center" + }, + appBarSearchInputRoot: { + color: "inherit", + width: "100%" + }, + appBarSearchInputInput: { + paddingTop: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + paddingRight: theme.spacing.unit, + transition: theme.transitions.create("width"), + width: "100%" + }, + appBarFlexGrow: { + flexGrow: 1 + }, + appBarActionButtons: { + display: "none", + [theme.breakpoints.up("sm")]: { + display: "flex" + } + }, + appBarAcctMenuIcon: { + backgroundColor: theme.palette.primary.dark + }, + acctMenu: {}, + drawer: { + [theme.breakpoints.up("sm")]: { + width: 250, + flexShrink: 0 + }, + zIndex: 1 + }, + drawerPaper: { + width: 250, + zIndex: 1 + }, + drawerPaperWithAppBar: { + width: 250, + zIndex: -1, + marginTop: 64, + backgroundColor: isDarwinApp() + ? "transparent" + : theme.palette.background.paper + }, + drawerPaperWithTitleAndAppBar: { + width: 250, + zIndex: -1, + marginTop: 88, + backgroundColor: isDarwinApp() + ? "transparent" + : theme.palette.background.paper + }, + drawerDisplayMobile: { + [theme.breakpoints.up("md")]: { + display: "none" + } + }, + toolbar: theme.mixins.toolbar, + sectionDesktop: { + display: "none", + [theme.breakpoints.up("md")]: { + display: "flex" + } + }, + sectionMobile: { + display: "flex", + [theme.breakpoints.up("md")]: { + display: "none" + } + }, + content: { + padding: theme.spacing.unit * 3, + [theme.breakpoints.up("md")]: { + marginLeft: 250 + }, + overflowY: "auto" + }, + composeButton: { + position: "fixed", + bottom: theme.spacing.unit * 2, + right: theme.spacing.unit * 2, + zIndex: 50 + } + }); diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx index eea680e..865b52a 100644 --- a/src/components/AppLayout/index.tsx +++ b/src/components/AppLayout/index.tsx @@ -1,6 +1,6 @@ -import { AppLayout } from './AppLayout'; -import { withStyles } from '@material-ui/core'; -import { styles } from './AppLayout.styles'; -import {withSnackbar} from 'notistack'; +import { AppLayout } from "./AppLayout"; +import { withStyles } from "@material-ui/core"; +import { styles } from "./AppLayout.styles"; +import { withSnackbar } from "notistack"; -export default withStyles(styles)(withSnackbar(AppLayout)); \ No newline at end of file +export default withStyles(styles)(withSnackbar(AppLayout)); diff --git a/src/components/Attachment/Attachment.styles.tsx b/src/components/Attachment/Attachment.styles.tsx index ad83d5b..d4aef9d 100644 --- a/src/components/Attachment/Attachment.styles.tsx +++ b/src/components/Attachment/Attachment.styles.tsx @@ -1,16 +1,17 @@ -import { Theme, createStyles } from '@material-ui/core'; +import { Theme, createStyles } from "@material-ui/core"; -export const styles = (theme: Theme) => createStyles({ - mediaContainer: { - padding: theme.spacing.unit * 2, - }, - mediaObject: { - width: '100%', - height: '100%' - }, - mediaSlide: { - backgroundColor: theme.palette.primary.light, - width: '100%', - height: 'auto' - } -}); \ No newline at end of file +export const styles = (theme: Theme) => + createStyles({ + mediaContainer: { + padding: theme.spacing.unit * 2 + }, + mediaObject: { + width: "100%", + height: "100%" + }, + mediaSlide: { + backgroundColor: theme.palette.primary.light, + width: "100%", + height: "auto" + } + }); diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx index a5d830e..348cc2e 100644 --- a/src/components/Attachment/Attachment.tsx +++ b/src/components/Attachment/Attachment.tsx @@ -1,8 +1,13 @@ -import React, { Component } from 'react'; -import {withStyles, Typography, MobileStepper, Button} from '@material-ui/core'; -import { styles } from './Attachment.styles'; -import { Attachment } from '../../types/Attachment'; -import SwipeableViews from 'react-swipeable-views'; +import React, { Component } from "react"; +import { + withStyles, + Typography, + MobileStepper, + Button +} from "@material-ui/core"; +import { styles } from "./Attachment.styles"; +import { Attachment } from "../../types/Attachment"; +import SwipeableViews from "react-swipeable-views"; interface IAttachmentProps { media: [Attachment]; @@ -15,7 +20,10 @@ interface IAttachmentState { attachments: [Attachment]; } -class AttachmentComponent extends Component { +class AttachmentComponent extends Component< + IAttachmentProps, + IAttachmentState +> { constructor(props: IAttachmentProps) { super(props); @@ -23,7 +31,7 @@ class AttachmentComponent extends Component attachments: this.props.media, totalSteps: this.props.media.length, currentStep: 0 - } + }; } moveBack() { @@ -40,45 +48,63 @@ class AttachmentComponent extends Component nextStep = this.state.totalSteps; } this.setState({ currentStep: nextStep }); - } - handleStepChange(currentStep: number) { - this.setState({ - currentStep - }) + handleStepChange(currentStep: number) { + this.setState({ + currentStep + }); } getSlide(slide: Attachment) { - const {classes} = this.props; + const { classes } = this.props; switch (slide.type) { - case 'image': - return {slide.description? - case 'video': - return