IDE redesign, initial implementation #362
Reference in New Issue
Block a user
Delete Branch "kurt/update-ide-panel-toolbar-360"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Preview link
IDE currently looks like:
The gear buttons on each of the panels as well as in the bottom left hand corner currently don't do anything.
File has two options at the moment
View has one:
and Edit has none.
The share button has some temporary options that will change once we allow parts/projects to be saved on the website. Atm it dedicated to encoded-urls.
There is the fully encoded url tab:
as well as eternal resource URLs
Pasting a link changes the UI to this.
"Copy URL" is self explanatory, and "Create another URL" just takes you back to previous UI, but "Copy and Render" is intended to allow the user to check the code from the URL actually works, but maybe these shouldn't be coupled and it should just be "render" or "test render"?
I'm also not sure about the copy on both of these share flows, open to input.
The learn more link goes here
One other small thing is I've made the construction message collapsable, as I think it needs to be there still but nice to be able to close it.
I also did a fair amount of clean up.
Random grey box just as a place holder, will add users at a later point.
I think I'll work on the LHS panel next, but thought this work was complete enough to deploy.
Resolves #360
@@ -0,0 +5,4 @@import { useRender } from 'src/components/IdeWrapper/useRender'import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'const EditorMenu = () => {@@ -0,0 +55,4 @@export default EditorMenufunction FileDropdown({ handleRender, handleStlDownload }) {@@ -0,0 +95,4 @@)}function ViewDropdown({ handleLayoutReset }) {@@ -0,0 +6,4 @@import { useRender } from 'src/components/IdeWrapper/useRender'import { toast } from '@redwoodjs/web/toast'const ExternalScript = () => {and
@@ -0,0 +26,4 @@target,}) => setRawUrl(target.value)const onKeyDown = async ({ key, target }) =>key === 'Enter' && processUserUrl(target.value)When a user pastes a url it will immediately start processing it without having a "submit" button. I think this is appropriate since the whole point is to link to an external URL and no one will be typing those, you can type and hit enter though.
@@ -0,0 +2,4 @@import { copyTextToClipboard } from 'src/helpers/clipboard'import { useIdeContext } from 'src/helpers/hooks/useIdeContext'const FullScriptEncoding = () => {@@ -0,0 +32,4 @@}#${fetchText}=${prepareDecodedUrl(resourceUrl)}`}export function useIdeInit(cadPackage: string) {All of the logic in this hook I had in the
IdeToolbarNewbecause that was the main wrapping component that had the context provider, so it made sense to have init useEffects there. However since most of the logic relates to checking if there is something encoded in the URL, I thought it made sense to bundle the logic here with the rest of the encoded url code, and bring it intoIdeToolbarNewas a custom hook.I've also now rename
IdeToolbarNewtoIdeWrapper@@ -0,0 +23,4 @@</button>)const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {@@ -0,0 +1,23 @@import { Link, routes } from '@redwoodjs/router'import Svg from 'src/components/Svg/Svg'const IdeSideBar = () => {Moved the context provider up to the page component.
@@ -0,0 +5,4 @@import { useRender } from 'src/components/IdeWrapper/useRender'import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'const EditorMenu = () => {Did you do all these snippet images manually? They're very helpful!
@@ -0,0 +43,4 @@</div><div className="flex items-center cursor-default"><divclassName={`${isOpenScad && 'bg-yellow-200'} ${With the additional background I added in the latest Figma designs we may want to start aliasing the CAD packages to class names in the next round so several elements can inherit styles.
Dig this.
@@ -0,0 +13,4 @@><Svg name="gear" className="w-7 p-px" /></button>{mosaicWindowActions.connectDragSource(Also rad!
@@ -0,0 +5,4 @@import { useRender } from 'src/components/IdeWrapper/useRender'import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'const EditorMenu = () => {:)
Yeah I did.
CContext is super important when trying to look at other's code. You could have figured this out yourself but 20x quicker for me to add a few screen shots.
@@ -0,0 +43,4 @@</div><div className="flex items-center cursor-default"><divclassName={`${isOpenScad && 'bg-yellow-200'} ${Oh right, yeah that's a good idea.