Simple pin implementation

apps/remix-ide/src/app.js

@@ -9,6 +9,7 @@ import {Web3ProviderModule} from './app/tabs/web3-provider'
 import {CompileAndRun} from './app/tabs/compile-and-run'
 import {SidePanel} from './app/components/side-panel'
 import {HiddenPanel} from './app/components/hidden-panel'
+import {PinnedPanel} from './app/components/pinned-panel'
 import {VerticalIcons} from './app/components/vertical-icons'
 import {LandingPage} from './app/ui/landing-page/landing-page'
 import {MainPanel} from './app/components/main-panel'
@@ -389,7 +390,7 @@ class AppComponent {
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor, appManager)
 
-    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, filePanel, pluginManagerComponent, this.settings])
+    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
     const openZeppelinProxy = new OpenZeppelinProxy(blockchain)

apps/remix-ide/src/app/components/pinned-panel.tsx

@@ -26,29 +26,23 @@ export class PinnedPanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  focus(name) {
-    this.emit('focusChanged', name)
-    super.focus(name)
+  currentFocus (): string {
+    return Object.values(this.plugins).find(plugin => {
+      return plugin.pinned
+    }).profile.name
   }
 
   removeView(profile) {
-    super.removeView(profile)
+    this.remove(profile.name)
     this.emit('unpinnedPlugin', profile.name)
     this.renderComponent()
   }
 
   addView(profile, view) {
     super.addView(profile, view)
-    this.renderComponent()
-  }
-
-  /**
-   * Display content and update the header
-   * @param {String} name The name of the plugin to display
-   */
-  async showContent(name) {
-    super.showContent(name)
-    this.emit('focusChanged', name)
+    this.plugins[profile.name].pinned = true
+    super.showContent(profile.name)
+    this.emit('pinnedPlugin', profile.name)
     this.renderComponent()
   }
 

apps/remix-ide/src/app/components/side-panel.tsx

@@ -74,6 +74,7 @@ export class SidePanel extends AbstractPanel {
     if (this.plugins[profile.name].pinned) return
     this.plugins[profile.name].pinned = true
     this.call('pinnedPanel', 'addView', profile, view)
+    // this.removeView(profile)
   }
 
   unPinView (profile) {
@@ -106,7 +107,7 @@ export class SidePanel 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/tabs/locales/en/panel.json

@@ -4,6 +4,8 @@
   "panel.documentation": "Documentation",
   "panel.description": "Description",
   "panel.maintainedByRemix": "Maintained by Remix",
+  "panel.pinnedMsg": "Click to dock plugin to the right",
+  "panel.unPinnedMsg": "Click to return plugin to the side panel",
   "panel.maintainedExternally": "Not maintained by Remix",
   "panel.pluginInfo": "Plugin info",
   "panel.linkToDoc": "Link to documentation",

apps/remix-ide/src/app/tabs/locales/es/panel.json

@@ -6,5 +6,7 @@
   "panel.maintainedByRemix": "Mantenido por Remix",
   "panel.pluginInfo": "Información del Complemento",
   "panel.linkToDoc": "Enlace a la documentación",
-  "panel.makeAnissue": "Crear un asunto"
+  "panel.makeAnissue": "Crear un asunto",
+  "panel.pinnedMsg": "Click to dock plugin to the right",
+  "panel.unPinnedMsg": "Click to return plugin to the side panel"
 }

apps/remix-ide/src/app/tabs/locales/fr/panel.json

@@ -6,5 +6,7 @@
   "panel.maintainedByRemix": "Maintenu par Remix",
   "panel.pluginInfo": "Informations sur l'extension",
   "panel.linkToDoc": "Lien vers la documentation",
-  "panel.makeAnissue": "Faire un ticket"
+  "panel.makeAnissue": "Faire un ticket",
+  "panel.pinnedMsg": "Click to dock plugin to the right",
+  "panel.unPinnedMsg": "Click to return plugin to the side panel"
 }

apps/remix-ide/src/app/tabs/locales/it/panel.json

@@ -6,5 +6,7 @@
   "panel.maintainedByRemix": "Mantenuto da Remix",
   "panel.pluginInfo": "Informazioni sul plugin",
   "panel.linkToDoc": "Link alla documentazione",
-  "panel.makeAnissue": "Crea una Issue"
+  "panel.makeAnissue": "Crea una Issue",
+  "panel.pinnedMsg": "Click to dock plugin to the right",
+  "panel.unPinnedMsg": "Click to return plugin to the side panel"
 }

apps/remix-ide/src/app/tabs/locales/zh/panel.json

@@ -6,5 +6,7 @@
   "panel.maintainedByRemix": "由 Remix 维护",
   "panel.pluginInfo": "插件信息",
   "panel.linkToDoc": "文档链接",
-  "panel.makeAnissue": "提交 issue"
+  "panel.makeAnissue": "提交 issue",
+  "panel.pinnedMsg": "Click to return plugin to the side panel",
+  "panel.unPinnedMsg": "Click to dock plugin to the right"
 }

libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx

@@ -9,6 +9,7 @@ interface IRemixDragBarUi {
   minWidth: number
   maximiseTrigger: number
   resetTrigger: number
+  layoutPosition: 'left' | 'right'
 }
 
 const DragBar = (props: IRemixDragBarUi) => {
@@ -19,7 +20,13 @@ const DragBar = (props: IRemixDragBarUi) => {
   const nodeRef = React.useRef(null) // fix for strictmode
 
   useEffect(() => {
-    setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
+    if (props.hidden) {
+      setDragBarPosX(offset)
+    } else if (props.layoutPosition === 'left') {
+      setDragBarPosX(offset + props.refObject.current.offsetWidth)
+    } else if (props.layoutPosition === 'right') {
+      setDragBarPosX(offset)
+    }
   }, [props.hidden, offset])
 
   useEffect(() => {

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -27,15 +27,18 @@ const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
   const [showEnterDialog, setShowEnterDialog] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
-  const [maximiseTrigger, setMaximiseTrigger] = useState<number>(0)
-  const [resetTrigger, setResetTrigger] = useState<number>(0)
+  const [hidePinnedPanel, setHidePinnedPanel] = useState<boolean>(false)
+  const [maximiseLeftTrigger, setMaximiseLeftTrigger] = useState<number>(0)
+  const [resetLeftTrigger, setResetLeftTrigger] = useState<number>(0)
+  const [maximiseRightTrigger, setMaximiseRightTrigger] = useState<number>(0)
+  const [resetRightTrigger, setResetRightTrigger] = useState<number>(0)
   const [online, setOnline] = useState<boolean>(true)
   const [locale, setLocale] = useState<{ code: string; messages: any }>({
     code: 'en',
     messages: {}
   })
   const sidePanelRef = useRef(null)
-  const pinnedPanelRef: React.MutableRefObject<JSX.Element> = useRef(null)
+  const pinnedPanelRef = useRef(null)
 
   useEffect(() => {
     async function activateApp() {
@@ -82,16 +85,35 @@ const RemixApp = (props: IRemixAppUi) => {
     })
 
     props.app.layout.event.on('maximisesidepanel', () => {
-      setMaximiseTrigger((prev) => {
+      setMaximiseLeftTrigger((prev) => {
         return prev + 1
       })
     })
 
     props.app.layout.event.on('resetsidepanel', () => {
-      setResetTrigger((prev) => {
+      setResetLeftTrigger((prev) => {
         return prev + 1
       })
     })
+
+    props.app.layout.event.on('minimizepinnedpanel', () => {
+      setTimeout(() => {
+        setHideSidePanel(true)
+      }, 1000)
+    })
+
+    props.app.layout.event.on('maximisepinnedpanel', () => {
+      setMaximiseRightTrigger((prev) => {
+        return prev + 1
+      })
+    })
+
+    props.app.layout.event.on('resetpinnedpanel', () => {
+      setResetRightTrigger((prev) => {
+        return prev + 1
+      })
+    })
+
     props.app.localeModule.events.on('localeChanged', (nextLocale) => {
       setLocale(nextLocale)
     })
@@ -167,12 +189,13 @@ const RemixApp = (props: IRemixAppUi) => {
                 {props.app.sidePanel.render()}
               </div>
               <DragBar
-                resetTrigger={resetTrigger}
-                maximiseTrigger={maximiseTrigger}
+                resetTrigger={resetLeftTrigger}
+                maximiseTrigger={maximiseLeftTrigger}
                 minWidth={285}
                 refObject={sidePanelRef}
                 hidden={hideSidePanel}
                 setHideStatus={setHideSidePanel}
+                layoutPosition='left'
               ></DragBar>
               <div id="main-panel" data-id="remixIdeMainPanel" className="mainpanel d-flex">
                 <RemixUIMainPanel layout={props.app.layout}></RemixUIMainPanel>
@@ -180,6 +203,18 @@ const RemixApp = (props: IRemixAppUi) => {
                   <div className="remix-ui-tabs_end remix-bg-opacity position-absolute position-fixed"></div>
                 </CustomTooltip>
               </div>
+              <DragBar
+                resetTrigger={resetRightTrigger}
+                maximiseTrigger={maximiseRightTrigger}
+                minWidth={285}
+                refObject={pinnedPanelRef}
+                hidden={hidePinnedPanel}
+                setHideStatus={setHideSidePanel}
+                layoutPosition='right'
+              ></DragBar>
+              <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className='pinnedpanel d-flex border-right border-left'>
+                {props.app.pinnedPanel.render()}
+              </div>
             </div>
             <div>{props.app.hiddenPanel.render()}</div>
             <AppDialogs></AppDialogs>

libs/remix-ui/app/src/lib/remix-app/style/remix-app.css

@@ -34,6 +34,12 @@ pre {
   width              : 320px;
   transition         : width 0.25s;
 }
+.pinnedpanel           {
+  display            : flex;
+  flex-direction     : row-reverse;
+  width              : 320px;
+  transition         : width 0.25s;
+}
 .highlightcode       {
   position           : absolute;
   z-index            : 20;

libs/remix-ui/panel/src/lib/main/main-panel.tsx

@@ -30,7 +30,8 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
           active: panel.active,
           view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
           class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized ' : ' ') + ((platform === appPlatformTypes.desktop)? 'desktop' : ''),
-          minimized: panel.minimized
+          minimized: panel.minimized,
+          pinned: panel.pinned
         })
       })
       setPlugins(pluginPanels)

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -1,11 +1,13 @@
-import React, {useEffect, useRef, useState} from 'react' // eslint-disable-line
-import { FormattedMessage } from 'react-intl'
-import { PluginRecord } from '../types'
+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'
 
 export interface RemixPanelProps {
-  plugins: Record<string, PluginRecord>
+  plugins: Record<string, PluginRecord>,
+  pinView?: (profile: PluginRecord['profile'], view: PluginRecord['view']) => void,
+  unPinView?: (profile: PluginRecord['profile']) => void
 }
 const RemixUIPanelHeader = (props: RemixPanelProps) => {
   const [plugin, setPlugin] = useState<PluginRecord>()
@@ -25,6 +27,15 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
     setToggleExpander(!toggleExpander)
   }
 
+  const pinPlugin = () => {
+    console.log('called pinPlugin')
+    props.pinView && props.pinView(plugin.profile, plugin.view)
+  }
+
+  const unPinPlugin = () => {
+    props.unPinView && props.unPinView(plugin.profile)
+  }
+
   const tooltipChild = <i className={`px-1 ml-2 pt-1 pb-2 ${!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down bg-light'}`} aria-hidden="true"></i>
 
   return (
@@ -49,6 +60,21 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
               {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>
+            )
+          }
         </div>
       </div>
       <div className={`bg-light mx-3 mb-2 p-3 pt-1 border-bottom flex-column ${toggleExpander ? 'd-flex' : 'd-none'}`}>