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

issue-95 Style ide page

Browse Source 
added a toolbar and tweaked golden-layout stuff to make it fit on the
page well
This commit is contained in:
Kurt Hutten
2020-11-14 17:35:58 +11:00
parent 585a839525
commit 0ede0be0b4
9 changed files with 157 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/cascade

Submodule web/src/cascade updated: 37cea9eeb2...6b451a0189

10
web/src/components/IdeCascadeStudio/IdeCascadeStudio.js
View File

@@ -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>

83
web/src/components/IdeToolbar/IdeToolbar.js Normal file
View File

@@ -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

20
web/src/components/IdeToolbar/IdeToolbar.stories.js Normal file
View File

@@ -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' }

11
web/src/components/IdeToolbar/IdeToolbar.test.js Normal file
View File

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

28
web/src/components/Svg/Svg.js
View File

@@ -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"

5
web/src/index.css
View File

@@ -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;

2
web/src/index.html
View File

@@ -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>

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

@@ -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}