refactor width updates

apps/remix-ide/src/app/components/vertical-icons.tsx

@@ -16,8 +16,6 @@ const profile = {
   events: ['toggleContent', 'showContent']
 }
 
-const toMaximize = ['LearnEth']
-
 export class VerticalIcons extends Plugin {
   events: EventEmitter
   htmlElement: HTMLDivElement
@@ -128,11 +126,6 @@ export class VerticalIcons extends Plugin {
     // TODO: Only keep `this.emit` (issue#2210)
     this.emit('showContent', name)
     this.events.emit('showContent', name)
-    if (toMaximize.includes(name)) {
-      setTimeout(_ => {
-        this.call('layout', 'maximiseSidePanel')
-      }, 500)
-    }
   }
 
   /**

apps/remix-ide/src/app/panels/layout.ts

@@ -30,11 +30,12 @@ export type PanelConfiguration = {
 export class Layout extends Plugin {
   event: any
   panels: panels
-  maximised: { [key: string]: boolean }
+  enhanced: { [key: string]: boolean }
   constructor () {
     super(profile)
-    this.maximised = {
-      'dgit': true
+    this.enhanced = {
+      'dgit': true,
+      'LearnEth': true
     }
     this.event = new EventEmitter()
   }
@@ -80,8 +81,8 @@ export class Layout extends Plugin {
     })
     this.on('sidePanel', 'focusChanged', async (name) => {
       const current = await this.call('sidePanel', 'currentFocus')
-      if (this.maximised[current]) {
-        this.event.emit('maximisesidepanel')
+      if (this.enhanced[current]) {
+        this.event.emit('enhancesidepanel')
       } else {
         this.event.emit('resetsidepanel')
       }
@@ -89,8 +90,8 @@ export class Layout extends Plugin {
 
     this.on('pinnedPanel', 'pinnedPlugin', async (name) => {
       const current = await this.call('pinnedPanel', 'currentFocus')
-      if (this.maximised[current]) {
-        this.event.emit('maximisepinnedpanel')
+      if (this.enhanced[current]) {
+        this.event.emit('enhancepinnedpanel')
       } else {
         this.event.emit('resetpinnedpanel')
       }
@@ -128,13 +129,13 @@ export class Layout extends Plugin {
 
   async maximiseSidePanel () {
     const current = await this.call('sidePanel', 'currentFocus')
-    this.maximised[current] = true
+    this.enhanced[current] = true
     this.event.emit('maximisesidepanel')
   }
 
   async maximisePinnedPanel () {
     const current = await this.call('pinnedPanel', 'currentFocus')
-    this.maximised[current] = true
+    this.enhanced[current] = true
     this.event.emit('maximisepinnedpanel')
   }
 
@@ -146,13 +147,13 @@ export class Layout extends Plugin {
 
   async resetSidePanel () {
     const current = await this.call('sidePanel', 'currentFocus')
-    this.maximised[current] = false
+    this.enhanced[current] = false
     this.event.emit('resetsidepanel')
   }
 
   async resetPinnedPanel () {
     const current = await this.call('pinnedPanel', 'currentFocus')
-    this.maximised[current] = false
+    this.enhanced[current] = false
     this.event.emit('resetpinnedpanel')
   }
 }

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

@@ -8,6 +8,7 @@ interface IRemixDragBarUi {
   hidden: boolean
   minWidth: number
   maximiseTrigger: number
+  enhanceTrigger: number
   resetTrigger: number
   layoutPosition: 'left' | 'right'
 }
@@ -40,32 +41,40 @@ const DragBar = (props: IRemixDragBarUi) => {
     }
   }, [props.hidden, offset])
 
-  useEffect(() => {
-    if (props.maximiseTrigger > 0) {
-      if (props.layoutPosition === 'left') {
-        const width = 0.4 * window.innerWidth
+  const triggerWidth = (maximiseTrigger, layoutPosition, refObject, coeff) => {
+    if (maximiseTrigger > 0) {
+      if (layoutPosition === 'left') {
+        const width = coeff * window.innerWidth
 
-        if (width > props.refObject.current.offsetWidth) {
+        if (width > 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
+      } else if (layoutPosition === 'right') {
+        const width = coeff * window.innerWidth
 
-        if (width > props.refObject.current.offsetWidth) {
-          props.refObject.current.style.width = width + 'px'
+        if (width > refObject.current.offsetWidth) {
+          refObject.current.style.width = width + 'px'
           setTimeout(() => {
             setDragBarPosX(window.innerWidth - width)
           }, 300)
         }
       }
     }
+  }
+
+  useEffect(() => {
+    triggerWidth(props.maximiseTrigger, props.layoutPosition, props.refObject, 0.4)
   }, [props.maximiseTrigger])
 
   useEffect(() => {
-    if (props.maximiseTrigger > 0) {
+    triggerWidth(props.enhanceTrigger, props.layoutPosition, props.refObject, 0.25)
+  }, [props.enhanceTrigger])
+
+  useEffect(() => {
+    if (props.maximiseTrigger > 0 || props.enhanceTrigger) {
       if (props.layoutPosition === 'left') {
         props.refObject.current.style.width = initialWidth.current + 'px'
         setTimeout(() => {

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

@@ -32,8 +32,10 @@ const RemixApp = (props: IRemixAppUi) => {
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
   const [hidePinnedPanel, setHidePinnedPanel] = useState<boolean>(true)
   const [maximiseLeftTrigger, setMaximiseLeftTrigger] = useState<number>(0)
+  const [enhanceLeftTrigger, setEnhanceLeftTrigger] = useState<number>(0)
   const [resetLeftTrigger, setResetLeftTrigger] = useState<number>(0)
   const [maximiseRightTrigger, setMaximiseRightTrigger] = useState<number>(0)
+  const [enhanceRightTrigger, setEnhanceRightTrigger] = useState<number>(0)
   const [resetRightTrigger, setResetRightTrigger] = useState<number>(0)
   const [online, setOnline] = useState<boolean>(true)
   const [locale, setLocale] = useState<{ code: string; messages: any }>({
@@ -98,6 +100,12 @@ const RemixApp = (props: IRemixAppUi) => {
       })
     })
 
+    props.app.layout.event.on('enhancesidepanel', () => {
+      setEnhanceLeftTrigger((prev) => {
+        return prev + 1
+      })
+    })
+
     props.app.layout.event.on('resetsidepanel', () => {
       setResetLeftTrigger((prev) => {
         return prev + 1
@@ -110,6 +118,12 @@ const RemixApp = (props: IRemixAppUi) => {
       })
     })
 
+    props.app.layout.event.on('enhancepinnedpanel', () => {
+      setEnhanceRightTrigger((prev) => {
+        return prev + 1
+      })
+    })
+
     props.app.layout.event.on('resetpinnedpanel', () => {
       setResetRightTrigger((prev) => {
         return prev + 1
@@ -205,6 +219,7 @@ const RemixApp = (props: IRemixAppUi) => {
                   {props.app.sidePanel.render()}
                 </div>
                 <DragBar
+                  enhanceTrigger={enhanceLeftTrigger}
                   resetTrigger={resetLeftTrigger}
                   maximiseTrigger={maximiseLeftTrigger}
                   minWidth={305}
@@ -222,6 +237,7 @@ const RemixApp = (props: IRemixAppUi) => {
                 {
                   !hidePinnedPanel &&
                   <DragBar
+                    enhanceTrigger={enhanceRightTrigger}
                     resetTrigger={resetRightTrigger}
                     maximiseTrigger={maximiseRightTrigger}
                     minWidth={331}