FEAT: Create basic model embed (#588)

* initial commit, issue with OpenSCAD embed viewing

* initial implementation

* Fix openscad size bug

* Add overlays to embed

* Remove console.log and reuse exact query

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>
This commit was merged in pull request #588.
This commit is contained in:
Frank Noirot
2022-01-11 01:30:15 -05:00
committed by GitHub
parent e7dec57644
commit 82dd3d2555
16 changed files with 284 additions and 44 deletions

View File

@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react'
import { Link, routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Toaster, toast } from '@redwoodjs/web/toast'
import Tooltip from '@material-ui/core/Tooltip'
import { Popover } from '@headlessui/react'
import { getActiveClasses } from 'get-active-classes'
import Footer from 'src/components/Footer'
@@ -12,11 +11,11 @@ import NavPlusButton from 'src/components/NavPlusButton'
import ReactGA from 'react-ga'
import { isBrowser } from '@redwoodjs/prerender/browserUtils'
import Svg from 'src/components/Svg'
import { ImageFallback } from 'src/components/ImageUploader'
import useUser from 'src/helpers/hooks/useUser'
import './MainLayout.css'
import RecentProjectsCell from 'src/components/RecentProjectsCell'
import LogoType from 'src/components/LogoType'
let previousSubmission = ''
@@ -72,39 +71,12 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
}, [hash, client])
return (
<div
className="h-full flex flex-col ch-scrollbar overflow-y-scroll overflow-x-hidden"
className="flex flex-col h-full overflow-x-hidden overflow-y-scroll ch-scrollbar"
style={{ perspective: '1px', perspectiveOrigin: 'top center' }}
>
<header id="cadhub-main-header">
<nav className="flex justify-between h-16 sm:px-4 bg-ch-gray-900">
<ul className="flex items-center">
<li>
<Link to={routes.home()}>
<div className="rounded-full overflow-hidden ml-2">
<Svg className="w-10" name="favicon" />
</div>
</Link>
</li>
<li>
<Tooltip title="Very alpha, there's lots of work todo">
<div className="ml-4 flex">
{/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}
<h2
className="text-indigo-300 text-2xl md:text-5xl font-ropa-sans py-1 md:tracking-wider"
style={{ letterSpacing: '0.3em' }}
>
CadHub
</h2>
<div
className="text-pink-400 text-sm font-bold font-ropa-sans hidden md:block"
style={{ paddingBottom: '2rem', marginLeft: '-1.8rem' }}
>
pre-alpha
</div>
</div>
</Tooltip>
</li>
</ul>
<LogoType />
<ul className="flex items-center">
<li
className={getActiveClasses(
@@ -114,29 +86,29 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
<NavPlusButton />
</li>
{isAuthenticated ? (
<li className="h-10 w-10">
<Popover className="relative outline-none w-full h-full">
<li className="w-10 h-10">
<Popover className="relative w-full h-full outline-none">
<Popover.Button
disabled={!isAuthenticated || !currentUser}
className="h-full w-full outline-none border-ch-gray-400 border-2 rounded-full"
className="w-full h-full border-2 rounded-full outline-none border-ch-gray-400"
>
{!loading && (
<ImageFallback
width={80}
className="rounded-full object-cover"
className="object-cover rounded-full"
imageId={user?.image}
/>
)}
</Popover.Button>
{currentUser && (
<Popover.Panel className="w-48 absolute z-10 right-0 bg-ch-gray-700 mt-4 px-3 py-2 rounded shadow-md overflow-hidden text-ch-gray-300">
<Popover.Panel className="absolute right-0 z-10 w-48 px-3 py-2 mt-4 overflow-hidden rounded shadow-md bg-ch-gray-700 text-ch-gray-300">
<Link to={routes.user({ userName: user?.userName })}>
<p className="my-2 text-ch-blue-400 font-fira-code leading-4 text-sm">
<p className="my-2 text-sm leading-4 text-ch-blue-400 font-fira-code">
Hello {user?.name}
</p>
</Link>
<Link
className="my-2 block hover:text-ch-pink-300"
className="block my-2 hover:text-ch-pink-300"
to={routes.user({ userName: user?.userName })}
>
<div>View Your Profile</div>
@@ -149,7 +121,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
Logout
</a>
<hr className="my-4" />
<p className="text-ch-blue-400 font-fira-code leading-4 text-sm">
<p className="text-sm leading-4 text-ch-blue-400 font-fira-code">
Recent Projects
</p>
<RecentProjectsCell userName={user?.userName} />
@@ -161,7 +133,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
<li>
<a
href="#"
className="text-ch-gray-300 mr-1 sm:mr-2 px-2 sm:px-4 py-2 border-2 border-ch-gray-400 rounded-full hover:bg-ch-gray-600"
className="px-2 py-2 mr-1 border-2 rounded-full text-ch-gray-300 sm:mr-2 sm:px-4 border-ch-gray-400 hover:bg-ch-gray-600"
onClick={recordedLogin}
>
Sign In/Up