Default to file-explorer

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

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 {
+  pinView (profile, view) {
-    return Object.values(this.plugins).find(plugin => {
+    const activePlugin = this.currentFocus()
-      return plugin.pinned
-    }).profile.name
-  }
 
-  removeView(profile) {
+    if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already pinned`) 
-    this.remove(profile.name)
+    if (activePlugin) this.remove(activePlugin)
-    this.emit('unpinnedPlugin', profile.name)
+    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) {
+  unPinView (profile) {
-    super.addView(profile, view)
+    const activePlugin = this.currentFocus()
-    this.plugins[profile.name].pinned = true
+
-    super.showContent(profile.name)
+    if (activePlugin !== profile.name) throw new Error(`Plugin ${profile.name} already pinned`)
-    this.emit('pinnedPlugin', profile.name)
+    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() {

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.call('pinnedPanel', 'pinView', profile, view)
-    // this.removeView(profile)
+    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)
   }
 
   /**

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" />}>
+                {/* <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>
+                  <div className="remix-ui-tabs_end remix-bg-opacity position-absolute"></div>
-                </CustomTooltip>
+                </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>

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 ? (
+            plugin && plugin.profile.name !== 'filePanel' && (
-              <div className='d-flex' onClick={pinPlugin}>
+              <RenderIfNot condition={plugin.profile.name === 'filePanel'}>
-                <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>
+                  <RenderIf condition={plugin.pinned}>
-                </CustomTooltip>
+                    <div className='d-flex' onClick={unPinPlugin}>
-              </div>
+                      <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>
-              <div className='d-flex' onClick={unPinPlugin}>
+                      </CustomTooltip>
-                <CustomTooltip placement="right-end" tooltipId="unPinnedMsg" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="panel.unPinnedMsg" />}>
+                    </div>
-                  <i aria-hidden="true" className="text-success mt-1 px-1 pl-2 fas fa-thumbtack"></i>
+                  </RenderIf>
-                </CustomTooltip>
+                  <RenderIfNot condition={plugin.pinned}>
-              </div>
+                    <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>