h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Finished fixing nav, tweaked KeyValue edit btn

Browse Source
This commit is contained in:
Frank Johnson
2021-09-12 12:38:16 -04:00
parent 55d48057da
commit 34757cf535
8 changed files with 125 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/web/config/tailwind.config.js
View File

@@ -22,6 +22,7 @@ module.exports = {
800: '#1A1A1D', 800: '#1A1A1D',
750: '#222222', 750: '#222222',
760: '#232532', 760: '#232532',
710: '#2B303C', // TODO: Use HSL so I stop adding grays to fix the warm/cool problem
700: '#2A3038', 700: '#2A3038',
600: '#3B3E4B', 600: '#3B3E4B',
550: '#63636A', 550: '#63636A',

40
app/web/src/components/IdeHeader/IdeHeader.tsx
View File

@@ -11,6 +11,7 @@ import ProfileSlashLogin from 'src/components/ProfileSlashLogin'
import Gravatar from 'src/components/Gravatar/Gravatar' import Gravatar from 'src/components/Gravatar/Gravatar'
import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle' import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle'
import CaptureButton from 'src/components/CaptureButton/CaptureButton' import CaptureButton from 'src/components/CaptureButton/CaptureButton'
import { ReactNode } from 'react'
const TopButton = ({ const TopButton = ({
onClick, onClick,
@@ -44,6 +45,7 @@ interface IdeHeaderProps {
projectOwnerId?: string projectOwnerId?: string
projectOwnerImage?: string projectOwnerImage?: string
projectId?: string projectId?: string
children?: ReactNode
} }
const IdeHeader = ({ const IdeHeader = ({
@@ -53,6 +55,7 @@ const IdeHeader = ({
projectOwnerImage, projectOwnerImage,
projectId, projectId,
projectOwnerId, projectOwnerId,
children,
}: IdeHeaderProps) => { }: IdeHeaderProps) => {
const { currentUser } = useAuth() const { currentUser } = useAuth()
const { project } = useIdeContext() const { project } = useIdeContext()
@@ -92,6 +95,31 @@ const IdeHeader = ({
<div /> <div />
)} )}
<div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center"> <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
{ (!children)
? <DefaultTopButtons
project={project}
projectTitle={projectTitle}
_projectOwner={_projectOwner}
handleRender={handleRender}
canEdit={canEdit}
/>
: children
}
{/* <TopButton>Fork</TopButton> */}
<div className="h-8 w-8">
<NavPlusButton />
</div>
<ProfileSlashLogin />
</div>
</div>
)
}
export default IdeHeader
function DefaultTopButtons({ project, projectTitle, _projectOwner, handleRender, canEdit }) {
return (<>
{canEdit && !projectTitle && ( {canEdit && !projectTitle && (
<CaptureButton <CaptureButton
canEdit={canEdit} canEdit={canEdit}
@@ -132,7 +160,6 @@ const IdeHeader = ({
<Svg name="terminal" className="w-6 h-6 text-ch-pink-500" /> <Svg name="terminal" className="w-6 h-6 text-ch-pink-500" />
</TopButton> </TopButton>
)} )}
<Popover className="relative outline-none w-full h-full"> <Popover className="relative outline-none w-full h-full">
{({ open }) => { {({ open }) => {
return ( return (
@@ -173,14 +200,5 @@ const IdeHeader = ({
) )
}} }}
</Popover> </Popover>
{/* <TopButton>Fork</TopButton> */} </>)
<div className="h-8 w-8">
<NavPlusButton />
</div>
<ProfileSlashLogin />
</div>
</div>
)
} }
export default IdeHeader

17
app/web/src/components/ImageUploader/ImageUploader.js
View File

@@ -11,13 +11,13 @@ import Svg from 'src/components/Svg'
const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images' const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload' const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
export function ImageFallback({ width = 100, cloudinaryId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) { export function ImageFallback({ width = 100, imageId = 'CadHub/eia1kwru54g2kf02s2xx', className = '' }) {
return ( return (
<div className="relative overflow-hidden w-full h-full"> <div className="relative overflow-hidden w-full h-full">
<CloudinaryImage <CloudinaryImage
className={"object-cover w-full h-full shadow overflow-hidden " + className } className={"object-cover w-full h-full shadow overflow-hidden " + className }
cloudName="irevdev" cloudName="irevdev"
publicId={cloudinaryId} publicId={imageId}
width={width} width={width}
crop="scale" crop="scale"
/> />
@@ -78,20 +78,19 @@ export default function ImageUploader({
} }
style={{ paddingBottom: `${(1 / aspectRatio) * 100}%` }} style={{ paddingBottom: `${(1 / aspectRatio) * 100}%` }}
> >
<div className="absolute w-full h-full" {...getRootProps()}> <div className="absolute w-full h-full inset-0" {...getRootProps()}>
{cloudinaryId && isEditable && ( {cloudinaryId && isEditable && (
<button className="absolute z-10 bg-indigo-900 opacity-75 bottom-0 right-0 flex items-center p-1 mb-6 mr-2 rounded-lg"> <button className="w-full py-1 absolute z-10 bg-ch-blue-650 bg-opacity-50 hover:bg-opacity-80 bottom-0 right-0 left-0 flex items-center justify-center text-ch-gray-300">
<span className="text-gray-100 pr-2">Update</span> <span className="font-fira-code text-sm leading-4">Update</span>
<Svg <Svg
name="pencil" name="pencil-solid"
strokeWidth={2} className=" h-4 w-4 ml-4 mb-2"
className=" text-gray-100 h-6 w-6"
/> />
</button> </button>
)} )}
{isEditable && <input {...getInputProps()} />} {isEditable && <input {...getInputProps()} />}
{(cloudinaryId || !isEditable) && ( {(cloudinaryId || !isEditable) && (
<ImageFallback cloudinaryId={cloudinaryId} width={width} /> <ImageFallback imageId={cloudinaryId} width={width} />
)} )}
{!cloudinaryId && <button className="absolute inset-0"></button>} {!cloudinaryId && <button className="absolute inset-0"></button>}
{!cloudinaryId && isEditable && ( {!cloudinaryId && isEditable && (

6
app/web/src/components/KeyValue/KeyValue.tsx
View File

@@ -25,17 +25,17 @@ const KeyValue = ({
return ( return (
<div className={"flex flex-col " + className}> <div className={"flex flex-col " + className}>
<div className={"text-ch-blue-400 font-fira-code flex items-center leading-4 text-sm whitespace-nowrap " + (bottom ? "order-2" : "")}> <div className={"text-ch-blue-400 font-fira-code flex items-center leading-4 text-sm whitespace-nowrap " + (bottom ? "order-2" : "")}>
{keyName} <span className={isEditable ? "text-ch-blue-300" : ""}>{keyName}</span>
{canEdit && {canEdit &&
(isEditable ? ( (isEditable ? (
<button <button
className="font-fira-sans items-center ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400" className="font-fira-sans text-ch-gray-300 items-center ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-blue-500 bg-opacity-50 hover:bg-opacity-70 rounded-sm"
id="rename-button" id="rename-button"
onClick={onEdit} onClick={onEdit}
> >
<Svg <Svg
name="check" name="check"
className="w-6 h-6 text-ch-purple-500" className="w-6 h-6"
strokeWidth={3} strokeWidth={3}
/> />
<span>Update</span> <span>Update</span>

6
app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx
View File

@@ -51,7 +51,7 @@ const ProfileSlashLogin = () => {
<ImageFallback <ImageFallback
width={80} width={80}
className="rounded-full object-cover" className="rounded-full object-cover"
imageUrl={user?.image} imageId={user?.image}
/> />
)} )}
</Popover.Button> </Popover.Button>
@@ -79,10 +79,10 @@ const ProfileSlashLogin = () => {
<div> <div>
<a <a
href="#" href="#"
className="text-indigo-200 font-semibold underline mr-2" className="text-ch-gray-300 mr-2 px-4 py-2 border-2 border-ch-gray-400 rounded-full hover:bg-ch-gray-600"
onClick={recordedLogin} onClick={recordedLogin}
> >
Sign in/up Sign In/Up
</a> </a>
</div> </div>
)} )}

6
app/web/src/components/ProjectCard/ProjectCard.tsx
View File

@@ -8,7 +8,7 @@ import { ImageFallback } from '../ImageUploader/ImageUploader'
const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => ( const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
<li <li
className="rounded p-1.5 bg-ch-gray-760 shadow-ch" className="rounded p-1.5 bg-ch-gray-760 hover:bg-ch-gray-710 shadow-ch"
key={`${user?.userName}--${title}`} key={`${user?.userName}--${title}`}
> >
<Link <Link
@@ -33,8 +33,8 @@ const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
<div className="flex items-center mt-1"> <div className="flex items-center mt-1">
<div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow"> <div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
<ImageFallback <ImageFallback
imageUrl={user?.image} imageId={user?.image} // http://res.cloudinary.com/irevdev/image/upload/c_scale,w_50/v1/CadHub/bc7smqwo9qqmrloyf9xr
width={50} width={80} // http://res.cloudinary.com/irevdev/image/upload/c_scale,w_300/v1/CadHub/bc7smqwo9qqmrloyf9xr
/> />
</div> </div>
<div className="ml-3 text-lg text-ch-gray-300 font-fira-sans"> <div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">

13
app/web/src/components/UserProfile/UserProfile.tsx
View File

@@ -35,7 +35,7 @@ const UserProfile = ({
return ( return (
<> <>
<div className="h-screen flex flex-col text-lg font-fira-sans"> <div className="md:h-screen flex flex-col text-lg font-fira-sans">
<div className="flex"> <div className="flex">
<Link <Link
to={routes.home()} to={routes.home()}
@@ -48,12 +48,15 @@ const UserProfile = ({
projectOwner={user?.userName} projectOwner={user?.userName}
projectOwnerImage={user?.image} projectOwnerImage={user?.image}
projectOwnerId={user?.id} projectOwnerId={user?.id}
/> >
<span></span>
</IdeHeader>
</div> </div>
<div className="relative flex-grow h-full"> <div className="relative flex-grow h-full">
<div className="grid md:grid-cols-profile-layout grid-flow-row-dense absolute inset-0"> <div className="grid md:grid-cols-profile-layout grid-flow-row-dense absolute inset-0">
{/* Side panel */} {/* Side panel */}
<section className="bg-ch-gray-760 font-fira-sans px-12 pt-12 overflow-y-auto ch-scrollbar"> <section className="bg-ch-gray-760 font-fira-sans p-12 md:overflow-y-auto ch-scrollbar">
<div className="flex gap-6"> <div className="flex gap-6">
{!isEditable && ( {!isEditable && (
<div className="w-28 flex-shrink-0"> <div className="w-28 flex-shrink-0">
@@ -98,8 +101,8 @@ const UserProfile = ({
</div> </div>
</section> </section>
{/* Viewer */} {/* Viewer */}
<div className="py-10 px-8 w-full min-h-md relative bg-ch-gray-800 overflow-auto ch-scrollbar"> <div className="py-10 px-8 w-full h-full relative bg-ch-gray-800 md:overflow-y-auto ch-scrollbar">
<h3 className="text-2xl text-ch-gray-500 mb-4">Projects</h3> <h3 className="text-2xl text-ch-gray-500 mb-4 md:hidden">Projects</h3>
<ProjectsOfUser userName={user?.userName} /> <ProjectsOfUser userName={user?.userName} />
</div> </div>
</div> </div>

4
app/web/src/layouts/MainLayout/MainLayout.js
View File

@@ -91,7 +91,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
} }
}, [hash, client]) }, [hash, client])
return ( return (
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col ch-scrollbar">
<header id="cadhub-main-header"> <header id="cadhub-main-header">
<nav className="flex justify-between h-16 px-4 bg-ch-gray-900"> <nav className="flex justify-between h-16 px-4 bg-ch-gray-900">
<ul className="flex items-center"> <ul className="flex items-center">
@@ -140,7 +140,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
<ImageFallback <ImageFallback
width={80} width={80}
className="rounded-full object-cover" className="rounded-full object-cover"
imageUrl={user?.image} imageId={user?.image}
/> />
)} )}
</Popover.Button> </Popover.Button>