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

Merge branch 'main' of github.com:Irev-Dev/cadhub

Browse Source
This commit is contained in:
Kurt Hutten
2021-08-12 06:54:20 +10:00
parent 74677c89a2 5677855a43
commit 876dc94cc9
9 changed files with 154 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/web/src/components/CadPackage/CadPackage.tsx
View File

@@ -12,7 +12,7 @@ const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
return ( return (
<div <div
className={ className={
`flex items-center gap-2 cursor-default text-gray-100 ${ `grid grid-flow-col-dense items-center gap-2 cursor-default text-gray-100 ${
isOpenScad && 'bg-yellow-800' isOpenScad && 'bg-yellow-800'
} ${isCadQuery && 'bg-ch-blue-300'} bg-opacity-30 ` + className } ${isCadQuery && 'bg-ch-blue-300'} bg-opacity-30 ` + className
} }

2
app/web/src/components/Customizer/Customizer.tsx
View File

@@ -43,7 +43,7 @@ const Customizer = () => {
}`} }`}
> >
<div className="flex justify-between px-6 py-2 items-center"> <div className="flex justify-between px-6 py-2 items-center">
<div className="flex gap-6 items-center"> <div className="grid grid-flow-col-dense gap-6 items-center">
<button className="px-2" onClick={() => setOpen(!open)}> <button className="px-2" onClick={() => setOpen(!open)}>
<Svg <Svg
name="chevron-down" name="chevron-down"

12
app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
View File

@@ -76,17 +76,15 @@ const EditableProjectTitle = ({
value={newTitle} value={newTitle}
onChange={onTitleChange} onChange={onTitleChange}
ref={inputRef} ref={inputRef}
onBlur={({ relatedTarget }) => { onBlur={() => setTimeout(() => {
if (relatedTarget?.id !== 'rename-button') { setInEditMode(false)
setInEditMode(false) setNewTitle(projectTitle)
setNewTitle(projectTitle) }, 300)}
}
}}
/> />
</span> </span>
<div className="flex items-center h-full"> <div className="flex items-center h-full">
<button <button
className="ml-4 flex 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="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"
id="rename-button" id="rename-button"
onClick={() => onClick={() =>
updateProject({ variables: { id, input: { title: newTitle } } }) updateProject({ variables: { id, input: { title: newTitle } } })

2
app/web/src/components/EditorMenu/EditorMenu.tsx
View File

@@ -29,7 +29,7 @@ const EditorMenu = () => {
<div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center"> <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
<Svg name="drag-grid" className="w-4 p-px" /> <Svg name="drag-grid" className="w-4 p-px" />
</div> </div>
<div className="flex gap-6 px-5"> <div className="grid grid-flow-col-dense gap-6 px-5">
<FileDropdown <FileDropdown
handleRender={onRender} handleRender={onRender}
handleStlDownload={handleStlDownload} handleStlDownload={handleStlDownload}

4
app/web/src/components/EmojiReaction/EmojiReaction.tsx
View File

@@ -59,9 +59,9 @@ const EmojiReaction = ({
<div <div
className={getActiveClasses('relative overflow-hidden pt-1', className)} className={getActiveClasses('relative overflow-hidden pt-1', className)}
> >
<div className="z-10 flex items-center gap-4 h-10"> <div className="z-10 flex items-center h-10">
<div <div
className="h-full w-10" className="h-full w-10 mr-4"
aria-describedby={popoverId} aria-describedby={popoverId}
onClick={togglePopover} onClick={togglePopover}
> >

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

@@ -67,7 +67,7 @@ const IdeHeader = ({
<div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center text-lg"> <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center text-lg">
{_projectId ? ( {_projectId ? (
<div className="h-full text-gray-300 flex items-center"> <div className="h-full text-gray-300 flex items-center">
<span className="bg-ch-gray-700 h-full flex items-center gap-2 px-4"> <span className="bg-ch-gray-700 h-full grid grid-flow-col-dense items-center gap-2 px-4">
<Gravatar <Gravatar
image={project?.user?.image || projectOwnerImage} image={project?.user?.image || projectOwnerImage}
className="w-10" className="w-10"
@@ -91,7 +91,7 @@ const IdeHeader = ({
) : ( ) : (
<div /> <div />
)} )}
<div className="text-gray-200 flex gap-4 mr-4 items-center"> <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
{canEdit && !projectTitle && ( {canEdit && !projectTitle && (
<CaptureButton <CaptureButton
canEdit={canEdit} canEdit={canEdit}

10
app/web/src/components/LoginModal/LoginModal.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react' import { useState } from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog' import Dialog from '@material-ui/core/Dialog'
import Tab from '@material-ui/core/Tab' import Tab from '@material-ui/core/Tab'
import Tabs from '@material-ui/core/Tabs' import Tabs from '@material-ui/core/Tabs'
@@ -10,6 +11,12 @@ import { toast } from '@redwoodjs/web/toast'
import { Link, routes } from '@redwoodjs/router' import { Link, routes } from '@redwoodjs/router'
import { subscribe } from 'src/helpers/subscribe' import { subscribe } from 'src/helpers/subscribe'
const useStyles = makeStyles({
root: {
transform: `translate3d(0,0,50px)`,
},
})
const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => { const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
const { logIn, signUp } = useAuth() const { logIn, signUp } = useAuth()
@@ -20,6 +27,7 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
} }
const [checkBox, setCheckBox] = useState(true) const [checkBox, setCheckBox] = useState(true)
const [error, setError] = useState('') const [error, setError] = useState('')
const classes = useStyles()
const onSubmitSignUp = async ({ email, password, name, userName }) => { const onSubmitSignUp = async ({ email, password, name, userName }) => {
try { try {
@@ -47,7 +55,7 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
} }
} }
return ( return (
<Dialog open={open} onClose={onClose}> <Dialog open={open} onClose={onClose} className={classes.root}>
<div className="bg-gray-100 max-w-2xl rounded-lg shadow-lg"> <div className="bg-gray-100 max-w-2xl rounded-lg shadow-lg">
<Tabs <Tabs
value={tab} value={tab}

260
app/web/src/components/ProjectProfile/ProjectProfile.tsx
View File

@@ -35,12 +35,12 @@ const KeyValue = ({
if (!children || hide) return null if (!children || hide) return null
return ( return (
<div> <div>
<div className="text-ch-blue-600 font-fira-code flex text-sm"> <div className="text-ch-blue-600 font-fira-code flex text-sm whitespace-nowrap">
{keyName} {keyName}
{canEdit && {canEdit &&
(isEditable ? ( (isEditable ? (
<button <button
className="ml-4 flex 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="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"
id="rename-button" id="rename-button"
onClick={onEdit} onClick={onEdit}
> >
@@ -128,146 +128,148 @@ const ProjectProfile = ({
projectId={project?.id} projectId={project?.id}
/> />
</div> </div>
<div className="relative flex-grow"> <div className="relative flex-grow h-full">
<div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0"> <div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0 h-full">
{/* Viewer */} {/* Viewer */}
<div className="md:col-start-2 w-full min-h-md"> <div className="md:col-start-2 w-full min-h-md">
<ProfileViewer /> <ProfileViewer />
</div> </div>
{/* Side panel */} {/* Side panel */}
<div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 flex flex-col gap-6 overflow-y-auto"> <div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 overflow-y-auto">
<h3 className="text-5xl capitalize text-ch-gray-300"> <div className="grid grid-flow-row-dense gap-6">
{project?.title.replace(/-/g, ' ')} <h3 className="text-5xl capitalize text-ch-gray-300">
</h3> {project?.title.replace(/-/g, ' ')}
<div className="flex items-center text-gray-100"> </h3>
<span className="pr-4">Built with</span> <div className="flex items-center text-gray-100">
<CadPackage <span className="pr-4">Built with</span>
cadPackage={project?.cadPackage} <CadPackage
className="px-3 py-2 rounded" cadPackage={project?.cadPackage}
/> className="px-3 py-2 rounded"
</div>
<KeyValue
keyName="Description"
hide={!project?.description && !canEdit}
canEdit={canEdit}
onEdit={() => {
if (!isEditable) {
setIsEditable(true)
} else {
onEditSaveClick()
setIsEditable(false)
}
}}
isEditable={isEditable}
>
<div
id="description-wrap"
name="description"
className={
'markdown-overrides rounded shadow-md bg-white pl-6 pb-2 mt-2' +
(isEditable ? ' min-h-md' : '')
}
onClick={(e) =>
e?.target?.id === 'description-wrap' &&
editorRef?.current?.focusAtEnd()
}
>
<Editor
ref={editorRef}
defaultValue={project?.description || ''}
readOnly={!isEditable}
onChange={onDescriptionChange}
/> />
</div> </div>
</KeyValue> <KeyValue
<div className="flex gap-6"> keyName="Description"
<KeyValue keyName="Created on"> hide={!project?.description && !canEdit}
{new Date(project?.createdAt).toDateString()} canEdit={canEdit}
onEdit={() => {
if (!isEditable) {
setIsEditable(true)
} else {
onEditSaveClick()
setIsEditable(false)
}
}}
isEditable={isEditable}
>
<div
id="description-wrap"
name="description"
className={
'markdown-overrides rounded shadow-md bg-white pl-6 pb-2 mt-2' +
(isEditable ? ' min-h-md' : '')
}
onClick={(e) =>
e?.target?.id === 'description-wrap' &&
editorRef?.current?.focusAtEnd()
}
>
<Editor
ref={editorRef}
defaultValue={project?.description || ''}
readOnly={!isEditable}
onChange={onDescriptionChange}
/>
</div>
</KeyValue> </KeyValue>
<KeyValue keyName="Updated on"> <div className="grid grid-flow-col-dense gap-6">
{new Date(project?.updatedAt).toDateString()} <KeyValue keyName="Created on">
{new Date(project?.createdAt).toDateString()}
</KeyValue>
<KeyValue keyName="Updated on">
{new Date(project?.updatedAt).toDateString()}
</KeyValue>
</div>
<KeyValue keyName="Reactions">
<EmojiReaction
emotes={emotes}
userEmotes={userEmotes}
onEmote={onReaction}
onShowProjectReactions={() => setIsReactionsModalOpen(true)}
/>
</KeyValue> </KeyValue>
</div> <KeyValue keyName="Comments" hide={!currentUser}>
<KeyValue keyName="Reactions"> {!isEditable && (
<EmojiReaction <>
emotes={emotes} {currentUser && (
userEmotes={userEmotes} <>
onEmote={onReaction} <div className="pt-1">
onShowProjectReactions={() => setIsReactionsModalOpen(true)} <textarea
/> className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans"
</KeyValue> placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
<KeyValue keyName="Comments" hide={!currentUser}> value={comment}
{!isEditable && ( onChange={({ target }) => setComment(target.value)}
<> />
{currentUser && ( </div>
<> <Button
<div className="pt-1"> className={getActiveClasses(
<textarea 'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300',
className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans" { 'bg-indigo-200': currentUser }
placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!" )}
value={comment} shouldAnimateHover
onChange={({ target }) => setComment(target.value)} disabled={!currentUser}
/> iconName={''}
</div> onClick={onCommentClear}
<Button >
className={getActiveClasses( Comment
'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300', </Button>
{ 'bg-indigo-200': currentUser } </>
)} )}
shouldAnimateHover <ul>
disabled={!currentUser} {project?.Comment.map(({ text, user, id, createdAt }) => (
iconName={''} <li key={id} className="mb-5">
onClick={onCommentClear} <div className="flex justify-between">
> <Link
Comment className="flex items-center"
</Button> to={routes.user({ userName: user?.userName })}
</> >
)} <Gravatar
<ul> image={user?.image}
{project?.Comment.map(({ text, user, id, createdAt }) => ( className="w-10 h-10 mr-4"
<li key={id} className="mb-5"> />
<div className="flex justify-between"> {user?.userName}
<Link </Link>
className="flex items-center" <div className="font-fira-code text-ch-blue-600 flex items-center">
to={routes.user({ userName: user?.userName })} {new Date(createdAt).toDateString()}
> </div>
<Gravatar
image={user?.image}
className="w-10 h-10 mr-4"
/>
{user?.userName}
</Link>
<div className="font-fira-code text-ch-blue-600 flex items-center">
{new Date(createdAt).toDateString()}
</div> </div>
</div> <div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
<div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300"> {text}
{text} </div>
</div> </li>
</li> ))}
))} </ul>
</ul> </>
)}
</KeyValue>
{canEdit && (
<>
<h4 className="mt-10 text-red-600">Danger Zone</h4>
<Button
className={getActiveClasses(
'mr-auto bg-red-500 mb-6 text-ch-gray-300',
{ 'bg-indigo-200': currentUser }
)}
shouldAnimateHover
disabled={!currentUser}
iconName={'trash'}
onClick={() => setIsConfirmDialogOpen(true)}
>
Delete Project
</Button>
</> </>
)} )}
</KeyValue> </div>
{canEdit && (
<>
<h4 className="mt-10 text-red-600">Danger Zone</h4>
<Button
className={getActiveClasses(
'mr-auto bg-red-500 mb-6 text-ch-gray-300',
{ 'bg-indigo-200': currentUser }
)}
shouldAnimateHover
disabled={!currentUser}
iconName={'trash'}
onClick={() => setIsConfirmDialogOpen(true)}
>
Delete Project
</Button>
</>
)}
</div> </div>
</div> </div>
</div> </div>

4
app/web/src/components/SocialCardCell/SocialCardCell.tsx
View File

@@ -100,7 +100,7 @@ export const Success = ({
className="h-24 grid bg-ch-gray-900 relative" className="h-24 grid bg-ch-gray-900 relative"
style={{ gridTemplateColumns: '7fr 5fr' }} style={{ gridTemplateColumns: '7fr 5fr' }}
> >
<div className="flex items-center justify-center gap-16"> <div className="grid grid-flow-col-dense items-center justify-center gap-16">
{[ {[
{ {
svg: 'reactions', svg: 'reactions',
@@ -113,7 +113,7 @@ export const Success = ({
count: 0, count: 0,
}, },
].map(({ svg, title, count }, index) => ( ].map(({ svg, title, count }, index) => (
<div className="flex gap-4" key={index}> <div className="grid grid-flow-col-dense gap-4" key={index}>
<Svg className="w-10" name={svg} /> <Svg className="w-10" name={svg} />
<div className="flex flex-col"> <div className="flex flex-col">
<div className="text-3xl">{count}</div> <div className="text-3xl">{count}</div>