Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply workspace page design from Figma #418

Merged
merged 2 commits into from
Nov 30, 2024
Merged

Apply workspace page design from Figma #418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68e85b8
Change layout in workspace page
devleejb Nov 27, 2024
9760f0d
Apply `DocumentCard` design
devleejb Nov 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/favicon-512x512.png" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Yorkie Codepair" />
<title>CodePair</title>
Expand Down
5 changes: 1 addition & 4 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import { Box, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
import * as Sentry from "@sentry/react";
import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
Expand Down Expand Up @@ -67,6 +63,7 @@ function App() {
button: {
textTransform: "none",
},
fontFamily: `"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;`,
},
palette: {
mode: config.theme == "default" ? defaultMode : config.theme,
Expand Down
83 changes: 65 additions & 18 deletions frontend/src/components/cards/DocumentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,55 @@
import AccessTimeIcon from "@mui/icons-material/AccessTime";
import { Card, CardActionArea, CardContent, Stack, Typography } from "@mui/material";
import moment from "moment";
import { useNavigate, useParams } from "react-router-dom";
import { Paper, Stack, Typography } from "@mui/material";
import { Link, useParams } from "react-router-dom";
import { Document } from "../../hooks/api/types/document.d";
import moment from "moment";
import AccessTimeIcon from "@mui/icons-material/AccessTime";

interface DocumentCardProps {
document: Document;
}

function DocumentCard(props: DocumentCardProps) {
const { document } = props;
const navigate = useNavigate();
const params = useParams();

const handleToDocument = () => {
navigate(`/${params.workspaceSlug}/${document.id}`);
};

return (
<Card sx={{ width: "100%" }}>
<CardActionArea onClick={handleToDocument}>
<CardContent>
<Typography variant="h5" component="div" noWrap>
{document.title}
<Link
to={`/${params.workspaceSlug}/${document.id}`}
style={{
textDecoration: "none",
}}
>
<Paper
variant="outlined"
sx={{
px: 3,
py: 2,
}}
>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="primary">
{moment(document.createdAt).format("D MMM YYYY")}
</Typography>

{/* TODO(devleejb): When the document deletion is implemented, uncomment the following code */}
{/* <IconButton size="small" sx={{ p: 0 }}>
<MoreVertIcon fontSize="small" />
</IconButton> */}
</Stack>
<Typography variant="h6" component="div" noWrap fontWeight={600}>
{document.title}
</Typography>
<Stack direction="row" mt={1} gap={1} flexWrap="wrap" height={56}>
{/* TODO(devleejb): When the tag sytem is implemented, uncomment the following code */}
{/* {new Array(4).fill(0).map((_, index) => (
<Chip
label={`Tag ${index + 1}`}
sx={{ borderRadius: "4px", backgroundColor: "#E6F2FC" }}
size="small"
/>
))} */}
</Stack>
<Stack direction="row" alignItems="end" justifyContent="space-between" mt={2}>
<Stack direction="row" alignItems="center" gap={1}>
<AccessTimeIcon
fontSize="small"
Expand All @@ -32,12 +58,33 @@ function DocumentCard(props: DocumentCardProps) {
}}
/>
<Typography variant="body2" color="text.secondary" noWrap>
Changed {moment(document.updatedAt).fromNow()}
{moment(document.updatedAt).format("D MMM YYYY")}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
{/* TODO(devleejb): When the fetching presemces from yorkie is implemented, uncomment the following code */}
{/* <AvatarGroup
total={6}
max={5}
sx={{
"& .MuiAvatar-root": {
width: 32,
height: 32,
},
}}
>
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
<Avatar sx={{ width: 32, height: 32 }} alt="Remy Sharp" />
</AvatarGroup> */}
</Stack>
</Paper>
</Link>
);
}

Expand Down
12 changes: 7 additions & 5 deletions frontend/src/components/layouts/WorkspaceLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,18 @@ function WorkspaceLayout() {
const { drawerOpen } = useSelector(selectConfig);

return (
<Box sx={{ display: "flex" }}>
<Stack gap={0}>
<WorkspaceHeader />
<Stack direction="row" sx={{ width: "100%" }}>
<Stack direction="row">
<WorkspaceDrawer open={drawerOpen} />
<Box flexGrow={1} padding={3}>
<Box flexGrow={1} maxWidth="100%" px={2}>
<WorkspaceDrawerHeader />
<Outlet />
<Box mx="auto" maxWidth={1440} width="100%">
<Outlet />
</Box>
</Box>
</Stack>
</Box>
</Stack>
);
}

Expand Down
21 changes: 20 additions & 1 deletion frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,26 @@
* {
font-family:
"Pretendard Variable",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
"Helvetica Neue",
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
"Malgun Gothic",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
}

body {
margin: 0;
min-height: 100vh;
overflow: hidden;
/* overflow: hidden; */
}

#yorkie-intelligence-footer .wmde-markdown {
Expand Down
121 changes: 74 additions & 47 deletions frontend/src/pages/workspace/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,30 @@ import {
useGetWorkspaceDocumentListQuery,
} from "../../hooks/api/workspaceDocument";
import { useGetWorkspaceQuery } from "../../hooks/api/workspace";
import { Backdrop, Box, Button, CircularProgress, Grid, Stack, Typography } from "@mui/material";
import {
Backdrop,
Box,
Button,
CircularProgress,
Grid2,
Paper,
Stack,
Tab,
Tabs,
Typography,
} from "@mui/material";
import DocumentCard from "../../components/cards/DocumentCard";
import { useMemo, useState } from "react";
import { Document } from "../../hooks/api/types/document.d";
import InfiniteScroll from "react-infinite-scroller";
import CreateModal from "../../components/modals/CreateModal";
import AddIcon from "@mui/icons-material/Add";

const tabs = [
"BOARD",
// "TABLE"
];

function WorkspaceIndex() {
const params = useParams();
const navigate = useNavigate();
Expand Down Expand Up @@ -51,54 +67,65 @@ function WorkspaceIndex() {
};

return (
<Stack gap={2}>
<Stack direction="row" justifyContent="space-between" alignItems="center" px={2}>
<Typography variant="h5" fontWeight="bold">
{workspace?.title}{" "}
<Typography component="span" variant="inherit" color="primary">
{documentPageList?.pages[0].totalLength}
</Typography>
</Typography>
<Button
variant="contained"
startIcon={<AddIcon />}
onClick={handleCreateDocumentModalOpen}
>
New Note
</Button>
</Stack>
<Stack
style={{
maxHeight: "calc(100vh - 144px)",
overflow: "auto",
<Stack position="relative" pb={6}>
<Paper
elevation={0}
sx={{
position: "sticky",
top: 64,
left: 0,
width: "100%",
pb: 4,
zIndex: 3,
}}
>
<InfiniteScroll
pageStart={0}
loadMore={() => fetchNextPage()}
hasMore={hasNextPage}
loader={
<Stack className="loader" key={0} alignItems="center">
<CircularProgress size={20} />
</Stack>
}
useWindow={false}
>
<Box p={2} width={1}>
<Grid
container
spacing={{ xs: 2, md: 3 }}
columns={{ xs: 4, sm: 8, md: 12, lg: 12 }}
>
{documentList.map((document) => (
<Grid key={document.id} item xs={4} sm={4} md={4} lg={3}>
<DocumentCard document={document} />
</Grid>
))}
</Grid>
</Box>
</InfiniteScroll>
</Stack>
<Stack direction="row" justifyContent="space-between" alignItems="center" pt={6}>
<Typography variant="h5" fontWeight="bold">
{workspace?.title}{" "}
<Typography component="span" variant="inherit" color="primary">
{documentPageList?.pages[0].totalLength}
</Typography>
</Typography>
<Button
variant="contained"
startIcon={<AddIcon />}
onClick={handleCreateDocumentModalOpen}
>
New Note
</Button>
</Stack>
</Paper>
<Box sx={{ borderBottom: 1, borderColor: "divider" }} mb={4}>
<Tabs value={tabs[0]}>
{tabs.map((tab) => (
<Tab key={tab} label={tab} value={tab} />
))}
</Tabs>
</Box>
devleejb marked this conversation as resolved.
Show resolved Hide resolved
<InfiniteScroll
pageStart={0}
loadMore={() => fetchNextPage()}
hasMore={hasNextPage}
loader={
<Stack className="loader" key={0} alignItems="center">
<CircularProgress size={20} />
</Stack>
}
>
<Box width={1}>
<Grid2
container
spacing={{ xs: 2, md: 3 }}
columns={{ xs: 4, sm: 8, md: 12, lg: 12 }}
>
{documentList.map((document) => (
<Grid2 key={document.id} size={4}>
<DocumentCard document={document} />
</Grid2>
))}
</Grid2>
</Box>
</InfiniteScroll>
<CreateModal
open={createDocumentModalOpen}
title="Note"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/workspace/member/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function MemberIndex() {

return (
<Container maxWidth="lg">
<Stack gap={4}>
<Stack gap={4} py={6}>
<Stack direction="row" justifyContent="space-between" alignItems="center" px={2}>
<Typography variant="h5" fontWeight="bold">
{workspace?.title}{" "}
Expand Down