showing ToggleMenuBar

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

@@ -0,0 +1,133 @@
+.panel              {
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    font-size         : 12px;
+    min-height        : 3em;
+  }
+  .bar                {
+    display           : flex;
+    z-index           : 2;
+  }
+  .menu               {
+    position             : relative;
+    display              : flex;
+    align-items          : center;
+    width                : 100%;
+    max-height           : 35px;
+    min-height           : 35px;
+  }
+  .toggleTerminal              {
+    cursor            : pointer;
+  }
+  .toggleTerminal:hover              {
+    color             : var(--secondary);
+  }
+  .terminal_container   {
+    display             : flex;
+    flex-direction      : column;
+    height              : 100%;
+    overflow-y          : auto;
+    font-family         : monospace;
+    margin              : 0px;
+    background-repeat   : no-repeat;
+    background-position : center 15%;
+    background-size     : auto calc(75% -  1.7em);
+  }
+  .terminal    {
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+  }
+  .journal            {
+    margin-top        : auto;
+    font-family       : monospace;
+  }
+  .block              {
+    word-break        : break-word;
+    white-space       : pre-wrap;
+    line-height       : 2ch;
+    padding           : 1ch;
+    margin-top        : 2ch;
+  }
+  .block > pre        {
+    max-height        : 200px;
+  }
+  .cli                {
+    line-height       : 1.7em;
+    font-family       : monospace;
+    padding           : .4em;
+    color             : var(--primary);
+    border-top        : solid 2px var(--secondary);
+  }
+  .prompt             {
+    margin-right      : 0.5em;
+    font-family       : monospace;
+    font-weight       : bold;
+    font-size         : 14px;
+  }
+  .input              {
+    word-break        : break-word;
+    outline           : none;
+    font-family       : monospace;
+  }
+  .search {
+    display           : flex;
+    align-items       : center;
+    width             : 330px;
+    padding-left      : 20px;
+    height            : 100%;
+    padding-top       : 1px;
+    padding-bottom    : 1px;
+  }
+  .filter                       {
+    height                      : 80%;
+    white-space                 : nowrap;
+    overflow                    : hidden;
+    text-overflow               : ellipsis;
+  }
+  .searchIcon                   {
+    width                       : 25px;
+    border-top-left-radius      : 3px;
+    border-bottom-left-radius   : 3px;
+    display                     : flex;
+    align-items                 : center;
+    justify-content             : center;
+    margin-right                : 5px;
+  }
+  .listen         {
+    margin-right  : 30px;
+    min-width     : 40px;
+    height        : 13px;
+    display       : flex;
+    align-items   : center;
+  }
+  .listenLabel {
+    min-width: 50px;
+  }
+  .verticalLine {
+    border-left       : 1px solid var(--secondary);
+    height            : 65%;
+  }
+  .dragbarHorizontal  {
+    position          : absolute;
+    top               : 0;
+    height            : 0.5em;
+    right             : 0;
+    left              : 0;
+    cursor            : ns-resize;
+    z-index           : 999;
+  }
+  .listenOnNetwork {
+    min-height: auto;
+  }
+  .ghostbar           {
+    position          : absolute;
+    height            : 6px;
+    opacity           : 0.5;
+    cursor            : row-resize;
+    z-index           : 9999;
+    left              : 0;
+    right             : 0;
+  }

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

@@ -1,14 +1,74 @@
-import React from 'react'
+import React, { useState } from 'react' // eslint-disable-line
 
 import './remix-ui-terminal.css'
 
 /* eslint-disable-next-line */
-export interface RemixUiTerminalProps {}
+export interface RemixUiTerminalProps {
+  propterties: any
+}
 
 export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
+
+  const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
+
+  const handleMinimizeTerminal = (event) => {
+    console.log('clikced')
+    if (toggleDownUp === 'fa-angle-double-down') {
+      console.log('clikced down')
+      setToggleDownUp('fa-angle-double-up')
+    } else {
+      console.log('clikced up')
+      // event.trigger('resize', [])
+      setToggleDownUp('fa-angle-double-down')
+    }
+  }
   return (
     <div>
-      Welcome to remix-ui-terminal
+      {console.log({ toggleDownUp })}
+      <div className="bar">
+        {/* ${self._view.dragbar} */}
+        <div className="dragbarHorizontal"></div>
+        <div className="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
+          {/* ${self._view.icon} */}
+          <i className={`mx-2 toggleTerminal fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
+          <div className="mx-2" id="clearConsole" data-id="terminalClearConsole" >
+            <i className="fas fa-ban" aria-hidden="true" title="Clear console"
+            ></i>
+          </div>
+          {/* ${self._view.pendingTxCount} */}
+          <div className="mx-2" title='Pending Transactions'>0</div>
+          <div className="verticalLine"></div>
+          <div className="pt-1 h-80 mx-3 align-items-center listenOnNetwork custom-control custom-checkbox">
+            <input
+              className="custom-control-input"
+              id="listenNetworkCheck"
+              // onChange=${listenOnNetwork}
+              type="checkbox"
+              title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+            />
+            <label
+              className="pt-1 form-check-label custom-control-label text-nowrap"
+              title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+              htmlFor="listenNetworkCheck"
+            >
+              listen on network
+            </label>
+          </div>
+          <div className="search">
+            <i className="fas fa-search searchIcon bg-light" aria-hidden="true"></i>
+            {/* ${self._view.inputSearch} */}
+            <input
+              // spellcheck = "false"
+              type="text"
+              className="border filter form-control"
+              id="searchInput"
+              // onkeydown=${filter}
+              placeholder="Search with transaction hash or address"
+              data-id="terminalInputSearch" />
+          </div>
+        </div>
+      </div>
+      Welcome to remix-ui-terminal {console.log(props.propterties, ' properties david')}
     </div>
   )
 }