fixing css

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -183,7 +183,6 @@ export class TabProxy extends Plugin {
   }
 
   focus (name) {
-    console.log('what switched tabs', name)
     this.emit('switchApp', name)
     this.tabsApi.activateTab(name)
   }

apps/remix-ide/src/app/plugins/solidity-umlgen.tsx

@@ -27,7 +27,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   currentFile: string
   svgPayload: string
   updatedSvg: string
-  amIActivated: boolean
+  loading: boolean
   appManager: RemixAppManager
   dispatch: React.Dispatch<any> = () => {}
   constructor(appManager: RemixAppManager) {
@@ -35,6 +35,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
     this.currentFile = ''
     this.svgPayload = ''
     this.updatedSvg = ''
+    this.loading = false
     this.appManager = appManager
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'sol-uml-gen')
@@ -61,7 +62,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   }
 
   onDeactivation(): void {
-      this.amIActivated = false
+    
   }
 
   generateCustomAction = async (action: customAction) => {
@@ -72,6 +73,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   generateUml(currentFile: string) {
     this.call('solidity', 'compile', currentFile)
     this.call('tabs', 'focus', 'solidityumlgen')
+    this.loading = true
     this.renderComponent()
   }
 
@@ -98,6 +100,11 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
     this.renderComponent()
   }
 
+  hideSpinner() {
+    this.loading = false
+    this.renderComponent()
+  }
+
   setDispatch (dispatch: React.Dispatch<any>) {
     this.dispatch = dispatch
     this.renderComponent()
@@ -110,11 +117,11 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   }
 
   renderComponent () {
-    this.dispatch({...this, updatedSvg: this.updatedSvg })
+    this.dispatch({...this, updatedSvg: this.updatedSvg, loading: this.loading })
   }
 
   updateComponent(state: any) {
-    return <div id="sol-uml-gen"><RemixUiSolidityUmlGen plugin={state} updatedSvg={state.updatedSvg} /></div>
+    return <RemixUiSolidityUmlGen plugin={state} updatedSvg={state.updatedSvg} loading={state.loading} />
   }
 }
 

libs/remix-ui/solidity-uml-gen/src/lib/css/solidity-uml-gen.css

@@ -0,0 +1,3 @@
+.remixui_default-message {
+  margin-top: 100px;
+}

libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import { ISolidityUmlGen } from '../types'
+import './css/solidity-uml-gen.css'
 export interface RemixUiSolidityUmlGenProps {
   plugin?: ISolidityUmlGen
   updatedSvg?: string
+  loading?: boolean
 }
 
 type ButtonAction = {
@@ -21,7 +23,7 @@ const ActionButtons = ({ buttons }: ActionButtonsProps) => (
     {buttons.map(btn => (
       <button
         key={btn.buttonText}
-        className="btn btn-primary btn-sm ml-4 mt-4"
+        className="btn btn-primary btn-md ml-4 mt-4"
         disabled={!btn.svgValid}
         onClick={btn.action}
       >
@@ -31,7 +33,7 @@ const ActionButtons = ({ buttons }: ActionButtonsProps) => (
   </>
 )
 
-export function RemixUiSolidityUmlGen ({ plugin, updatedSvg }: RemixUiSolidityUmlGenProps) {
+export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
   const [svgPayload, setSVGPayload] = useState<string>('')
   const [validSvg, setValidSvg] = useState(false)
@@ -56,23 +58,33 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg }: RemixUiSolidityUm
       action: () => console.log('generated!!')
     }
   ]
+
+  const DefaultInfo = () => (
+    <div className="d-flex flex-column justify-content-center align-items-center mt-5">
+      <h2 className="h2"><p>To view your contract as a Uml Diragram</p></h2>
+      <h3 className="h3"><p>Right Click on your contract file (Usually ends with .sol)</p></h3>
+      <h3 className="h3 text-left"><p>Click on Generate UML</p></h3>
+    </div>
+  )
   const Display = () => (
-    <div className="d-flex flex-column justify-center">
-      <div className="d-flex justify-center align-content-center">
+    <div className="d-flex flex-column justify-content-center align-items-center">
+      <div className="d-flex justify-center align-content-center mb-5">
         {/* <ActionButtons buttons={buttons}/> */}
       </div>
-      <div id="umlImageHolder" className="mx-2 my-3 ml-5 w-100">
+      <div id="umlImageHolder" className="justify-content-center align-items-center d-flex w-100">
         { validSvg && showViewer ? (
           <TransformWrapper>
-          <TransformComponent>
-            <img 
-              src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}
-              width={900}
-              height={600}
-            />
-          </TransformComponent>
-        </TransformWrapper>
-        ) : null}
+            <TransformComponent>
+              <img 
+                src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}
+                width={900}
+                height={'auto'}
+              />
+            </TransformComponent>
+          </TransformWrapper>
+        ) : loading ? <div className="justify-content-center align-items-center d-flex mx-auto my-auto">
+            <i className="fas fa-spinner fa-spin fa-4x"></i>
+          </div> : <DefaultInfo />}
       </div>
     </div>
   )