add popup for mobile users

This commit is contained in:
Tao Bojlen 2018-09-04 22:56:49 +02:00
parent 34bd1bf63b
commit 6da0ae9beb
2 changed files with 55 additions and 2 deletions

View file

@ -2,11 +2,13 @@ import * as React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { NonIdealState, Spinner } from '@blueprintjs/core'; import { Button, Classes, Dialog, NonIdealState, Spinner } from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { Graph } from './components/Graph'; import { Graph } from './components/Graph';
import { Nav } from './components/Nav'; import { Nav } from './components/Nav';
import { Sidebar } from './components/Sidebar'; import { Sidebar } from './components/Sidebar';
import { DESKTOP_WIDTH_THRESHOLD } from './constants';
import { fetchGraph, fetchInstances } from './redux/actions'; import { fetchGraph, fetchInstances } from './redux/actions';
import { IAppState, IGraph, IInstance } from './redux/types'; import { IAppState, IGraph, IInstance } from './redux/types';
@ -18,7 +20,16 @@ interface IAppProps {
fetchInstances: () => void; fetchInstances: () => void;
fetchGraph: () => void; fetchGraph: () => void;
} }
class AppImpl extends React.Component<IAppProps> { interface IAppLocalState {
mobileDialogOpen: boolean;
}
class AppImpl extends React.Component<IAppProps, IAppLocalState> {
constructor(props: IAppProps) {
super(props);
this.state = { mobileDialogOpen: false };
}
public render() { public render() {
let body = <div />; let body = <div />;
if (this.props.isLoadingInstances || this.props.isLoadingGraph) { if (this.props.isLoadingInstances || this.props.isLoadingGraph) {
@ -30,11 +41,15 @@ class AppImpl extends React.Component<IAppProps> {
<div className="App bp3-dark"> <div className="App bp3-dark">
<Nav /> <Nav />
{body} {body}
{this.renderMobileDialog()}
</div> </div>
); );
} }
public componentDidMount() { public componentDidMount() {
if (window.innerWidth < DESKTOP_WIDTH_THRESHOLD) {
this.handleMobileDialogOpen();
}
this.load(); this.load();
} }
@ -68,6 +83,42 @@ class AppImpl extends React.Component<IAppProps> {
/> />
) )
} }
private renderMobileDialog = () => {
return (
<Dialog
icon={IconNames.DESKTOP}
title="Desktop-optimized site"
onClose={this.handleMobileDialogClose}
isOpen={this.state.mobileDialogOpen}
className={Classes.DARK + ' fediverse-about-dialog'}
>
<div className={Classes.DIALOG_BODY}>
<p className={Classes.RUNNING_TEXT}>
fediverse.space is optimized for desktop computers. Feel free to check it out on your phone
(ideally in landscape mode) but for best results, open it on a computer.
</p>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
icon={IconNames.THUMBS_UP}
text="OK!"
onClick={this.handleMobileDialogClose}
/>
</div>
</div>
</Dialog>
);
}
private handleMobileDialogOpen = () => {
this.setState({ mobileDialogOpen: true });
}
private handleMobileDialogClose = () => {
this.setState({ mobileDialogOpen: false });
}
} }
const mapStateToProps = (state: IAppState) => ({ const mapStateToProps = (state: IAppState) => ({

View file

@ -0,0 +1,2 @@
/* Screen widths less than this will be treated as mobile */
export const DESKTOP_WIDTH_THRESHOLD = 800;