From 7038e0a09ad28b8801542a21058ca9e9d9176539 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Fri, 14 Jun 2024 21:54:38 +0100 Subject: [PATCH] finish fixes to compile details as per @Aniket-Engg --- apps/remix-ide/src/app/panels/tab-proxy.js | 19 ++++++++++-- .../src/app/plugins/compile-details.tsx | 29 +++++++++++-------- .../src/lib/components/solidityCompile.tsx | 2 +- libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx | 14 +++++++-- .../src/lib/tree-view-item/tree-view-item.tsx | 2 +- 5 files changed, 48 insertions(+), 18 deletions(-) diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js index fa6521023a..05f68cd802 100644 --- a/apps/remix-ide/src/app/panels/tab-proxy.js +++ b/apps/remix-ide/src/app/panels/tab-proxy.js @@ -174,7 +174,7 @@ export class TabProxy extends Plugin { this.on('fileDecorator', 'fileDecoratorsChanged', async (items) => { this.tabsApi.setFileDecorations(items) }) - + try { this.themeQuality = (await this.call('theme', 'currentTheme') ).quality } catch (e) { @@ -240,6 +240,19 @@ export class TabProxy extends Plugin { if ((name.endsWith('.vy') && icon === undefined) || title.includes('Vyper')) { icon = 'assets/img/vyperLogo2.webp' } + if (title === 'Solidity Compile Details') { + let updatedName = this.fileManager.currentFile() + icon = 'assets/img/solidity.webp' + name = updatedName.split('/')[1] + let newTitle = '' + title.split(' ').forEach((x, index) => { + if (index !== 0) { + newTitle += ` ${x}` + }}) + title = `${name} - ${newTitle}` + } + + var slash = name.split('/') const tabPath = slash.reverse() @@ -357,7 +370,9 @@ export class TabProxy extends Plugin { const onZoomIn = () => this.editor.editorFontSize(1) const onZoomOut = () => this.editor.editorFontSize(-1) - const onReady = (api) => { this.tabsApi = api } + const onReady = (api) => { + this.tabsApi = api + } this.dispatch({ plugin: this, diff --git a/apps/remix-ide/src/app/plugins/compile-details.tsx b/apps/remix-ide/src/app/plugins/compile-details.tsx index 841ab00ab2..3bdef9de32 100644 --- a/apps/remix-ide/src/app/plugins/compile-details.tsx +++ b/apps/remix-ide/src/app/plugins/compile-details.tsx @@ -6,32 +6,38 @@ import { RemixUiCompileDetails } from '@remix-ui/solidity-compile-details' const _paq = (window._paq = window._paq || []) +type CompileDetailsPayload = { + contractProperties: any, + selectedContract: string, + help: any, + insertValue: any, + saveAs: any, +} + +interface ICompilationDetailsPlugin extends ViewPlugin { + showDetails: (payload: any) => void +} + const profile = { name: 'compilationDetails', displayName: 'Solidity Compile Details', description: 'Displays details from solidity compiler', location: 'mainPanel', - methods: ['showDetails'], + methods: ['showDetails', 'getTabHeadDetails'], events: [] } -export class CompilationDetailsPlugin extends ViewPlugin { +export class CompilationDetailsPlugin extends ViewPlugin implements ICompilationDetailsPlugin { dispatch: React.Dispatch = () => {} appManager: RemixAppManager element: HTMLDivElement - payload: any + payload: CompileDetailsPayload constructor(appManager: RemixAppManager) { super(profile) this.appManager = appManager this.element = document.createElement('div') this.element.setAttribute('id', 'compileDetails') - this.payload = { - contractProperties: {} as any, - selectedContract: '', - help: {} as any, - insertValue: {} as any, - saveAs: {} as any, - } + this.payload } async onActivation() { @@ -44,8 +50,7 @@ export class CompilationDetailsPlugin extends ViewPlugin { async showDetails(sentPayload: any) { await this.call('tabs', 'focus', 'compilationDetails') - setTimeout(() => { - // TODO: use the react API to render when the tab is focused and the plugin in the view. + setTimeout(async () => { this.payload = sentPayload this.renderComponent() }, 2000) diff --git a/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx index 8d0d770ff4..8ec6afe02f 100644 --- a/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx +++ b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx @@ -37,7 +37,7 @@ export default function SolidityCompile({ contractProperties, selectedContract, > diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx index 80d138ac8b..f5c3a668c0 100644 --- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx +++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx @@ -10,7 +10,7 @@ const _paq = (window._paq = window._paq || []) /* eslint-disable-next-line */ export interface TabsUIProps { - tabs: Array + tabs: Array plugin: Plugin onSelect: (index: number) => void onClose: (index: number) => void @@ -19,6 +19,15 @@ export interface TabsUIProps { onReady: (api: any) => void themeQuality: string } + +export interface Tab { + id: string + icon: string + iconClass: string + name: string + title: string + tooltip: string +} export interface TabsUIApi { activateTab: (name: string) => void active: () => string @@ -96,7 +105,8 @@ export const TabsUI = (props: TabsUIProps) => { return } - const renderTab = (tab, index) => { + const renderTab = (tab: Tab, index) => { + const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '') const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)' diff --git a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx index bd6c7b95e3..8836e157eb 100644 --- a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx +++ b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx @@ -16,7 +16,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => { ref={innerRef} key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} - className={`li_tv remixui_mouseover`} + className="li_tv remixui_mouseover" {...otherProps} >