draggable

apps/remix-ide/src/app-component.js

@@ -1,4 +1,5 @@
 'use strict'
+import PanelsResize from './lib/panels-resize'
 import { RunTab, makeUdapp } from './app/udapp'
 import { RemixEngine } from './remixEngine'
 import { RemixAppManager } from './remixAppManager'
@@ -191,6 +192,7 @@ class AppComponent {
     self.menuicons = new VerticalIcons(appManager)
     self.sidePanel = new SidePanel(appManager, self.menuicons)
     self.hiddenPanel = new HiddenPanel()
+
     const pluginManagerComponent = new PluginManagerComponent(appManager, self.engine)
     const filePanel = new FilePanel(appManager)
     const landingPage = new LandingPage(appManager, self.menuicons, fileManager, filePanel, contentImport)
@@ -310,7 +312,7 @@ class AppComponent {
     // activate solidity plugin
     self.appManager.activatePlugin(['solidity', 'udapp'])
     // Load and start the service who manager layout and frame
-    const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, this._components.resizeFeature)
+    const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, null)
 
     if (params.embed) framingService.embed()
     framingService.start(params)

apps/remix-ide/src/framingService.js

@@ -8,16 +8,6 @@ export class FramingService {
   }
 
   start (params) {
-    this.sidePanel.events.on('toggle', () => {
-      this.resizeFeature.panel.clientWidth !== 0 ? this.resizeFeature.hidePanel() : this.resizeFeature.showPanel()
-    })
-    this.sidePanel.events.on('showing', () => {
-      if (this.resizeFeature.panel.clientWidth === 0) this.resizeFeature.showPanel()
-    })
-    this.mainPanel.events.on('toggle', () => {
-      this.resizeFeature.showPanel()
-    })
-
     this.verticalIcons.select('filePanel')
 
     document.addEventListener('keypress', (e) => {

apps/remix-ide/src/index.tsx

@@ -4,8 +4,6 @@ import ReactDOM from 'react-dom'
 import App from './app'
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
   document.getElementById('root')
 )

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

@@ -1,19 +1,25 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import './style/remix-app.css'
+import './style/reflect/styles.css'
 import RemixSplashScreen from './modals/splashscreen'
 import MatomoDialog from './modals/matomo'
 import AlertModal from './modals/alert'
 import AppContext from './context/context'
+import Draggable from 'react-draggable'
 interface IRemixAppUi {
   app: any
 }
 
 const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
+  const [dragState, setDragState] = useState<boolean>(false)
+  const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
+  const [dragBarPos, setDragBarPos] = useState<number>(0)
   const sidePanelRef = useRef(null)
   const mainPanelRef = useRef(null)
   const iconPanelRef = useRef(null)
   const hiddenPanelRef = useRef(null)
+  const resizePanelRef = useRef(null)
 
   useEffect(() => {
     console.log('mounting app')
@@ -41,6 +47,7 @@ const RemixApp = (props: IRemixAppUi) => {
       props.app.themeModule.initTheme(() => {
         setAppReady(true)
         props.app.activate()
+        setListeners()
       })
     }
     if (props.app) {
@@ -49,13 +56,46 @@ const RemixApp = (props: IRemixAppUi) => {
     }
   }, [])
 
+  function setListeners () {
+    props.app.sidePanel.events.on('toggle', () => {
+      console.log('toggle')
+      setHideSidePanel(prev => {
+        return !prev
+      })
+    })
+    props.app.sidePanel.events.on('showing', () => {
+      console.log('showing')
+      setHideSidePanel(true)
+    })
+  }
+
   const components = {
     iconPanel: <div ref={iconPanelRef} id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"></div>,
-    sidePanel: <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className="sidepanel border-right border-left"></div>,
+    sidePanel: <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}></div>,
+    resizePanel: <div ref={resizePanelRef} id="resize-panel" data-id="remixIdeResizePanel"></div>,
     mainPanel: <div ref={mainPanelRef} id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'></div>,
     hiddenPanel: <div ref={hiddenPanelRef}></div>
   }
 
+  function stopDragSidePanel (e: MouseEvent, data: any) {
+    console.log(data)
+    setDragState(false)
+    sidePanelRef.current.style.width = (320 + data.x) + 'px'
+    console.log(sidePanelRef.current.offsetWidth)
+    if ((320 + data.x) < 250) {
+      setHideSidePanel(true)
+      setDragBarPos(41 - 360)
+    } else {
+      setHideSidePanel(false)
+      setDragBarPos(sidePanelRef.current.offsetWidth - 320)
+    }
+  }
+
+  function startDragSidePanel (e: MouseEvent, data: any) {
+    console.log('start')
+    setDragState(true)
+  }
+
   return (
     <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager }}>
       <RemixSplashScreen hide={appReady}></RemixSplashScreen>
@@ -65,9 +105,14 @@ const RemixApp = (props: IRemixAppUi) => {
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
         {components.iconPanel}
         {components.sidePanel}
+        <Draggable position={{ x: dragBarPos, y: 0 }} onStart={startDragSidePanel} onStop={stopDragSidePanel} axis="x">
+          <div className={`dragbar ${dragState ? 'ondrag' : ''}`}></div>
+        </Draggable>
         {components.mainPanel}
+
       </div>
       {components.hiddenPanel}
+      <div className={`overlay ${dragState ? '' : 'd-none'}`} ></div>
     </AppContext.Provider>
 
   )

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

@@ -31,8 +31,9 @@ pre {
 .sidepanel           {
   display            : flex;
   flex-direction     : row-reverse;
-  width              : 320px;
+  width: 320px;
 }
+
 .highlightcode       {
   position           : absolute;
   z-index            : 20;
@@ -68,3 +69,28 @@ pre {
 .splash {
   text-align: center;
 }
+
+.dragbar           {
+  display            : block;
+  height             : 100%;
+  position           : absolute;
+  left: 367px;
+  top: 0px;
+  width: 0.3em;
+  z-index: 9999;
+}
+
+.overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  z-index: 9998;
+}
+
+.dragbar:hover, .dragbar.ondrag{
+  background-color: var(--secondary);
+  cursor:col-resize;
+}

package-lock.json

@@ -38722,6 +38722,15 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-draggable": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
+      "integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
+      "requires": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",