fix terminal css

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

@@ -100,7 +100,8 @@ export class Layout extends Plugin {
 
   minimize (name: string, minimized:boolean): void {
     this.panels[name].minimized = minimized
-    this.event.emit('change', null)
+    this.event.emit('change', this.panels)
+    this.emit('change', this.panels)
   }
 
   async maximiseSidePanel () {

apps/remix-ide/src/app/panels/terminal.js

@@ -120,6 +120,7 @@ class Terminal extends Plugin {
       : <RemixUiTerminal
         plugin={state.plugin}
         onReady={state.onReady}
+        visible={true}
       />
   }
 

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

@@ -1,10 +1,12 @@
 /* eslint-disable no-unused-expressions */
+import isElectron from 'is-electron'
 import React, {useContext, useEffect, useRef, useState} from 'react' // eslint-disable-line
 import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'
 import {PluginRecord} from '../types'
 import './main-panel.css'
 
+
 export type RemixUIMainPanelProps = {
   Context: React.Context<any>
 }
@@ -27,7 +29,7 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
           profile: panel.plugin.profile,
           active: panel.active,
           view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
-          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized' : ''),
+          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized ' : ' ') + (isElectron()? 'desktop' : ''),
           minimized: panel.minimized
         })
       })

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -103,3 +103,8 @@ iframe {
 .terminal-wrap.minimized {
     height: 2rem !important;
 }
+
+
+.terminal-wrap.minimized.desktop {
+    height: 4.5rem !important;
+}

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

@@ -574,6 +574,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const classNameBlock = 'remix_ui_terminal_block px-4 py-1 text-break'
 
   return (
+    ( !props.visible? <></>: 
     <div style={{ flexGrow: 1 }} className="remix_ui_terminal_panel" ref={panelRef}>
       <div className="remix_ui_terminal_bar d-flex">
         <div className="remix_ui_terminal_menu d-flex w-100 align-items-center position-relative border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
@@ -801,7 +802,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
       {toaster && <Toaster message={intl.formatMessage({id: 'terminal.toasterMsg1'})} />}
       {toastProvider.show && <Toaster message={intl.formatMessage({id: 'terminal.toasterMsg2'}, {fileName: toastProvider.fileName})} />}
     </div>
-  )
+  ))
 }
 
 const typewrite = (elementsRef, message, callback) => {  

libs/remix-ui/terminal/src/lib/types/terminalTypes.ts

@@ -28,5 +28,6 @@ export const CMD_HISTORY = 'cmdHistory'
 
 export interface RemixUiTerminalProps {
     plugin: any,
-    onReady: (api: any) => void
+    onReady: (api: any) => void,
+    visible: boolean,
 }

libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx

@@ -175,11 +175,13 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
   }
 
   const selectOutput = () => {
+    props.plugin.call('layout', 'minimize', props.plugin.profile.name, false)
     setShowOutput(true)
   }
 
   const showTerminal = () => {
     setShowOutput(false)
+    props.plugin.call('layout', 'minimize', props.plugin.profile.name, false)
     if (terminals.length === 0) createTerminal()
   }
 
@@ -190,70 +192,68 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
   }
 
   return (<>
+    <div className='xterm-panel-header bg-light'>
+      <div className='xterm-panel-header-left p-1'>
+        <button className={`btn btn-sm btn-secondary mr-2 ${!showOutput ? 'xterm-btn-none' : 'xterm-btn-active'}`} onClick={selectOutput}>ouput</button>
+        <button className={`btn btn-sm btn-secondary ${terminalsEnabled ? '' : 'd-none'} ${showOutput ? 'xterm-btn-none' : 'xterm-btn-active'}`} onClick={showTerminal}><span className="far fa-terminal border-0 ml-1"></span></button>
+      </div>
+      <div className={`xterm-panel-header-right  ${showOutput ? 'd-none' : ''}`}>
 
-    <div className='xterm-panel'>
-      <div className='xterm-panel-header bg-light'>
-        <div className='xterm-panel-header-left p-1'>
-          <button className={`btn btn-sm btn-secondary mr-2 ${!showOutput ? 'xterm-btn-none' : 'xterm-btn-active'}`} onClick={selectOutput}>ouput</button>
-          <button className={`btn btn-sm btn-secondary ${terminalsEnabled ? '' : 'd-none'} ${showOutput ? 'xterm-btn-none' : 'xterm-btn-active'}`} onClick={showTerminal}><span className="far fa-terminal border-0 ml-1"></span></button>
-        </div>
-        <div className={`xterm-panel-header-right  ${showOutput ? 'd-none' : ''}`}>
-
-          <Dropdown as={ButtonGroup}>
-            <button className="btn btn-sm btn-secondary mr-2" onClick={async () => clearTerminal()}>
-              <CustomTooltip tooltipText={<FormattedMessage id='xterm.clear' defaultMessage='Clear terminal' />}>
-                <span className="far fa-ban border-0 p-0 m-0"></span>
-              </CustomTooltip>
-            </button>
-            <button className="btn btn-sm btn-secondary" onClick={async () => createTerminal()}>
-              <CustomTooltip tooltipText={<FormattedMessage id='xterm.new' defaultMessage='New terminal' />}>
-                <span className="far fa-plus border-0 p-0 m-0"></span>
-              </CustomTooltip>
-            </button>
-
-
-            <Dropdown.Toggle split variant="secondary" id="dropdown-split-basic" />
-
-            <Dropdown.Menu className='custom-dropdown-items remixui_menuwidth'>
-              {shells.map((shell, index) => {
-                return (<Dropdown.Item key={index} onClick={async () => await createTerminal(shell)}>{shell}</Dropdown.Item>)
-              })}
-            </Dropdown.Menu>
-          </Dropdown>
-          <button className="btn ml-2 btn-sm btn-secondary" onClick={closeTerminal}>
-            <CustomTooltip tooltipText={<FormattedMessage id='xterm.close' defaultMessage='Close terminal' />}>
-              <span className="far fa-trash border-0 ml-1"></span>
+        <Dropdown as={ButtonGroup}>
+          <button className="btn btn-sm btn-secondary mr-2" onClick={async () => clearTerminal()}>
+            <CustomTooltip tooltipText={<FormattedMessage id='xterm.clear' defaultMessage='Clear terminal' />}>
+              <span className="far fa-ban border-0 p-0 m-0"></span>
+            </CustomTooltip>
+          </button>
+          <button className="btn btn-sm btn-secondary" onClick={async () => createTerminal()}>
+            <CustomTooltip tooltipText={<FormattedMessage id='xterm.new' defaultMessage='New terminal' />}>
+              <span className="far fa-plus border-0 p-0 m-0"></span>
             </CustomTooltip>
           </button>
-        </div>
-      </div>
 
 
-      <div className='remix-ui-xterminals-container'>
-        <>
-          <div className={`${!showOutput ? 'd-none' : 'd-block w-100'} `}>
-            <RemixUiTerminal
-              plugin={props.plugin}
-              onReady={props.onReady} />
-          </div>
-          <div className={`remix-ui-xterminals-section ${showOutput ? 'd-none' : 'd-flex'} `}>
-            {terminals.map((xtermState) => {
-              return (
-                <div className={`h-100 xterm-terminal ${xtermState.hidden ? 'hide-xterm' : 'show-xterm'}`} key={xtermState.pid} data-id={`remixUIXT${xtermState.pid}`}>
-                  <RemixUiXterm theme={theme} setTerminalRef={setTerminalRef} timeStamp={xtermState.timeStamp} send={send} resize={resize} pid={xtermState.pid} plugin={plugin}></RemixUiXterm>
-                </div>
-              )
+          <Dropdown.Toggle split variant="secondary" id="dropdown-split-basic" />
+
+          <Dropdown.Menu className='custom-dropdown-items remixui_menuwidth'>
+            {shells.map((shell, index) => {
+              return (<Dropdown.Item key={index} onClick={async () => await createTerminal(shell)}>{shell}</Dropdown.Item>)
             })}
-            <div className='remix-ui-xterminals-buttons border-left'>
-              {terminals.map((xtermState, index) => {
-                return (<button key={index} onClick={async () => selectTerminal(xtermState)} className={`btn btn-sm mt-2 btn-secondary ${xtermState.hidden ? 'xterm-btn-none' : 'xterm-btn-active'}`}><span className="fa fa-terminal border-0 p-0 m-0"></span></button>)
-              })}
-            </div>
-          </div>
-        </>
+          </Dropdown.Menu>
+        </Dropdown>
+        <button className="btn ml-2 btn-sm btn-secondary" onClick={closeTerminal}>
+          <CustomTooltip tooltipText={<FormattedMessage id='xterm.close' defaultMessage='Close terminal' />}>
+            <span className="far fa-trash border-0 ml-1"></span>
+          </CustomTooltip>
+        </button>
       </div>
     </div>
 
+    <RemixUiTerminal
+      plugin={props.plugin}
+      onReady={props.onReady}
+      visible={showOutput}
+    />
+
+    <div className='remix-ui-xterminals-container'>
+      <>
+
+        <div className={`remix-ui-xterminals-section ${showOutput ? 'd-none' : 'd-flex'} `}>
+          {terminals.map((xtermState) => {
+            return (
+              <div className={`h-100 xterm-terminal ${xtermState.hidden ? 'hide-xterm' : 'show-xterm'}`} key={xtermState.pid} data-id={`remixUIXT${xtermState.pid}`}>
+                <RemixUiXterm theme={theme} setTerminalRef={setTerminalRef} timeStamp={xtermState.timeStamp} send={send} resize={resize} pid={xtermState.pid} plugin={plugin}></RemixUiXterm>
+              </div>
+            )
+          })}
+          <div className='remix-ui-xterminals-buttons border-left'>
+            {terminals.map((xtermState, index) => {
+              return (<button key={index} onClick={async () => selectTerminal(xtermState)} className={`btn btn-sm mt-2 btn-secondary ${xtermState.hidden ? 'xterm-btn-none' : 'xterm-btn-active'}`}><span className="fa fa-terminal border-0 p-0 m-0"></span></button>)
+            })}
+          </div>
+        </div>
+      </>
+    </div>
+
 
   </>)
 }