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

IDE redesign, initial implementation #362

Merged
Irev-Dev merged 17 commits from kurt/update-ide-panel-toolbar-360 into main 2021-06-15 10:05:03 +02:00
Conversation 13 Commits 17 Files Changed 30 +82 -51
2 changed files with 82 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 155923b2e7 - Show all commits

107
app/web/src/components/EditorMenu/EditorMenu.tsx
View File

@@ -31,9 +31,7 @@ const EditorMenu = () => {
<button className="cursor-not-allowed" disabled>
Edit
</button>
<button className="cursor-not-allowed" disabled>
View
</button>
<ViewDropdown handleLayoutReset={() => thunkDispatch({type: 'resetLayout'})} />
</div>
<button
className="text-gray-300 h-full cursor-not-allowed"
@@ -59,43 +57,70 @@ export default EditorMenu
function FileDropdown({ handleRender, handleStlDownload }) {
Irev-Dev commented 2021-06-14 02:21:45 +02:00 (Migrated from github.com)
Review
Copy Link

image

![image](https://user-images.githubusercontent.com/29681384/121826279-4ff0bf00-ccfa-11eb-8315-bd8a4cfc0ef7.png)
return (
<Menu>
<Menu.Button className="text-gray-100">File</Menu.Button>
<Menu.Items className="absolute flex flex-col mt-10 bg-gray-500 rounded shadow-md text-gray-100">
<Menu.Item>
{({ active }) => (
<button
className={`${active && 'bg-gray-600'} px-2 py-1`}
onClick={handleRender}
>
Save &amp; Render{' '}
<span className="text-gray-400 pl-4">
{/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? (
<>
<Svg
name="mac-cmd-key"
className="h-3 w-3 inline-block text-left"
/>
S
</>
) : (
'Ctrl S'
)}
</span>
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
onClick={handleStlDownload}
>
Download STL
</button>
)}
</Menu.Item>
</Menu.Items>
</Menu>
<Dropdown name="File">
<Menu.Item>
{({ active }) => (
<button
className={`${active && 'bg-gray-600'} px-2 py-1`}
onClick={handleRender}
>
Save &amp; Render{' '}
<span className="text-gray-400 pl-4">
{/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? (
<>
<Svg
name="mac-cmd-key"
className="h-3 w-3 inline-block text-left"
/>
S
</>
) : (
'Ctrl S'
)}
</span>
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
onClick={handleStlDownload}
>
Download STL
</button>
)}
</Menu.Item>
</Dropdown>
)
}
function ViewDropdown({ handleLayoutReset }) {
Irev-Dev commented 2021-06-14 02:21:59 +02:00 (Migrated from github.com)
Review
Copy Link

image

![image](https://user-images.githubusercontent.com/29681384/121826302-66971600-ccfa-11eb-8aa7-f48b627bc6a9.png)
return (
<Dropdown name="View">
<Menu.Item>
{({ active }) => (
<button
className={`${active && 'bg-gray-600'} px-2 py-1`}
onClick={handleLayoutReset}
>
Reset layout
</button>
)}
</Menu.Item>
</Dropdown>
)
}
function Dropdown({ name, children }: {name: string, children: React.ReactNode}) {
return (
<div className="relative">
<Menu>
<Menu.Button className="text-gray-100">{name}</Menu.Button>
<Menu.Items className="absolute flex flex-col mt-4 bg-gray-500 rounded shadow-md text-gray-100 overflow-hidden whitespace-nowrap">
{children}
</Menu.Items>
</Menu>
</div>
)
}

26
app/web/src/helpers/hooks/useIdeState.js
View File

@@ -47,6 +47,16 @@ let mutableState = null
export const useIdeState = () => {
const code = ''
const initialLayout = {
direction: 'row',
first: 'Editor',
second: {
direction: 'column',
first: 'Viewer',
second: 'Console',
splitPercentage: 70,
},
}
const initialState = {
ideType: 'INIT',
consoleMessages: [
@@ -57,16 +67,7 @@ export const useIdeState = () => {
type: 'INIT',
data: null,
},
layout: {
direction: 'row',
first: 'Editor',
second: {
direction: 'column',
first: 'Viewer',
second: 'Console',
splitPercentage: 70,
},
},
layout: initialLayout,
camera: {},
viewerSize: { width: 0, height: 0 },
isLoading: false,
@@ -129,6 +130,11 @@ export const useIdeState = () => {
...state,
isLoading: false,
}
case 'resetLayout':
return {
...state,
layout: initialLayout,
}
default:
return state
}