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

Add reset view to view dropdown in EditorMenu

Browse Source 
Related to #360
This commit is contained in:
Kurt Hutten
2021-06-14 09:21:47 +10:00
parent b65c4530b2
commit 155923b2e7
2 changed files with 82 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 }) {
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 }) {
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
}