UI improvements

apps/remix-ide-e2e/src/tests/workspace.test.ts

@@ -107,8 +107,8 @@ module.exports = {
         const fileList = document.querySelector('*[data-id="treeViewUltreeViewMenu"]')
         return fileList.getElementsByTagName('li').length;
       }, [], function(result){
-          // check there are no files in FE
+          // check there are no files in FE except config file
-          browser.assert.equal(result.value, 0, 'Incorrect number of files');
+          browser.assert.equal(result.value, 1, 'Incorrect number of files');
       });
   },
 

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -43,7 +43,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     evmVersion: ''
   })
   const [showFilePathInput, setShowFilePathInput] = useState<boolean>(false)
-
+  const [toggleExpander, setToggleExpander] = useState<boolean>(false)
   const [disableCompileButton, setDisableCompileButton] = useState<boolean>(false)
   const compileIcon = useRef(null)
   const promptMessageInput = useRef(null)
@@ -614,10 +614,14 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     onChangeRuns(settings.runs)
   }
 
+  const toggleConfigurations = () => {
+    setToggleExpander(!toggleExpander)
+  }
+
  return (
     <section>
       <article>
-        <div className='pt-0 mb-3 remixui_compilerSection border-bottom'>
+        <div className='pt-0 remixui_compilerSection'>
           <div className="mb-1">
             <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">
               Compiler
@@ -680,7 +684,17 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </div>
           }
         </div>
-        <div className='pt-0 remixui_compilerSection border-bottom'>          
+        <div className="d-flex px-4 pb-1 justify-content-between" onClick={toggleConfigurations}>
+          <div className="d-flex">
+            <label>Advanced Configurations</label>
+          </div>
+          <div>
+            <span data-id='scConfigExpander' onClick={toggleConfigurations}>
+              <i className={!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down'} aria-hidden="true"></i>
+            </span>
+          </div>
+        </div>
+        <div className={`px-4 pb-4 border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
           <div className="d-flex pb-1 remixui_compilerConfig custom-control custom-radio">
             <input className="custom-control-input" type="radio" name="configradio" value="manual" onChange={toggleConfigType} checked={!state.useFileConfiguration} id="scManualConfig" />
             <label className="form-check-label custom-control-label" htmlFor="scManualConfig">Compiler configuration</label>
@@ -738,8 +752,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             />
             { !showFilePathInput && <button disabled={!state.useFileConfiguration} className="btn-secondary" onClick={() => {setShowFilePathInput(true)}}>Set new config file</button> }
           </div>
-
+        </div>
-          <div>
+        <div className="px-4">
           <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick={compile} disabled={disableCompileButton}>
             <OverlayTrigger overlay={
               <Tooltip id="overlay-tooltip-compile">
@@ -795,7 +809,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </CopyToClipboard>
           </div>
         </div>          
-        </div>
       </article>
     </section>
   )