From 0ede0be0b4ff876543a3ccbadf39573a2e816d85 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sat, 14 Nov 2020 17:35:58 +1100
Subject: [PATCH] issue-95 Style ide page

added a toolbar and tweaked golden-layout stuff to make it fit on the
page well
---
 web/src/cascade                               |  2 +-
 .../IdeCascadeStudio/IdeCascadeStudio.js      | 10 ++-
 web/src/components/IdeToolbar/IdeToolbar.js   | 83 +++++++++++++++++++
 .../IdeToolbar/IdeToolbar.stories.js          | 20 +++++
 .../components/IdeToolbar/IdeToolbar.test.js  | 11 +++
 web/src/components/Svg/Svg.js                 | 28 +++++++
 web/src/index.css                             |  5 ++
 web/src/index.html                            |  2 +-
 web/src/layouts/MainLayout/MainLayout.js      |  4 +-
 9 files changed, 157 insertions(+), 8 deletions(-)
 create mode 100644 web/src/components/IdeToolbar/IdeToolbar.js
 create mode 100644 web/src/components/IdeToolbar/IdeToolbar.stories.js
 create mode 100644 web/src/components/IdeToolbar/IdeToolbar.test.js

diff --git a/web/src/cascade b/web/src/cascade
index 37cea9e..6b451a0 160000
--- a/web/src/cascade
+++ b/web/src/cascade
@@ -1 +1 @@
-Subproject commit 37cea9eeb230f78fb34da95f2543b8c6850606c5
+Subproject commit 6b451a0189b482bc407608f91041cebe66bc42cc
diff --git a/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js b/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js
index 5360e2c..66ff9c8 100644
--- a/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js
+++ b/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>
diff --git a/web/src/components/IdeToolbar/IdeToolbar.js b/web/src/components/IdeToolbar/IdeToolbar.js
new file mode 100644
index 0000000..947b28c
--- /dev/null
+++ b/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
diff --git a/web/src/components/IdeToolbar/IdeToolbar.stories.js b/web/src/components/IdeToolbar/IdeToolbar.stories.js
new file mode 100644
index 0000000..220e196
--- /dev/null
+++ b/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' }
diff --git a/web/src/components/IdeToolbar/IdeToolbar.test.js b/web/src/components/IdeToolbar/IdeToolbar.test.js
new file mode 100644
index 0000000..80c926b
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/web/src/components/Svg/Svg.js b/web/src/components/Svg/Svg.js
index a780be3..b66534f 100644
--- a/web/src/components/Svg/Svg.js
+++ b/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"
diff --git a/web/src/index.css b/web/src/index.css
index 4de5ee1..f6b9d9c 100644
--- a/web/src/index.css
+++ b/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;
diff --git a/web/src/index.html b/web/src/index.html
index eb9c549..71cd297 100644
--- a/web/src/index.html
+++ b/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>
diff --git a/web/src/layouts/MainLayout/MainLayout.js b/web/src/layouts/MainLayout/MainLayout.js
index 03d17ad..aa9d31d 100644
--- a/web/src/layouts/MainLayout/MainLayout.js
+++ b/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}