Skip to content

Commit 30f3143

Browse files
f0sself0ssel
committed
move to navbar
1 parent 765e15a commit 30f3143

File tree

3 files changed

+59
-59
lines changed

3 files changed

+59
-59
lines changed

‎site/src/components/NavbarView/NavbarView.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import List from "@material-ui/core/List"
44
import ListItem from "@material-ui/core/ListItem"
55
import { makeStyles } from "@material-ui/core/styles"
66
import MenuIcon from "@material-ui/icons/Menu"
7+
import { Stack } from "components/Stack/Stack"
8+
import { WorkspaceQuota } from "components/WorkspaceQuota/WorkspaceQuota"
79
import { useState } from "react"
810
import { NavLink, useLocation } from "react-router-dom"
911
import { colors } from "theme/colors"
@@ -105,12 +107,26 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
105107
{user && <UserDropdown user={user} onSignOut={onSignOut} />}
106108
</div>
107109
</div>
110+
<Stack direction="row" className={styles.profileButton}>
111+
<div className={styles.quota} >
112+
<WorkspaceQuota loading={false} count={1} limit={3}/>
113+
</div>
114+
115+
<div className={styles.profileButton}>
116+
{user && <UserDropdown user={user} onSignOut={onSignOut} />}
117+
</div>
118+
</Stack>
108119
</nav>
109120
)
110121
}
111122

112123
const useStyles = makeStyles((theme) => ({
113124
root: {
125+
position: "relative",
126+
display: "flex",
127+
justifyContent: "space-between",
128+
alignItems: "center",
129+
alignContent: 'center',
114130
height: navHeight,
115131
background: theme.palette.background.paper,
116132
"@media (display-mode: standalone)": {
@@ -148,6 +164,12 @@ const useStyles = makeStyles((theme) => ({
148164
display: "flex",
149165
},
150166
},
167+
quota: {
168+
[theme.breakpoints.up("md")]: {
169+
marginLeft: "auto",
170+
},
171+
paddingTop: theme.spacing(1),
172+
},
151173
profileButton: {
152174
[theme.breakpoints.up("md")]: {
153175
marginLeft: "auto",

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
3-
import { WorkspaceQuota } from "components/WorkspaceQuota/WorkspaceQuota"
43
import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
54
import { FC } from "react"
65
import { useNavigate } from "react-router-dom"

‎site/src/components/WorkspaceQuota/WorkspaceQuota.tsx

Lines changed: 37 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { FC } from "react"
33
import { makeStyles } from "@material-ui/core/styles"
44
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
55
import Skeleton from '@material-ui/lab/Skeleton';
6+
import { Stack } from 'components/Stack/Stack';
7+
import Box from "@material-ui/core/Box";
68

79
export interface WorkspaceQuotaProps {
810
loading: boolean
@@ -15,79 +17,56 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ loading, count, limit
1517

1618
const safeCount = count ? count : 0;
1719
const safeLimit = limit ? limit : 100;
18-
const value = Math.round((safeCount / safeLimit) * 100)
20+
let value = Math.round((safeCount / safeLimit) * 100)
21+
// we don't want to round down to zero if the count is > 0
22+
if (safeCount > 0 && value === 0) {
23+
value = 1
24+
}
1925
const limitLanguage = limit ? limit : `∞`
2026

2127
return (
22-
<div className={styles.root}>
23-
<span>
28+
<Box>
29+
<Stack spacing={1} className={styles.schedule}>
2430
{loading ? (
25-
<div className={styles.item}>
26-
<div className={styles.quotaBar}>
27-
<LinearProgress
28-
value={value}
29-
color="primary"
30-
/>
31-
</div>
32-
<div className={styles.quotaLabel}>
33-
<Skeleton />
34-
</div>
35-
<div className={styles.quotaLabel}>
36-
FILLER TEXT IDK HOW CSS WORKS
37-
</div>
31+
<>
32+
<LinearProgress
33+
value={value}
34+
color="primary"
35+
/>
36+
<div className={styles.scheduleLabel}>
37+
<Skeleton className={styles.skeleton}/>
3838
</div>
39-
) : (
40-
<div className={styles.item}>
41-
<div className={styles.quotaBar}>
42-
<LinearProgress
43-
value={value}
44-
variant="determinate"
45-
color="primary"
46-
/>
47-
</div>
48-
<div className={styles.quotaLabel}>
49-
{safeCount} of {limitLanguage} workspaces used
50-
</div>
39+
</>
40+
) : (
41+
<>
42+
<LinearProgress
43+
value={value}
44+
variant="determinate"
45+
color="primary"
46+
/>
47+
<div className={styles.scheduleLabel}>
48+
{safeCount} of {limitLanguage} workspaces used
5149
</div>
52-
)}
53-
</span>
54-
</div>
50+
</>
51+
)}
52+
</Stack>
53+
</Box>
5554
)
5655
}
5756

5857
const useStyles = makeStyles((theme) => ({
59-
root: {
60-
paddingLeft: theme.spacing(2),
61-
paddingRight: theme.spacing(2),
62-
borderRadius: theme.shape.borderRadius,
63-
border: `1px solid ${theme.palette.divider}`,
64-
display: "flex",
65-
alignItems: "center",
66-
color: theme.palette.text.secondary,
58+
schedule: {
6759
fontFamily: MONOSPACE_FONT_FAMILY,
68-
margin: "0px",
69-
[theme.breakpoints.down("sm")]: {
70-
display: "block",
71-
},
72-
},
73-
item: {
74-
minWidth: "16%",
75-
padding: theme.spacing(2),
76-
},
77-
quotaBar: {
78-
fontSize: 12,
79-
textTransform: "uppercase",
80-
display: "block",
81-
fontWeight: 600,
82-
wordWrap: "break-word",
83-
paddingTop: theme.spacing(0.5),
60+
display: 'inline-flex',
8461
},
85-
quotaLabel: {
62+
scheduleLabel: {
8663
fontSize: 12,
8764
textTransform: "uppercase",
8865
display: "block",
8966
fontWeight: 600,
90-
wordWrap: "break-word",
91-
paddingTop: theme.spacing(0.5),
67+
color: theme.palette.text.secondary,
9268
},
69+
skeleton: {
70+
minWidth: "150px",
71+
}
9372
}))

0 commit comments

Comments
 (0)