diff --git a/apps/remix-ide/src/app/components/pinned-panel.tsx b/apps/remix-ide/src/app/components/pinned-panel.tsx index 10f0d9363d..03fc6e1050 100644 --- a/apps/remix-ide/src/app/components/pinned-panel.tsx +++ b/apps/remix-ide/src/app/components/pinned-panel.tsx @@ -15,7 +15,6 @@ const pinnedPanel = { } export class PinnedPanel extends AbstractPanel { - sideelement: any dispatch: React.Dispatch = () => {} loggedState: any diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts index 1db8f29dfb..fa564370f4 100644 --- a/apps/remix-ide/src/app/panels/layout.ts +++ b/apps/remix-ide/src/app/panels/layout.ts @@ -6,7 +6,7 @@ import { QueryParams } from '@remix-project/remix-lib' const profile: Profile = { name: 'layout', description: 'layout', - methods: ['minimize', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal'] + methods: ['minimize', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal', 'maximisePinnedPanel', 'resetPinnedPanel'] } interface panelState { @@ -74,6 +74,16 @@ export class Layout extends Plugin { this.event.emit('resetsidepanel') } }) + + this.on('pinnedPanel', 'pinnedPlugin', async (name) => { + const current = await this.call('pinnedPanel', 'currentFocus') + if (this.maximised[current]) { + this.event.emit('maximisepinnedpanel') + } else { + this.event.emit('resetpinnedpanel') + } + }) + document.addEventListener('keypress', e => { if (e.shiftKey && e.ctrlKey) { if (e.code === 'KeyF') { @@ -110,6 +120,12 @@ export class Layout extends Plugin { this.maximised[current] = true } + async maximisePinnedPanel () { + this.event.emit('maximisepinnedpanel') + const current = await this.call('pinnedPanel', 'currentFocus') + this.maximised[current] = true + } + async maximizeTerminal() { this.panels.terminal.minimized = false this.event.emit('change', this.panels) @@ -121,4 +137,10 @@ export class Layout extends Plugin { const current = await this.call('sidePanel', 'currentFocus') this.maximised[current] = false } + + async resetPinnedPanel () { + this.event.emit('resetpinnedpanel') + const current = await this.call('pinnedPanel', 'currentFocus') + this.maximised[current] = false + } } diff --git a/apps/remix-ide/src/app/tabs/locales/en/panel.json b/apps/remix-ide/src/app/tabs/locales/en/panel.json index ca051c730f..f9a9b2ffd1 100644 --- a/apps/remix-ide/src/app/tabs/locales/en/panel.json +++ b/apps/remix-ide/src/app/tabs/locales/en/panel.json @@ -4,7 +4,7 @@ "panel.documentation": "Documentation", "panel.description": "Description", "panel.maintainedByRemix": "Maintained by Remix", - "panel.pinnedMsg": "Click to return plugin to the right side panel", + "panel.pinnedMsg": "Click to move plugin to the right side panel", "panel.unPinnedMsg": "Click to return plugin to the left side panel", "panel.maintainedExternally": "Not maintained by Remix", "panel.pluginInfo": "Plugin info", diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx index 609cd6edb3..4bbb9066e8 100644 --- a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx +++ b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx @@ -32,22 +32,41 @@ const DragBar = (props: IRemixDragBarUi) => { useEffect(() => { initialWidth.current = props.refObject.current.clientWidth if (props.maximiseTrigger > 0) { - const width = 0.4 * window.innerWidth - if (width > props.refObject.current.offsetWidth) { - props.refObject.current.style.width = width + 'px' - setTimeout(() => { - setDragBarPosX(offset + width) - }, 300) + if (props.layoutPosition === 'left') { + const width = 0.4 * window.innerWidth + + if (width > props.refObject.current.offsetWidth) { + props.refObject.current.style.width = width + 'px' + setTimeout(() => { + setDragBarPosX(offset + width) + }, 300) + } + } else if (props.layoutPosition === 'right') { + const width = 0.4 * window.innerWidth + + if (width > props.refObject.current.offsetWidth) { + props.refObject.current.style.width = width + 'px' + setTimeout(() => { + setDragBarPosX(window.innerWidth - width) + }, 300) + } } } }, [props.maximiseTrigger]) useEffect(() => { if (props.maximiseTrigger > 0) { - props.refObject.current.style.width = initialWidth.current + 'px' - setTimeout(() => { - setDragBarPosX(offset + initialWidth.current) - }, 300) + if (props.layoutPosition === 'left') { + props.refObject.current.style.width = initialWidth.current + 'px' + setTimeout(() => { + setDragBarPosX(offset + initialWidth.current) + }, 300) + } else if (props.layoutPosition === 'right') { + props.refObject.current.style.width = props.minWidth + 'px' + setTimeout(() => { + setDragBarPosX(window.innerWidth - props.minWidth) + }, 300) + } } }, [props.resetTrigger]) diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx index 803be1de60..29dc3de3fd 100644 --- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx +++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx @@ -96,12 +96,6 @@ const RemixApp = (props: IRemixAppUi) => { }) }) - props.app.layout.event.on('minimizepinnedpanel', () => { - setTimeout(() => { - setHidePinnedPanel(true) - }, 1000) - }) - props.app.layout.event.on('maximisepinnedpanel', () => { setMaximiseRightTrigger((prev) => { return prev + 1 @@ -211,15 +205,18 @@ const RemixApp = (props: IRemixAppUi) => {
{props.app.pinnedPanel.render()}
- + { + !hidePinnedPanel && + + }
{props.app.hiddenPanel.render()}
diff --git a/libs/remix-ui/debugger-ui/src/lib/api/debugger-api.ts b/libs/remix-ui/debugger-ui/src/lib/api/debugger-api.ts index 577974a282..0f444a7464 100644 --- a/libs/remix-ui/debugger-ui/src/lib/api/debugger-api.ts +++ b/libs/remix-ui/debugger-ui/src/lib/api/debugger-api.ts @@ -183,14 +183,26 @@ export const DebuggerApiMixin = (Base) => class extends Base { showMessage (title: string, message: string) {} - onStartDebugging (debuggerBackend: any) { - this.call('layout', 'maximiseSidePanel') + async onStartDebugging (debuggerBackend: any) { + const pinnedPlugin = await this.call('pinnedPanel', 'currentFocus') + + if (pinnedPlugin === 'debugger') { + this.call('layout', 'maximisePinnedPanel') + } else { + this.call('layout', 'maximiseSidePanel') + } this.emit('startDebugging') this.debuggerBackend = debuggerBackend } - onStopDebugging () { - this.call('layout', 'resetSidePanel') + async onStopDebugging () { + const pinnedPlugin = await this.call('pinnedPanel', 'currentFocus') + + if (pinnedPlugin === 'debugger') { + this.call('layout', 'resetPinnedPanel') + } else { + this.call('layout', 'resetSidePanel') + } this.emit('stopDebugging') this.debuggerBackend = null }