Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

add HomeWelcomePrompt

Browse Source
This commit is contained in:
Sidney Alcantara
2021-09-01 17:01:56 +10:00
parent 4674262172
commit 2bfbd34dcc
2 changed files with 109 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/HomeWelcomePrompt.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { Zoom, Stack, Typography } from "@material-ui/core";
export default function HomeWelcomePrompt() {
return (
<Zoom in style={{ transformOrigin: `${320 - 52}px ${320 - 52}px` }}>
<Stack
justifyContent="center"
sx={{
bgcolor: "primary.main",
color: "primary.contrastText",
boxShadow: 24,
width: 320,
height: 320,
p: 8,
pl: 9,
borderRadius: "50% 50% 0 50%",
position: "fixed",
bottom: 0,
right: 0,
}}
>
<Typography variant="h5" component="h1" gutterBottom>
Welcome!
<br />
Create a table to get started.
</Typography>
<Typography>
Tables connect to your Firestore collections and display their data.
</Typography>
</Stack>
</Zoom>
);
}

125
src/pages/Home.tsx
View File

@@ -14,6 +14,7 @@ import {
} from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import AddTableIcon from "assets/icons/AddTable";
import SettingsIcon from "@material-ui/icons/Settings";
import EditIcon from "@material-ui/icons/Edit";
import Favorite from "@material-ui/icons/Favorite";
@@ -35,6 +36,8 @@ import ProjectSettings from "components/ProjectSettings";
import EmptyState from "components/EmptyState";
import WIKI_LINKS from "constants/wikiLinks";
import BuilderInstaller from "../components/BuilderInstaller";
import HomeWelcomePrompt from "components/HomeWelcomePrompt";
const useStyles = makeStyles((theme) =>
createStyles({
"@global": {
@@ -240,72 +243,77 @@ export default function HomePage() {
handleCreateTable={handleCreateTable}
>
<main className={classes.root}>
<Container>
{favs.length !== 0 && (
<section id="favorites" className={classes.section}>
<Typography
variant="h6"
component="h1"
className={classes.sectionHeader}
>
Favorites
</Typography>
<Divider className={classes.divider} />
<Grid
container
spacing={4}
justifyContent="flex-start"
className={classes.cardGrid}
>
{favs.map((table) => (
<TableCard key={table.collection} table={table} />
))}
</Grid>
</section>
)}
{sections &&
Object.keys(sections).map((sectionName) => (
<section
key={sectionName}
id={sectionName}
className={classes.section}
>
{sections && Object.keys(sections).length > 0 ? (
<Container>
{favs.length !== 0 && (
<section id="favorites" className={classes.section}>
<Typography
variant="h6"
component="h1"
className={classes.sectionHeader}
>
{sectionName === "undefined" ? "Other" : sectionName}
Favorites
</Typography>
<Divider className={classes.divider} />
<Grid
container
spacing={4}
justifyContent="flex-start"
className={classes.cardGrid}
>
{sections[sectionName].map((table, i) => (
<TableCard key={`${i}-${table.collection}`} table={table} />
{favs.map((table) => (
<TableCard key={table.collection} table={table} />
))}
</Grid>
</section>
))}
)}
<section className={classes.section}>
<Tooltip title="Create a table">
<Fab
className={classes.fab}
color="secondary"
aria-label="Create table"
onClick={handleCreateTable}
>
<AddIcon />
</Fab>
</Tooltip>
<Tooltip title="Configure Rowy">
{sections &&
Object.keys(sections).length > 0 &&
Object.keys(sections).map((sectionName) => (
<section
key={sectionName}
id={sectionName}
className={classes.section}
>
<Typography
variant="h6"
component="h1"
className={classes.sectionHeader}
>
{sectionName === "undefined" ? "Other" : sectionName}
</Typography>
<Divider className={classes.divider} />
<Grid
container
spacing={4}
justifyContent="flex-start"
className={classes.cardGrid}
>
{sections[sectionName].map((table, i) => (
<TableCard
key={`${i}-${table.collection}`}
table={table}
/>
))}
</Grid>
</section>
))}
<section className={classes.section}>
<Tooltip title="Create Table">
<Fab
className={classes.fab}
color="secondary"
aria-label="Create table"
onClick={handleCreateTable}
>
<AddIcon />
</Fab>
</Tooltip>
{/* <Tooltip title="Configure Rowy">
<Fab
className={classes.configFab}
color="secondary"
@@ -314,9 +322,22 @@ export default function HomePage() {
>
<SettingsIcon />
</Fab>
</Tooltip>
</section>
</Container>
</Tooltip> */}
</section>
</Container>
) : (
<Container>
<HomeWelcomePrompt />
<Fab
className={classes.fab}
color="secondary"
aria-label="Create table"
onClick={handleCreateTable}
>
<AddIcon />
</Fab>
</Container>
)}
</main>
<TableSettingsDialog