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> <button className="cursor-not-allowed" disabled>
Edit Edit
</button> </button>
<button className="cursor-not-allowed" disabled> <ViewDropdown handleLayoutReset={() => thunkDispatch({type: 'resetLayout'})} />
View
</button>
</div> </div>
<button <button
className="text-gray-300 h-full cursor-not-allowed" className="text-gray-300 h-full cursor-not-allowed"
@@ -59,43 +57,70 @@ export default EditorMenu
function FileDropdown({ handleRender, handleStlDownload }) { function FileDropdown({ handleRender, handleStlDownload }) {
return ( return (
<Menu> <Dropdown name="File">
<Menu.Button className="text-gray-100">File</Menu.Button> <Menu.Item>
<Menu.Items className="absolute flex flex-col mt-10 bg-gray-500 rounded shadow-md text-gray-100"> {({ active }) => (
<Menu.Item> <button
{({ active }) => ( className={`${active && 'bg-gray-600'} px-2 py-1`}
<button onClick={handleRender}
className={`${active && 'bg-gray-600'} px-2 py-1`} >
onClick={handleRender} Save &amp; Render{' '}
> <span className="text-gray-400 pl-4">
Save &amp; Render{' '} {/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? (
<span className="text-gray-400 pl-4"> <>
{/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? ( <Svg
<> name="mac-cmd-key"
<Svg className="h-3 w-3 inline-block text-left"
name="mac-cmd-key" />
className="h-3 w-3 inline-block text-left" S
/> </>
S ) : (
</> 'Ctrl S'
) : ( )}
'Ctrl S' </span>
)} </button>
</span> )}
</button> </Menu.Item>
)} <Menu.Item>
</Menu.Item> {({ active }) => (
<Menu.Item> <button
{({ active }) => ( className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
<button onClick={handleStlDownload}
className={`${active && 'bg-gray-600'} px-2 py-1 text-left`} >
onClick={handleStlDownload} Download STL
> </button>
Download STL )}
</button> </Menu.Item>
)} </Dropdown>
</Menu.Item> )
</Menu.Items> }
</Menu>
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 = () => { export const useIdeState = () => {
const code = '' const code = ''
const initialLayout = {
direction: 'row',
first: 'Editor',
second: {
direction: 'column',
first: 'Viewer',
second: 'Console',
splitPercentage: 70,
},
}
const initialState = { const initialState = {
ideType: 'INIT', ideType: 'INIT',
consoleMessages: [ consoleMessages: [
@@ -57,16 +67,7 @@ export const useIdeState = () => {
type: 'INIT', type: 'INIT',
data: null, data: null,
}, },
layout: { layout: initialLayout,
direction: 'row',
first: 'Editor',
second: {
direction: 'column',
first: 'Viewer',
second: 'Console',
splitPercentage: 70,
},
},
camera: {}, camera: {},
viewerSize: { width: 0, height: 0 }, viewerSize: { width: 0, height: 0 },
isLoading: false, isLoading: false,
@@ -129,6 +130,11 @@ export const useIdeState = () => {
...state, ...state,
isLoading: false, isLoading: false,
} }
case 'resetLayout':
return {
...state,
layout: initialLayout,
}
default: default:
return state return state
} }