web/src/components/IdeCascadeStudio/IdeCascadeStudio.js

@@ -2,6 +2,7 @@ import { useMutation, useFlash } from '@redwoodjs/web'
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { initialize } from 'src/cascade/js/MainPage/CascadeMain'
 import CascadeController from 'src/helpers/cascadeController'
+import IdeToolbar from 'src/components/IdeToolbar'
 import { useEffect, useState } from 'react'
 
 const DELETE_PART_MUTATION = gql`
@@ -19,9 +20,9 @@ const IdeCascadeStudio = ({ part, saveCode, loading, error }) => {
     const onCodeChange = (code) => setCode(code)
     CascadeController.initialise(onCodeChange, part.code, domNode)
     const element = document.getElementById('cascade-container')
-    element.setAttribute('style', 'height: auto; display: block; opacity: 100%') // eslint-disable-line
+    element.setAttribute('style', 'display: block; opacity: 100%; overflow: hidden; height: calc(100vh - 8rem)') // eslint-disable-line
     return () => {
-      element.setAttribute('style', 'height: auto; display: none;') // eslint-disable-line
+      element.setAttribute('style',  'display: none; overflow: hidden; height: calc(100vh - 8rem)') // eslint-disable-line
     }
   }, [])
   const hasChanges = code !== part.code
@@ -41,7 +42,7 @@ const IdeCascadeStudio = ({ part, saveCode, loading, error }) => {
 
   return (
     <>
-      <nav className="rw-button-group">
+      <nav className="rw-button-group hidden">
         {loading && 'Loading...'}
         {hasChanges && !loading && (
           <button
@@ -53,7 +54,8 @@ const IdeCascadeStudio = ({ part, saveCode, loading, error }) => {
         )}
       </nav>
       <div>
-        <div id="topnav" className="topnav">
+        <IdeToolbar />
+        <div id="topnav" className="topnav hidden">
           <a href="https://github.com/zalo/CascadeStudio">
             Cascade Studio 0.0.6
           </a>

web/src/components/IdeToolbar/IdeToolbar.js

@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import Popover from '@material-ui/core/Popover'
+
+import Button from 'src/components/Button'
+
+const IdeToolbar = ({ canEdit, isChanges, onSave, onExport }) => {
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+  const id = open ? 'simple-popover' : undefined
+
+  return (
+    <div
+      id="cadhub-ide-toolbar"
+      className="flex bg-gradient-to-r from-gray-900 to-indigo-900 pt-1"
+    >
+      <Button
+        iconName={canEdit ? 'save' : 'fork'}
+        className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
+        shouldAnimateHover
+        onClick={onSave}
+      >
+        {canEdit ? 'Save' : 'Fork'}
+        {isChanges && (
+          <span className="relative h-4">
+            <span className="text-pink-400 text-2xl absolute transform -translate-y-3">
+              *
+            </span>
+          </span>
+        )}
+      </Button>
+      <div>
+        <Button
+          iconName="logout"
+          className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
+          shouldAnimateHover
+          aria-describedby={id}
+          onClick={handleClick}
+        >
+          Export
+        </Button>
+        <Popover
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+          className="material-ui-overrides transform translate-y-4"
+        >
+          <ul className="text-sm py-2 text-gray-500">
+            {['STEP', 'STL', 'OBJ'].map((exportType) => (
+              <li key={exportType} className="px-4 py-2 hover:bg-gray-200">
+                <button onClick={() => onExport(exportType)}>
+                  export
+                  <span className="pl-1 text-base text-indigo-600">
+                    {exportType}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+export default IdeToolbar

web/src/components/IdeToolbar/IdeToolbar.stories.js

@@ -0,0 +1,20 @@
+import IdeToolbar from './IdeToolbar'
+
+export const generated = () => {
+  return (
+    <div>
+      {[
+        <IdeToolbar canEdit />,
+        <IdeToolbar canEdit isChanges />,
+        <IdeToolbar />,
+        <IdeToolbar isChanges />,
+      ].map((toolbar, index) => (
+        <div key={index} className="pb-2">
+          {toolbar}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default { title: 'Components/IdeToolbar' }

web/src/components/IdeToolbar/IdeToolbar.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import IdeToolbar from './IdeToolbar'
+
+describe('IdeToolbar', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<IdeToolbar />)
+    }).not.toThrow()
+  })
+})

web/src/components/Svg/Svg.js

@@ -30,6 +30,34 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    fork: (
+      <svg
+        viewBox="-3 -3 32 32" // TODO size this properly, or get a better icon
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+      >
+        <path
+          d="M7.5 21C7.5 20.1719 6.82812 19.5 6 19.5C5.17188 19.5 4.5 20.1719 4.5 21C4.5 21.8281 5.17188 22.5 6 22.5C6.82812 22.5 7.5 21.8281 7.5 21ZM7.5 3C7.5 2.17188 6.82812 1.5 6 1.5C5.17188 1.5 4.5 2.17188 4.5 3C4.5 3.82812 5.17188 4.5 6 4.5C6.82812 4.5 7.5 3.82812 7.5 3ZM20.5 5C20.5 4.17188 19.8281 3.5 19 3.5C18.1719 3.5 17.5 4.17188 17.5 5C17.5 5.82812 18.1719 6.5 19 6.5C19.8281 6.5 20.5 5.82812 20.5 5ZM22 5C22 6.10938 21.3906 7.07812 20.5 7.59375C20.4531 13.2344 13.4531 14.4844 10.7969 15.3281C8.3125 16.1094 7.5 16.4844 7.5 18V18.4062C8.39062 18.9219 9 19.8906 9 21C9 22.6562 7.65625 24 6 24C4.34375 24 3 22.6562 3 21C3 19.8906 3.60938 18.9219 4.5 18.4062V5.59375C3.60938 5.07812 3 4.10938 3 3C3 1.34375 4.34375 0 6 0C7.65625 0 9 1.34375 9 3C9 4.10938 8.39062 5.07812 7.5 5.59375V13.3594C8.29688 12.9688 9.14062 12.7031 9.90625 12.4688C12.8125 11.5469 17.4688 10.8594 17.5 7.59375C16.6094 7.07812 16 6.10938 16 5C16 3.34375 17.3438 2 19 2C20.6562 2 22 3.34375 22 5Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+    logout: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+        />
+      </svg>
+    ),
     pencil: (
       <svg
         xmlns="http://www.w3.org/2000/svg"

web/src/index.css

@@ -44,6 +44,11 @@
   @apply list-disc;
 }
 
+.material-ui-overrides,.MuiPopover-paper {
+  /* stop pop over from scrolling */
+  overflow: visible !important;
+}
+
 body {
   /* TODO can I use a tailwind class here? */
   background-color: #f7fafc;

web/src/index.html

@@ -46,7 +46,7 @@
     <div id="redwood-app"></div>
     <div
       id="cascade-container"
-      style="height: auto; opacity: 0;"
+      style="opacity: 0; overflow: hidden; height: calc(100vh - 8rem)"
     ></div>
   </body>
 </html>

web/src/layouts/MainLayout/MainLayout.js

@@ -51,7 +51,7 @@ const MainLayout = ({ children }) => {
   }
   return (
     <>
-      <header>
+      <header id="cadhub-main-header">
         <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
           <ul className="flex items-center">
             <li>
@@ -128,7 +128,7 @@ const MainLayout = ({ children }) => {
             }}
           >
             {isAuthenticated && currentUser ? (
-              <div style={{ padding: '1em', width: '15em' }}>
+              <div className="p-4 w-40">
                 <Link to={routes.user2({ userName: data?.user?.userName })}>
                   <h3 className="text-indigo-800" style={{ fontWeight: '500' }}>
                     Hello {data?.user?.name}