diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js index 0033cc532d..9cdf0aae50 100644 --- a/apps/remix-ide/src/app/components/vertical-icons.js +++ b/apps/remix-ide/src/app/components/vertical-icons.js @@ -63,88 +63,9 @@ export class VerticalIcons extends Plugin { } listenOnStatus (profile) { - // the list of supported keys. 'none' will remove the status - // const keys = ['edited', 'succeed', 'none', 'loading', 'failed'] - // const types = ['error', 'warning', 'success', 'info', ''] - // const fn = (status) => { - // if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`) - // if (status.key === undefined) throw new Error('status key should be defined') - // if (typeof status.key === 'string' && (!this.keys.includes(status.key))) { - // throw new Error('key should contain either number or ' + this.keys.join()) - // } - // this.setIconStatus(profile.name, status) - // } - // this.iconStatus[profile.name] = fn - // this.on(profile.name, this.iconStatus[profile.name]) } - /** - * resolve a classes list for @arg key - * @param {Object} key - * @param {Object} type - */ - // resolveClasses (key, type) { - // let classes = 'remixui_status' - - // switch (key) { - // case 'succeed': - // classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck' - // break - // case 'edited': - // classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck' - // break - // case 'loading': - // classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck' - // break - // case 'failed': - // classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck' - // break - // default: { - // classes += ' badge badge-pill badge-' + type - // } - // } - // return classes - // } - - /** - * Set a new status for the @arg name - * @param {String} name - * @param {Object} status - */ - // setIconStatus (name, status) { - // const el = this.icons[name] - // if (!el) return - // const statusEl = el.querySelector('i') - // if (statusEl) { - // el.removeChild(statusEl) - // } - // if (status.key === 'none') return // remove status - - // let text = '' - // let key = '' - // if (typeof status.key === 'number') { - // key = status.key.toString() - // text = key - // } else key = helper.checkSpecialChars(status.key) ? '' : status.key - - // let type = '' - // if (status.type === 'error') { - // type = 'danger' // to use with bootstrap - // } else type = helper.checkSpecialChars(status.type) ? '' : status.type - // const title = helper.checkSpecialChars(status.title) ? '' : status.title - - // el.appendChild(``) - - // el.classList.add('remixui_icon') - // } - /** * Remove an icon from the map * @param {ModuleProfile} profile The profile of the module diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx index 8b49b65b9d..89db08be87 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx @@ -49,7 +49,7 @@ function Badge ({ badgeStatus }: BadgeProps) { } return ( - + <> { badgeStatus && checkStatusKeyValue(badgeStatus.key, badgeStatus.type) ? ( ) : null } - + ) } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx index 6fafcdc7be..d77286e213 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx @@ -1,6 +1,6 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' // eslint-disable-next-line no-use-before-define -import React, { Fragment, useEffect, useReducer, useRef } from 'react' +import React, { Fragment, useEffect, useReducer } from 'react' import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer' import Badge from './Badge' import Icon, { IconStatus } from './Icon' @@ -21,11 +21,10 @@ const initialState = { function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) { const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState) - const ref = useRef(null) useEffect(() => { verticalIconsPlugin.on('debugger', 'statusChanged', (iconStatus: IconStatus) => { - const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } } + const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } } dispatchStatusUpdate(action) }) }, []) @@ -50,14 +49,9 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc verticalIconsPlugin.targetProfileForChange[p].displayName } /> - { - badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) && - verticalIconsPlugin.types.includes(badgeStatus.type) ? ( - - ) : null - } + )) : null} diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx index 2dde1a9b1a..57f994540b 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx @@ -5,6 +5,7 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu' // eslint-disable-next-line @typescript-eslint/no-unused-vars import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react' import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' +import Badge from './Badge' interface IconProps { verticalIconPlugin: VerticalIcons @@ -12,6 +13,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical contextMenuAction: (evt: any, profileName: string, documentation: string) => void addActive: (profileName: string) => void removeActive: () => void + badgeStatus?: BadgeStatus } export interface IconStatus { @@ -43,7 +45,9 @@ function Icon ({ verticalIconPlugin, contextMenuAction, addActive, - removeActive + removeActive, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + badgeStatus }: IconProps) { // eslint-disable-next-line @typescript-eslint/no-unused-vars const { tooltip, displayName, name, kind, icon, documentation } = profile @@ -108,8 +112,10 @@ function Icon ({ ref={iconRef} > {name} + - {showContext ? ( void } +const initialState = { + text: '', + key: '', + title: '', + type: '' +} + function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) { + const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState) + + useEffect(() => { + Object.keys(verticalIconsPlugin.targetProfileForChange) + .filter(customFilter) + .forEach(p => + verticalIconsPlugin.on(verticalIconsPlugin.targetProfileForChange[p].name, 'statusChanged', (iconStatus: IconStatus) => { + const action: IconBadgeReducerAction = { + type: verticalIconsPlugin.targetProfileForChange[p].name, + payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } + } + dispatchStatusUpdate(action) + })) + }, []) return (
{ @@ -34,6 +56,7 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove key={ verticalIconsPlugin.targetProfileForChange[p].displayName } + badgeStatus={badgeStatus} /> ))}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx index c78610052b..010aa20366 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx @@ -26,31 +26,31 @@ function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, r removeActive={removeActive} itemContextAction={itemContextAction} /> - - - - - @@ -47,15 +46,8 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc key={ verticalIconsPlugin.targetProfileForChange[p].displayName } + badgeStatus={badgeStatus} /> - { - badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) && - verticalIconsPlugin.types.includes(badgeStatus.type) ? ( - - ) : null - } )) : null} diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx index 22f3069244..1ad8517869 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx @@ -2,7 +2,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical // eslint-disable-next-line no-use-before-define import React, { Fragment, useEffect, useReducer } from 'react' import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer' -import Badge from './Badge' +// import Badge from './Badge' import Icon, { IconStatus } from './Icon' interface SolidityStaticAnalysisProps { @@ -34,7 +34,7 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc ? Object.keys(verticalIconsPlugin.targetProfileForChange) .filter(p => p === 'solidityStaticAnalysis') .map(p => ( -
- { - badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) && - verticalIconsPlugin.types.includes(badgeStatus.type) ? ( - - ) : null - }
)) : null} diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx index 44c592e3f7..91f77bbb9c 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx @@ -1,8 +1,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' // eslint-disable-next-line no-use-before-define -import React, { Fragment, useEffect, useReducer, useRef } from 'react' +import React, { Fragment, useEffect, useReducer } from 'react' import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer' -import Badge from './Badge' import Icon, { IconStatus } from './Icon' interface UdappProps { @@ -21,11 +20,10 @@ const initialState = { function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) { const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState) - const ref = useRef(null) useEffect(() => { verticalIconsPlugin.on('udapp', 'statusChanged', (iconStatus: IconStatus) => { - const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } } + const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } } dispatchStatusUpdate(action) }) }, []) @@ -50,15 +48,8 @@ function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActiv key={ verticalIconsPlugin.targetProfileForChange[p].displayName } + badgeStatus={badgeStatus} /> - { - badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) && - verticalIconsPlugin.types.includes(badgeStatus.type) ? ( - - ) : null - } )) : null} diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts index d0c35b91f3..eaeae111ff 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts +++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts @@ -9,22 +9,12 @@ export type IconBadgeReducerAction = { readonly payload: any } -// const fn = (status: IconStatus) => { -// if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`) -// if (status.key === undefined) throw new Error('status key should be defined') - -// if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) { -// throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join()) -// } -// } - /** * Set a new status for the @arg name * @param {String} name * @param {Object} status */ // eslint-disable-next-line @typescript-eslint/no-unused-vars -// if (!ref.current) return function setIconStatus (name: string, status: IconStatus) { if (status.key === 'none') return { ...status, text: '' } // remove status @@ -41,7 +31,6 @@ function setIconStatus (name: string, status: IconStatus) { thisType = 'danger' // to use with bootstrap } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type! const title = helper.checkSpecialChars(status.title) ? '' : status.title - console.log(`new status for ${name} is :`, { title, type: thisType, key, text }) return { title, type: thisType, key, text } } @@ -49,7 +38,6 @@ export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAc const { status, ref, verticalIconPlugin } = action.payload if (Object.keys(verticalIconPlugin.targetProfileForChange).includes(action.type)) { const setStatus = setIconStatus(action.type, status) - console.log(`from reducer of ${action.type} :`, { setStatus }) return setStatus } return state diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css index 27ecdf7f93..9ecc517187 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css @@ -44,10 +44,11 @@ bottom: 0; } .remixui_status { - /* position: relative; */ + position: relative; bottom: 0; right: 0; - align-self: flex-end; + left: 12px; + top: -13px; } .remixui_statusCheck { font-size: 1.2em; @@ -114,6 +115,10 @@ flex-grow: 1; } + .remixui_iconContainer { + + } + #menuitems { list-style: none; margin: 0px;