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

Add the beginnings of the customizer UI

Browse Source 
Relates to #320
This commit is contained in:
Kurt Hutten
2021-08-02 22:48:59 +10:00
parent 5e14ad0829
commit 8883df3445
3 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/web/src/components/Customizer/Customizer.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { useRender } from 'src/components/IdeWrapper/useRender'
const Customizer = () => {
const [open, setOpen] = React.useState(true)
const ref = React.useRef()
const jsCadCustomizerElement = ref.current
React.useEffect(() => {
console.log(jsCadCustomizerElement)
if (jsCadCustomizerElement) {
jsCadCustomizerElement.innerHTML = `<div>hi there</div>`
}
}, [jsCadCustomizerElement])
const handleRender = useRender()
return (
<div className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${open ? 'h-2/3' : ''}`}>
<div className="flex justify-between px-6 py-2 items-center">
<div className="flex gap-6 items-center">
<button className="px-2" onClick={() => setOpen(!open)}>{open ? '⬇' : '⬆'}</button>
<div>Parameters</div>
</div>
<button className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800" onClick={handleRender}>Update</button>
</div>
<div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto py-3 px-12`}>
<div id="jscad-customizer-block" ref={ref}>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
<p>lots of lines should cause scroll</p>
</div>
</div>
</div>
)
}
export default Customizer