Default to file-explorer

6 months ago · 9ad8909ea9
parent 450372e10d
commit 9ad8909ea9
5 changed files with 75 additions and 43 deletions
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/apps/remix-ide/src/app/components/panel.ts
@ -15,9 +15,11 @@ export class AbstractPanel extends HostPlugin {
  }

  currentFocus (): string {
-    return Object.values(this.plugins).find(plugin => {
+    const activePlugin = Object.values(this.plugins).find(plugin => {
      return plugin.active
-    }).profile.name
+    })
+
+    return activePlugin ? activePlugin.profile.name : null
  }

  addView (profile, view) {
--- a/apps/remix-ide/src/app/components/pinned-panel.tsx
+++ b/apps/remix-ide/src/app/components/pinned-panel.tsx
@ -1,7 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
 import { AbstractPanel } from './panel'
-import { RemixPluginPanel } from '@remix-ui/panel'
+import { PluginRecord, RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixUIPanelHeader } from '@remix-ui/panel'
 import { PluginViewWrapper } from '@remix-ui/helper'
@ -11,7 +11,7 @@ const pinnedPanel = {
  displayName: 'Pinned Panel',
  description: 'Remix IDE pinned panel',
  version: packageJson.version,
-  methods: ['addView', 'removeView', 'currentFocus']
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView']
 }

 export class PinnedPanel extends AbstractPanel {
@ -26,24 +26,26 @@ export class PinnedPanel extends AbstractPanel {
    this.renderComponent()
  }

-  currentFocus (): string {
-    return Object.values(this.plugins).find(plugin => {
-      return plugin.pinned
-    }).profile.name
-  }
+  pinView (profile, view) {
+    const activePlugin = this.currentFocus()

-  removeView(profile) {
-    this.remove(profile.name)
-    this.emit('unpinnedPlugin', profile.name)
+    if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already pinned`) 
+    if (activePlugin) this.remove(activePlugin)
+    this.addView(profile, view)
+    this.plugins[profile.name].pinned = true
+    this.plugins[profile.name].active = true
    this.renderComponent()
+    this.events.emit('pinnedPlugin', profile.name)
  }

-  addView(profile, view) {
-    super.addView(profile, view)
-    this.plugins[profile.name].pinned = true
-    super.showContent(profile.name)
-    this.emit('pinnedPlugin', profile.name)
+  unPinView (profile) {
+    const activePlugin = this.currentFocus()
+
+    if (activePlugin !== profile.name) throw new Error(`Plugin ${profile.name} already pinned`)
+    super.remove(profile.name)
+    this.call('sidePanel', 'unPinView', profile)
    this.renderComponent()
+    this.events.emit('unPinnedPlugin', profile.name)
  }

  setDispatch (dispatch: React.Dispatch<any>) {
@ -57,7 +59,7 @@ export class PinnedPanel extends AbstractPanel {
  }

  updateComponent(state: any) {
-    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} />
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} />
  }

  renderComponent() {
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@ -12,7 +12,7 @@ const sidePanel = {
  displayName: 'Side Panel',
  description: 'Remix IDE side panel',
  version: packageJson.version,
-  methods: ['addView', 'removeView', 'currentFocus']
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView']
 }

 export class SidePanel extends AbstractPanel {
@ -65,22 +65,35 @@ export class SidePanel extends AbstractPanel {
  }

  addView(profile, view) {
+    console.log(profile.name)
    super.addView(profile, view)
    this.call('menuicons', 'linkContent', profile)
    this.renderComponent()
  }

+  hideView(profile) {
+    this.plugins[profile.name].active = false
+    this.plugins['filePanel'].active = true
+    this.call('menuicons', 'unlinkContent', profile)
+    this.renderComponent()
+  }
+
+  showView(profile) {
+    this.call('menuicons', 'linkContent', profile)
+    this.renderComponent()
+  }
+
  pinView (profile, view) {
    if (this.plugins[profile.name].pinned) return
    this.plugins[profile.name].pinned = true
-    this.call('pinnedPanel', 'addView', profile, view)
-    // this.removeView(profile)
+    this.call('pinnedPanel', 'pinView', profile, view)
+    this.hideView(profile)
  }

  unPinView (profile) {
    if (!this.plugins[profile.name].pinned) return
    this.plugins[profile.name].pinned = false
-    this.call('pinnedPanel', 'removeView', profile)
+    this.showView(profile)
  }

  /**
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@ -27,7 +27,7 @@ const RemixApp = (props: IRemixAppUi) => {
  const [appReady, setAppReady] = useState<boolean>(false)
  const [showEnterDialog, setShowEnterDialog] = useState<boolean>(false)
  const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
-  const [hidePinnedPanel, setHidePinnedPanel] = useState<boolean>(false)
+  const [hidePinnedPanel, setHidePinnedPanel] = useState<boolean>(true)
  const [maximiseLeftTrigger, setMaximiseLeftTrigger] = useState<number>(0)
  const [resetLeftTrigger, setResetLeftTrigger] = useState<number>(0)
  const [maximiseRightTrigger, setMaximiseRightTrigger] = useState<number>(0)
@ -118,6 +118,14 @@ const RemixApp = (props: IRemixAppUi) => {
      setLocale(nextLocale)
    })

+    props.app.pinnedPanel.events.on('pinnedPlugin', () => {
+      setHidePinnedPanel(false)
+    })
+
+    props.app.pinnedPanel.events.on('unPinnedPlugin', () => {
+      setHidePinnedPanel(true)
+    })
+
    setInterval(() => {
      setOnline(window.navigator.onLine)
    }, 1000)
@ -199,9 +207,9 @@ const RemixApp = (props: IRemixAppUi) => {
              ></DragBar>
              <div id="main-panel" data-id="remixIdeMainPanel" className="mainpanel d-flex">
                <RemixUIMainPanel layout={props.app.layout}></RemixUIMainPanel>
-                <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-all-tabs" tooltipText={<FormattedMessage id="remixApp.scrollToSeeAllTabs" />}>
-                  <div className="remix-ui-tabs_end remix-bg-opacity position-absolute position-fixed"></div>
-                </CustomTooltip>
+                {/* <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-all-tabs" tooltipText={<FormattedMessage id="remixApp.scrollToSeeAllTabs" />}>
+                  <div className="remix-ui-tabs_end remix-bg-opacity position-absolute"></div>
+                </CustomTooltip> */}
              </div>
              <DragBar
                resetTrigger={resetRightTrigger}
@ -212,7 +220,7 @@ const RemixApp = (props: IRemixAppUi) => {
                setHideStatus={setHideSidePanel}
                layoutPosition='right'
              ></DragBar>
-              <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className='pinnedpanel d-flex border-right border-left'>
+              <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className={`pinnedpanel border-right border-left ${hidePinnedPanel ? 'd-none' : 'd-flex'}`}>
                {props.app.pinnedPanel.render()}
              </div>
            </div>
--- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react' // eslint-disable-line
 import {FormattedMessage} from 'react-intl'
 import {PluginRecord} from '../types'
 import './panel.css'
-import { CustomTooltip } from '@remix-ui/helper'
+import {CustomTooltip, RenderIf, RenderIfNot} from '@remix-ui/helper'

 export interface RemixPanelProps {
  plugins: Record<string, PluginRecord>,
@ -47,32 +47,39 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
        <div className="d-flex flex-row">
          <div className="d-flex flex-row">
            {plugin?.profile?.maintainedBy?.toLowerCase() === 'remix' ? (
-              <CustomTooltip placement="right-end" tooltipId="maintainedByTooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.maintainedByRemix" />}>
+              <CustomTooltip placement="auto-end" tooltipId="maintainedByTooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.maintainedByRemix" />}>
                <i aria-hidden="true" className="text-success mt-1 px-1 fas fa-check"></i>
              </CustomTooltip>)
-              : (<CustomTooltip placement="right-end" tooltipId="maintainedExternally" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.maintainedExternally" />}>
+              : (<CustomTooltip placement="auto-end" tooltipId="maintainedExternally" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.maintainedExternally" />}>
                <i aria-hidden="true" className="mt-1 px-1 text-warning far fa-exclamation-circle"></i>
              </CustomTooltip>)
            }
          </div>
          <div className="swapitHeaderInfoSection d-flex justify-content-between" data-id="swapitHeaderInfoSectionId" onClick={toggleClass}>
-            <CustomTooltip placement="right-end" tooltipText={<FormattedMessage id="panel.pluginInfo" />} tooltipId="pluginInfoTooltip" tooltipClasses="text-nowrap">
+            <CustomTooltip placement="auto-end" tooltipText={<FormattedMessage id="panel.pluginInfo" />} tooltipId="pluginInfoTooltip" tooltipClasses="text-nowrap">
              {tooltipChild}
            </CustomTooltip>
          </div>
          {
-            !plugin?.pinned ? (
-              <div className='d-flex' onClick={pinPlugin}>
-                <CustomTooltip placement="right-end" tooltipId="pinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.pinnedMsg" />}>
-                  <i aria-hidden="true" className="mt-1 px-1 pl-2 fas fa-thumbtack"></i>
-                </CustomTooltip>
-              </div>
-            ) : (
-              <div className='d-flex' onClick={unPinPlugin}>
-                <CustomTooltip placement="right-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
-                  <i aria-hidden="true" className="text-success mt-1 px-1 pl-2 fas fa-thumbtack"></i>
-                </CustomTooltip>
-              </div>
+            plugin && plugin.profile.name !== 'filePanel' && (
+              <RenderIfNot condition={plugin.profile.name === 'filePanel'}>
+                <>
+                  <RenderIf condition={plugin.pinned}>
+                    <div className='d-flex' onClick={unPinPlugin}>
+                      <CustomTooltip placement="auto-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
+                        <i aria-hidden="true" className="text-success mt-1 px-1 pl-2 fas fa-thumbtack"></i>
+                      </CustomTooltip>
+                    </div>
+                  </RenderIf>
+                  <RenderIfNot condition={plugin.pinned}>
+                    <div className='d-flex' onClick={pinPlugin}>
+                      <CustomTooltip placement="auto-end" tooltipId="pinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.pinnedMsg" />}>
+                        <i aria-hidden="true" className="mt-1 px-1 pl-2 fas fa-thumbtack"></i>
+                      </CustomTooltip>
+                    </div>
+                  </RenderIfNot>
+                </>
+              </RenderIfNot>
            )
          }
        </div>