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

aupdated headless-ui, got started on naive implementation

Browse Source
This commit is contained in:
Frank Johnson
2021-09-10 02:29:13 -04:00
parent 5d128c6cbd
commit 206ec7fdab
4 changed files with 93 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/web/package.json
View File

@@ -13,7 +13,7 @@
]
},
"dependencies": {
"@headlessui/react": "^1.0.0",
"@headlessui/react": "^1.4.1",
"@heroicons/react": "^1.0.4",
"@material-ui/core": "^4.11.0",
"@monaco-editor/react": "^4.0.11",

75
app/web/src/components/IdeSideBar/IdeSideBar.tsx
View File

@@ -1,5 +1,44 @@
import { Link, routes } from '@redwoodjs/router'
import Svg from 'src/components/Svg/Svg'
import { Tab } from '@headlessui/react'
import Svg, { SvgNames } from 'src/components/Svg/Svg'
import { ReactNode } from 'react'
interface SidebarConfigType {
name: string,
icon: SvgNames,
disabled: boolean,
panel: ReactNode | null,
}
const sidebarTopConfig : SidebarConfigType[] = [
{
name: 'Files',
icon: 'files',
disabled: false,
panel: () => { <h2>Some Files!</h2> },
},
{
name: 'GitHub',
icon: 'github',
disabled: false,
panel: () => { <h2>Le GitHub Integration™️</h2> },
},
{
name: 'Visibility',
icon: 'eye',
disabled: true,
panel: null,
},
]
const sidebarBottomConfig : SidebarConfigType[] = [
{
name: 'Settings',
icon: 'gear',
disabled: true,
panel: null,
},
]
const IdeSideBar = () => {
return (
@@ -9,13 +48,33 @@ const IdeSideBar = () => {
<Svg className="w-12 p-0.5" name="favicon" />
</Link>
</div>
<button
className="text-gray-300 p-3 pb-6 flex justify-center cursor-not-allowed"
aria-label="IDE settings"
disabled
>
<Svg name="gear" />
</button>
<Tab.Group vertical>
<Tab.List className="h-full flex flex-col justify-between">
<div>
{ sidebarTopConfig.map(topItem => (
<Tab disabled={topItem.disabled}
key={'tab-'+topItem.name}
className="text-gray-300 p-3 pb-6 flex justify-center">
<Svg name={topItem.icon} className="w-8 mx-auto"/>
</Tab>
))}
</div>
<div>
{ sidebarBottomConfig.map(bottomItem => (
<Tab disabled={bottomItem.disabled}
key={'tab-'+bottomItem.name}
className="text-gray-300 p-3 pb-6 flex justify-center">
<Svg name={bottomItem.icon} className="w-8 mx-auto" />
</Tab>
))}
</div>
</Tab.List>
<Tab.Panels>
{ ([...sidebarTopConfig, ...sidebarBottomConfig]).map(item => item.panel && (
<Tab.Panel key={'panel-'+item.name}>{ item.panel }</Tab.Panel>
)) }
</Tab.Panels>
</Tab.Group>
</div>
)
}

22
app/web/src/components/Svg/Svg.tsx
View File

@@ -1,4 +1,4 @@
type SvgNames =
export type SvgNames =
| 'arrow-down'
// | 'arrow'
| 'arrow-left'
@@ -8,12 +8,15 @@ type SvgNames =
| 'dots-vertical'
| 'drag-grid'
| 'exclamation-circle'
| 'eye'
| 'favicon'
| 'files'
| 'flag'
| 'floppy-disk'
| 'fork'
| 'fork-new'
| 'gear'
| 'github'
| 'lightbulb'
| 'logout'
| 'mac-cmd-key'
@@ -159,6 +162,12 @@ const Svg = ({
/>
</svg>
),
eye: (
<svg viewBox="0 0 34 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M33.6281 10.3992C33.9385 10.0498 33.9385 9.53738 33.6281 9.18801C31.7613 7.08739 25.0664 0.242065 17.0935 0.242065C9.12069 0.242065 2.42579 7.08739 0.559031 9.18801C0.248552 9.53738 0.248552 10.0498 0.559031 10.3992C2.42579 12.4998 9.12069 19.3451 17.0935 19.3451C25.0664 19.3451 31.7613 12.4998 33.6281 10.3992ZM17.0935 17.7936C21.5118 17.7936 25.0935 14.2119 25.0935 9.79359C25.0935 5.37532 21.5118 1.7936 17.0935 1.7936C12.6753 1.7936 9.09354 5.37532 9.09354 9.79359C9.09354 14.2119 12.6753 17.7936 17.0935 17.7936Z" fill="currentColor"/>
<ellipse cx="17.0932" cy="9.79354" rx="4.31588" ry="4.31588" fill="currentColor"/>
</svg>
),
favicon: (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2667 2667">
<defs>
@@ -258,6 +267,12 @@ const Svg = ({
</g>
</svg>
),
files: (
<svg viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M4.54121 6.31592C3.23314 6.31592 2.17274 7.37633 2.17274 8.6844V28.6849C2.17274 29.9929 3.23314 31.0534 4.54121 31.0534H19.2784C20.5865 31.0534 21.6469 29.9929 21.6469 28.6849V26.342H23.2259V28.6849C23.2259 30.865 21.4585 32.6323 19.2784 32.6323H4.54121C2.36109 32.6323 0.59375 30.865 0.59375 28.6849V8.6844C0.59375 6.50428 2.36109 4.73694 4.54121 4.73694H8.50454V6.31592H4.54121Z" fill="currentColor"/>
<path fillRule="evenodd" clipRule="evenodd" d="M20.871 0H11.699C9.95489 0 8.54102 1.41387 8.54102 3.15797V23.1584C8.54102 24.9025 9.95489 26.3164 11.699 26.3164H26.4362C28.1803 26.3164 29.5942 24.9025 29.5942 23.1584V8.90104L20.871 0ZM26.6096 8.11155L21.6605 3.0615V5.74308C21.6605 7.05115 22.7209 8.11155 24.029 8.11155H26.6096ZM20.0815 1.57898H11.699C10.8269 1.57898 10.12 2.28592 10.12 3.15797V23.1584C10.12 24.0305 10.8269 24.7374 11.699 24.7374H26.4362C27.3082 24.7374 28.0152 24.0305 28.0152 23.1584V9.69054H24.029C21.8489 9.69054 20.0815 7.9232 20.0815 5.74308V1.57898Z" fill="currentColor"/>
</svg>
),
flag: (
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -338,6 +353,11 @@ const Svg = ({
d="M18.5596 32.6494L14.4414 32.6493L13.3126 27.3566L11.1836 26.4752L6.6429 29.4195L3.73084 26.5076L6.75991 22.0513L5.79279 19.838L0.500103 18.7091L0.5 14.591L5.79292 13.5818L6.75988 11.2476L3.73082 6.79131L6.64287 3.8794L11.1836 6.82369L13.3115 5.9422L14.4403 0.649517L18.5585 0.649414L19.5677 5.94233L21.9012 6.90846L26.3575 3.87939L29.2694 6.79145L26.3251 11.3321L27.2071 13.5807L32.5 14.5899L32.4999 18.708L27.2072 19.8369L26.3251 21.9667L29.2694 26.5074L26.3575 29.4195L21.9012 26.3904L19.5688 27.3565L18.5596 32.6494ZM16.5001 22.2987C13.3792 22.2987 10.8492 19.7687 10.8492 16.6478C10.8492 13.5269 13.3792 10.997 16.5001 10.997C19.621 10.997 22.151 13.5269 22.151 16.6478C22.151 19.7687 19.621 22.2987 16.5001 22.2987Z"/>
</svg>
),
github: (
<svg viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M17.0938 0.632324C7.70125 0.632324 0.09375 8.23982 0.09375 17.6323C0.09375 25.1548 4.96 31.5086 11.7175 33.7611C12.5675 33.9098 12.8862 33.3998 12.8862 32.9536C12.8862 32.5498 12.865 31.2111 12.865 29.7873C8.59375 30.5736 7.48875 28.7461 7.14875 27.7898C6.9575 27.3011 6.12875 25.7923 5.40625 25.3886C4.81125 25.0698 3.96125 24.2836 5.385 24.2623C6.72375 24.2411 7.68 25.4948 7.99875 26.0048C9.52875 28.5761 11.9725 27.8536 12.95 27.4073C13.0988 26.3023 13.545 25.5586 14.0337 25.1336C10.2513 24.7086 6.29875 23.2423 6.29875 16.7398C6.29875 14.8911 6.9575 13.3611 8.04125 12.1711C7.87125 11.7461 7.27625 10.0036 8.21125 7.66607C8.21125 7.66607 9.635 7.21983 12.8862 9.40858C14.2463 9.02608 15.6913 8.83482 17.1363 8.83482C18.5813 8.83482 20.0263 9.02608 21.3863 9.40858C24.6375 7.19858 26.0613 7.66607 26.0613 7.66607C26.9963 10.0036 26.4013 11.7461 26.2313 12.1711C27.315 13.3611 27.9737 14.8698 27.9737 16.7398C27.9737 23.2636 24 24.7086 20.2175 25.1336C20.8337 25.6648 21.365 26.6848 21.365 28.2786C21.365 30.5523 21.3438 32.3798 21.3438 32.9536C21.3438 33.3998 21.6625 33.9311 22.5125 33.7611C29.2275 31.5086 34.0938 25.1336 34.0938 17.6323C34.0938 8.23982 26.4862 0.632324 17.0938 0.632324Z" fill="currentColor"/>
</svg>
),
lightbulb: (
<svg
xmlns="http://www.w3.org/2000/svg"

8
app/yarn.lock
View File

@@ -2007,10 +2007,10 @@
resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-2.0.0.tgz#5bb2193eb685c0007540ca61d166d4e1edaf918d"
integrity sha512-WEezM1FWztfbzqIUbsDzFRVMxSoLy3HugVcux6KDDtTqzPsLE8NDRHfXvev66aH1i2oOKKar3/XDjbvh/OUBdg==
"@headlessui/react@^1.0.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.2.0.tgz#e48652bfce82ddf73d7f331faeb9db6526ee6874"
integrity sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==
"@headlessui/react@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.1.tgz#0a8dbb20e1d63dcea55bfc3ab1b87637aaac7777"
integrity sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==
"@heroicons/react@^1.0.4":
version "1.0.4"