Skip to content

Commit fa6c8c3

Browse files
bryphe-coderbryphe-coder
committed
More prototyping
1 parent a512f16 commit fa6c8c3

File tree

10 files changed

+213
-15
lines changed

10 files changed

+213
-15
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"devDependencies": {
1919
"@material-ui/core": "4.9.4",
2020
"@material-ui/icons": "4.5.1",
21-
"@material-ui/lab": "4.0.0-alpha.42",
21+
"@material-ui/lab": "4.0.0-alpha.60",
2222
"@testing-library/react": "12.1.2",
2323
"@types/express": "4.17.13",
2424
"@types/jest": "27.4.0",

‎site/components/Workspace/Workspace.tsx

Lines changed: 180 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Paper from "@material-ui/core/Paper"
22
import { makeStyles } from "@material-ui/core/styles"
3+
import Typography from "@material-ui/core/Typography"
34
import React from "react"
45

56
import * as API from "../../api"
@@ -8,19 +9,187 @@ export interface WorkspaceProps {
89
workspace: API.Workspace
910
}
1011

12+
const useStatusStyles = makeStyles((theme) => {
13+
14+
const common = {
15+
width: theme.spacing(1),
16+
height: theme.spacing(1),
17+
borderRadius: "100%",
18+
backgroundColor: theme.palette.action.disabled,
19+
transition: "background-color 200ms ease",
20+
};
21+
22+
return {
23+
inactive: common,
24+
active: {
25+
...common,
26+
backgroundColor: theme.palette.primary.main,
27+
}
28+
}
29+
})
30+
31+
/**
32+
* A component that displays the Dev URL indicator. The indicator status represents
33+
* loading, online, offline, or error.
34+
*/
35+
export const StatusIndicator: React.FC<{ status: ResourceStatus }> = ({ status }) => {
36+
const styles = useStatusStyles()
37+
38+
const className = status === "active" ? styles.active : styles.inactive
39+
return (
40+
<div className={className} />
41+
)
42+
}
43+
44+
45+
type ResourceStatus = "active" | "inactive"
46+
47+
export interface ResourceRowProps {
48+
name: string
49+
icon: string
50+
//href: string
51+
status: ResourceStatus
52+
}
53+
54+
const ResourceIconSize = 20
55+
56+
export const ResourceRow: React.FC<ResourceRowProps> = ({ icon, /*href,*/ name, status }) => {
57+
const styles = useResourceRowStyles()
58+
59+
return <div className={styles.root}>
60+
<div className={styles.iconContainer}>
61+
<img src={icon} height={ResourceIconSize} width={ResourceIconSize} />
62+
</div>
63+
<div className={styles.nameContainer}>
64+
{name}
65+
</div>
66+
<div className={styles.statusContainer}>
67+
<StatusIndicator status={status} />
68+
</div>
69+
</div>
70+
}
71+
72+
const useResourceRowStyles = makeStyles((theme) => ({
73+
root: {
74+
display: "flex",
75+
flexDirection: "row",
76+
justifyContent: "center",
77+
alignItems: "center",
78+
},
79+
iconContainer: {
80+
width: ResourceIconSize + theme.spacing(1),
81+
height: ResourceIconSize + theme.spacing(1),
82+
display: "flex",
83+
justifyContent: "center",
84+
alignItems: "center",
85+
flex: 0,
86+
},
87+
nameContainer: {
88+
margin: theme.spacing(1),
89+
paddingLeft: theme.spacing(1),
90+
flex: 1,
91+
width: "100%",
92+
},
93+
statusContainer: {
94+
width: 24,
95+
height: 24,
96+
flex: 0,
97+
display: "flex",
98+
justifyContent: "center",
99+
alignItems: "center",
100+
}
101+
}))
102+
103+
export const Title: React.FC = ({ children }) => {
104+
const styles = useTitleStyles();
105+
106+
return <div className={styles.header}>
107+
<Typography variant="h6">{children}</Typography>
108+
</div>
109+
}
110+
111+
const useTitleStyles = makeStyles((theme) => ({
112+
header: {
113+
alignItems: "center",
114+
borderBottom: `1px solid ${theme.palette.divider}`,
115+
display: "flex",
116+
height: theme.spacing(6),
117+
justifyContent: "space-between",
118+
marginBottom: theme.spacing(2),
119+
marginTop: -theme.spacing(1),
120+
paddingBottom: theme.spacing(1),
121+
paddingLeft: Constants.CardPadding + theme.spacing(1),
122+
paddingRight: Constants.CardPadding / 2,
123+
},
124+
}))
125+
126+
import Timeline from "@material-ui/lab/Timeline"
127+
import TimelineItem from '@material-ui/lab/TimelineItem';
128+
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
129+
import TimelineConnector from '@material-ui/lab/TimelineConnector';
130+
import TimelineContent from '@material-ui/lab/TimelineContent';
131+
import TimelineDot from '@material-ui/lab/TimelineDot';
132+
133+
export const WorkspaceTimeline: React.FC = () => {
134+
return <Timeline>
135+
<TimelineItem>
136+
<TimelineSeparator>
137+
<TimelineDot />
138+
<TimelineConnector />
139+
</TimelineSeparator>
140+
<TimelineContent>Eat</TimelineContent>
141+
</TimelineItem>
142+
<TimelineItem>
143+
<TimelineSeparator>
144+
<TimelineDot />
145+
<TimelineConnector />
146+
</TimelineSeparator>
147+
<TimelineContent>Code</TimelineContent>
148+
</TimelineItem>
149+
<TimelineItem>
150+
<TimelineSeparator>
151+
<TimelineDot />
152+
</TimelineSeparator>
153+
<TimelineContent>Sleep</TimelineContent>
154+
</TimelineItem>
155+
</Timeline>
156+
}
157+
11158
export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
12159
const styles = useStyles()
13160

14161
return <div className={styles.root}>
15162
<Paper elevation={0} className={styles.section}>
16-
<div>Hello</div>
163+
<Typography variant="h4">{workspace.name}</Typography>
164+
<Typography variant="body2" color="textSecondary">
165+
{"TODO: Project"}
166+
</Typography>
17167
</Paper>
18168
<div className={styles.horizontal}>
19-
<Paper elevation={0} className={styles.sideBar}>
20-
<div>Apps</div>
21-
</Paper>
169+
<div className={styles.sideBar}>
170+
<Paper elevation={0} className={styles.section}>
171+
<Title>Applications</Title>
172+
173+
<div className={styles.vertical}>
174+
<ResourceRow name={"Code Web"} icon={"/static/vscode.svg"} status={"active"} />
175+
<ResourceRow name={"Terminal"} icon={"/static/terminal.svg"} status={"active"} />
176+
<ResourceRow name={"React App"} icon={"/static/react-icon.svg"} status={"active"} />
177+
178+
</div>
179+
</Paper>
180+
<Paper elevation={0} className={styles.section}>
181+
<Title>Resources</Title>
182+
183+
<div className={styles.vertical}>
184+
<ResourceRow name={"GCS Bucket"} icon={"/static/google-storage-logo.svg"} status={"active"} />
185+
<ResourceRow name={"Windows (x64 - VM)"} icon={"/static/windows-logo.svg"} status={"active"} />
186+
<ResourceRow name={"OSX (M1 - Physical)"} icon={"/static/apple-logo.svg"} status={"active"} />
187+
</div>
188+
</Paper>
189+
</div>
22190
<Paper elevation={0} className={styles.main}>
23-
<div>Build stuff</div>
191+
<Title>Timeline</Title>
192+
<WorkspaceTimeline />
24193
</Paper>
25194
</div>
26195
</div>
@@ -49,9 +218,14 @@ export const useStyles = makeStyles((theme) => {
49218
display: "flex",
50219
flexDirection: "row"
51220
},
221+
vertical: {
222+
display: "flex",
223+
flexDirection: "column"
224+
},
52225
section: common,
53226
sideBar: {
54-
...common,
227+
display: "flex",
228+
flexDirection: "column",
55229
width: "400px"
56230
},
57231
main: {

‎site/pages/workspaces/[user]/[workspace]/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Workspace } from "../../../../components/Workspace"
1111
import { MockWorkspace } from "../../../../test_helpers"
1212

1313

14-
const ProjectsPage: React.FC = () => {
14+
const WorkspacesPage: React.FC = () => {
1515
const styles = useStyles()
1616
const router = useRouter()
1717
const { me, signOut } = useUser(true)
@@ -43,4 +43,4 @@ const useStyles = makeStyles(() => ({
4343
}
4444
}))
4545

46-
export default ProjectsPage
46+
export default WorkspacesPage

‎site/static/apple-logo.svg

Lines changed: 11 additions & 0 deletions
Loading

‎site/static/google-storage-logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎site/static/react-icon.svg

Lines changed: 9 additions & 0 deletions
Loading

‎site/static/terminal.svg

Lines changed: 1 addition & 0 deletions
Loading

‎site/static/vscode.svg

Lines changed: 1 addition & 0 deletions
Loading

‎site/static/windows-logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎yarn.lock

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -606,16 +606,16 @@
606606
dependencies:
607607
"@babel/runtime" "^7.4.4"
608608

609-
"@material-ui/lab@4.0.0-alpha.42":
610-
version "4.0.0-alpha.42"
611-
resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.42.tgz#f8789d3ba39a1e5a13f462d618c2eec53f87ae10"
612-
integrity sha512-JbKEMIXSslh03u6HNU1Pp1VXd9ycJ1dqkI+iQK6yR+Sng2mvMKzJ80GCV5ROXAXwwNnD8zHOopLZNIpTsEAVgQ==
609+
"@material-ui/lab@4.0.0-alpha.60":
610+
version "4.0.0-alpha.60"
611+
resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
612+
integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==
613613
dependencies:
614614
"@babel/runtime" "^7.4.4"
615-
"@material-ui/utils" "^4.7.1"
615+
"@material-ui/utils" "^4.11.2"
616616
clsx "^1.0.4"
617617
prop-types "^15.7.2"
618-
react-is "^16.8.0"
618+
react-is "^16.8.0 || ^17.0.0"
619619

620620
"@material-ui/styles@^4.9.0":
621621
version "4.11.4"

0 commit comments

Comments
 (0)