Add placeholder icon if none available

bryphe-coder · bryphe-coder · commit aea58ae2207e · 2022-01-19T19:08:36.000Z
diff --git a/site/api.ts b/site/api.ts
@@ -1,6 +1,9 @@
+import { SvgIcon } from "@material-ui/core"
+import { Logo } from "./components/Icons"
+
 export interface Project {
   id: string
-  icon: string
+  icon?: string
   name: string
   description: string
 }
@@ -16,7 +19,6 @@ export namespace Project {
 
     const project2: Project = {
       id: "test-echo-1",
-      icon: "https://www.datocms-assets.com/2885/1620155117-brandhcterraformverticalcolorwhite.svg",
       name: "Echo Project",
       description: "Project built on echo provisioner",
     }
diff --git a/site/components/Project/ProjectIcon.tsx b/site/components/Project/ProjectIcon.tsx
@@ -1,14 +1,86 @@
 import React from "react"
-import { Box, Typography } from "@material-ui/core"
+import { Box, makeStyles, SvgIcon, Typography } from "@material-ui/core"
 
 export interface ProjectIconProps {
   title: string
-  icon: string
+  icon?: string
   description?: string
   onClick: () => void
 }
 
-export const ProjectIcon: React.FC<ProjectIconProps> = ({ title, icon, onClick }) => {
+const useStyles = makeStyles((theme) => ({
+  container: {
+    boxShadow: theme.shadows[1],
+    cursor: "pointer",
+    transition: "box-shadow 250ms ease-in-out",
+    backgroundColor: "lightgrey",
+    "&:hover": {
+      boxShadow: theme.shadows[8],
+    },
+  },
+}))
+
+const Circle: React.FC = () => {
+  return (
+    <Box
+      css={{
+        width: "96px",
+        height: "96px",
+        borderRadius: "96px",
+        border: "48px solid white",
+      }}
+    />
+  )
+}
+
+const useStyles2 = makeStyles((theme) => ({
+  root: {
+    color: theme.palette.text.secondary,
+    display: "-webkit-box", // See (1)
+    marginTop: theme.spacing(0.5),
+    maxWidth: "110%",
+    minWidth: 0,
+    overflow: "hidden", // See (1)
+    textAlign: "center",
+    textOverflow: "ellipsis", // See (1)
+    whiteSpace: "normal", // See (1)
+
+    // (1) - These styles, along with clamping make it so that not only
+    // can text not overflow horizontally, but there can also only be a
+    // maximum of 2 line breaks. This is standard behaviour on OS files
+    // (ex: Windows 10 Desktop application) to prevent excessive vertical
+    // line wraps. This is important in Generic Applications, as we have no
+    // control over the application name used in the manifest.
+    ["-webkit-line-clamp"]: 2,
+    ["-webkit-box-orient"]: "vertical",
+  },
+}))
+
+export const ProjectName: React.FC = ({ children }) => {
+  const styles = useStyles2()
+
+  return (
+    <Typography className={styles.root} noWrap variant="body2">
+      {children}
+    </Typography>
+  )
+}
+
+export const ProjectIcon: React.FC<ProjectIconProps> = ({ icon, title, onClick }) => {
+  const styles = useStyles()
+
+  let iconComponent
+
+  if (typeof icon !== "undefined") {
+    iconComponent = <img src={icon} width={"128px"} height={"128px"} />
+  } else {
+    iconComponent = (
+      <Box width={"128px"} height={"128px"} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+        <Circle />
+      </Box>
+    )
+  }
+
   return (
     <Box
       css={{
@@ -18,12 +90,14 @@ export const ProjectIcon: React.FC<ProjectIconProps> = ({ title, icon, onClick }
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
-        border: "1px solid red",
+        border: "1px solid black",
+        borderRadius: "4px",
       }}
+      className={styles.container}
       onClick={onClick}
     >
-      <img src={icon} width={"128px"} height={"128px"} />
-      <Typography>{title}</Typography>
+      {iconComponent}
+      <ProjectName>{title}</ProjectName>
     </Box>
   )
 }
diff --git a/site/pages/workspaces/create/[projectId].tsx b/site/pages/workspaces/create/[projectId].tsx
@@ -35,7 +35,11 @@ const CreateProjectPage: React.FC = () => {
     },
   ]
 
-  return <FormPage title={"Create Project"} organization={"test-org"} buttons={buttons}></FormPage>
+  return (
+    <FormPage title={"Create Project"} organization={"test-org"} buttons={buttons}>
+      <div>TODO: Dynamic form fields</div>
+    </FormPage>
+  )
 }
 
 export default CreateProjectPage
diff --git a/site/pages/workspaces/create/index.tsx b/site/pages/workspaces/create/index.tsx
@@ -16,7 +16,7 @@ const CreateSelectProjectPage: React.FC = () => {
     router.back()
   }
 
-  const next = (projectId: string) => () => {
+  const select = (projectId: string) => () => {
     router.push(`/workspaces/create/${projectId}`)
   }
 
@@ -33,7 +33,7 @@ const CreateSelectProjectPage: React.FC = () => {
       body = (
         <>
           {requestState.payload.map((project) => {
-            return <ProjectIcon title={project.name} icon={project.icon} onClick={() => alert("clicked")} />
+            return <ProjectIcon title={project.name} icon={project.icon} onClick={select(project.id)} />
           })}
         </>
       )
@@ -48,16 +48,6 @@ const CreateSelectProjectPage: React.FC = () => {
         onClick: cancel,
       },
     },
-    {
-      title: "Next",
-      props: {
-        variant: "contained",
-        color: "primary",
-        disabled: false,
-        type: "submit",
-        onClick: next("test1"),
-      },
-    },
   ]
 
   return (

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,11 @@ const CreateProjectPage: React.FC = () => {`
`35`	`35`	`},`
`36`	`36`	`]`
`37`	`37`
`38`		`- return <FormPage title={"Create Project"} organization={"test-org"} buttons={buttons}></FormPage>`
	`38`	`+ return (`
	`39`	`+ <FormPage title={"Create Project"} organization={"test-org"} buttons={buttons}>`
	`40`	`+ <div>TODO: Dynamic form fields</div>`
	`41`	`+ </FormPage>`
	`42`	`+ )`
`39`	`43`	`}`
`40`	`44`
`41`	`45`	`export default CreateProjectPage`