David Disu
3 years ago
committed by
GitHub
commit
2df27fe6b4
@ -1,110 +0,0 @@ |
||||
import * as packageJson from '../../../../../package.json' |
||||
import ReactDOM from 'react-dom' |
||||
import React from 'react' // eslint-disable-line
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel' |
||||
import Registry from '../state/registry' |
||||
const { Plugin } = require('@remixproject/engine') |
||||
const EventEmitter = require('events') |
||||
|
||||
const profile = { |
||||
name: 'menuicons', |
||||
displayName: 'Vertical Icons', |
||||
description: '', |
||||
version: packageJson.version, |
||||
methods: ['select', 'unlinkContent'] |
||||
} |
||||
|
||||
// TODO merge with side-panel.js. VerticalIcons should not be a plugin
|
||||
export class VerticalIcons extends Plugin { |
||||
constructor (appManager) { |
||||
super(profile) |
||||
this.events = new EventEmitter() |
||||
this.appManager = appManager |
||||
this.htmlElement = document.createElement('div') |
||||
this.htmlElement.setAttribute('id', 'icon-panel') |
||||
this.icons = {} |
||||
this.iconKind = {} |
||||
this.iconStatus = {} |
||||
this.defaultProfile = profile |
||||
this.targetProfileForChange = {} |
||||
this.targetProfileForRemoval = {} |
||||
this.registry = Registry.getInstance() |
||||
this.keys = ['succeed', 'edited', 'none', 'loading', 'failed'] |
||||
this.types = ['error', 'warning', 'success', 'info', ''] |
||||
} |
||||
|
||||
renderComponent () { |
||||
ReactDOM.render( |
||||
<RemixUiVerticalIconsPanel |
||||
verticalIconsPlugin={this} |
||||
/>, |
||||
this.htmlElement) |
||||
} |
||||
|
||||
onActivation () { |
||||
this.renderComponent() |
||||
} |
||||
|
||||
linkContent (profile) { |
||||
if (!profile.icon) return |
||||
if (!profile.kind) profile.kind = 'none' |
||||
this.targetProfileForChange[profile.name] = profile |
||||
this.listenOnStatus(profile) |
||||
this.renderComponent() |
||||
} |
||||
|
||||
unlinkContent (profile) { |
||||
this.targetProfileForRemoval = profile |
||||
this.removeIcon(profile) |
||||
this.renderComponent() |
||||
} |
||||
|
||||
listenOnStatus (profile) { |
||||
|
||||
} |
||||
|
||||
/** |
||||
* Remove an icon from the map |
||||
* @param {ModuleProfile} profile The profile of the module |
||||
*/ |
||||
removeIcon ({ name }) { |
||||
if (this.targetProfileForChange[name]) delete this.targetProfileForChange[name] |
||||
setTimeout(() => { |
||||
this.renderComponent() |
||||
}, 150) |
||||
} |
||||
|
||||
/** |
||||
* Set an icon as active |
||||
* @param {string} name Name of profile of the module to activate |
||||
*/ |
||||
select (name) { |
||||
// TODO: Only keep `this.emit` (issue#2210)
|
||||
this.emit('showContent', name) |
||||
this.events.emit('showContent', name) |
||||
} |
||||
|
||||
onThemeChanged (themeType) { |
||||
const invert = themeType === 'dark' ? 1 : 0 |
||||
const active = this.view.querySelector('.active') |
||||
if (active) { |
||||
const image = active.querySelector('.image') |
||||
image.style.setProperty('filter', `invert(${invert})`) |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Toggles the side panel for plugin |
||||
* @param {string} name Name of profile of the module to activate |
||||
*/ |
||||
toggle (name) { |
||||
// TODO: Only keep `this.emit` (issue#2210)
|
||||
this.emit('toggleContent', name) |
||||
this.events.emit('toggleContent', name) |
||||
} |
||||
|
||||
render () { |
||||
return this.htmlElement |
||||
} |
||||
} |
||||
@ -0,0 +1,116 @@ |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React from 'react' |
||||
import ReactDOM from 'react-dom' |
||||
import Registry from '../state/registry' |
||||
import packageJson from '../../../../../package.json' |
||||
import { Plugin } from '@remixproject/engine' |
||||
import { EventEmitter } from 'events' |
||||
import { IconRecord, RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel' |
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
import { timeStamp } from 'console' |
||||
|
||||
const profile = { |
||||
name: 'menuicons', |
||||
displayName: 'Vertical Icons', |
||||
description: '', |
||||
version: packageJson.version, |
||||
methods: ['select', 'unlinkContent', 'linkContent'], |
||||
events: ['toggleContent', 'showContent'] |
||||
} |
||||
|
||||
export class VerticalIcons extends Plugin { |
||||
events: EventEmitter |
||||
htmlElement: HTMLDivElement |
||||
icons: Record<string, IconRecord> = {} |
||||
constructor () { |
||||
super(profile) |
||||
this.events = new EventEmitter() |
||||
this.htmlElement = document.createElement('div') |
||||
this.htmlElement.setAttribute('id', 'icon-panel') |
||||
} |
||||
|
||||
renderComponent () { |
||||
const fixedOrder = ['filePanel', 'solidity','udapp', 'debugger', 'solidityStaticAnalysis', 'solidityUnitTesting', 'pluginManager'] |
||||
|
||||
const divived = Object.values(this.icons).map((value) => { return { |
||||
...value, |
||||
isRequired: fixedOrder.indexOf(value.profile.name) > -1 |
||||
}}).sort((a,b) => { |
||||
return a.timestamp - b.timestamp |
||||
}) |
||||
|
||||
const required = divived.filter((value) => value.isRequired).sort((a,b) => { |
||||
return fixedOrder.indexOf(a.profile.name) - fixedOrder.indexOf(b.profile.name) |
||||
}) |
||||
|
||||
const sorted: IconRecord[] = [ |
||||
...required, |
||||
...divived.filter((value) => { return !value.isRequired }) |
||||
] |
||||
|
||||
ReactDOM.render( |
||||
<RemixUiVerticalIconsPanel |
||||
verticalIconsPlugin={this} |
||||
icons={sorted} |
||||
/>, |
||||
this.htmlElement) |
||||
} |
||||
|
||||
onActivation () { |
||||
this.renderComponent() |
||||
this.on('sidePanel', 'focusChanged', (name: string) => { |
||||
Object.keys(this.icons).map((o) => { |
||||
this.icons[o].active = false |
||||
}) |
||||
this.icons[name].active = true |
||||
this.renderComponent() |
||||
}) |
||||
} |
||||
|
||||
async linkContent (profile: Profile) { |
||||
if (!profile.icon) return |
||||
if (!profile.kind) profile.kind = 'none' |
||||
this.icons[profile.name] = { |
||||
profile: profile, |
||||
active: false, |
||||
canbeDeactivated: await this.call('manager', 'canDeactivate', this.profile, profile), |
||||
timestamp: Date.now() |
||||
} |
||||
this.renderComponent() |
||||
} |
||||
|
||||
unlinkContent (profile: Profile) { |
||||
delete this.icons[profile.name] |
||||
this.renderComponent() |
||||
} |
||||
|
||||
async activateHome() { |
||||
await this.call('manager', 'activatePlugin', 'home') |
||||
await this.call('tabs', 'focus', 'home') |
||||
} |
||||
|
||||
/** |
||||
* Set an icon as active |
||||
* @param {string} name Name of profile of the module to activate |
||||
*/ |
||||
select (name: string) { |
||||
// TODO: Only keep `this.emit` (issue#2210)
|
||||
console.log(name, this) |
||||
this.emit('showContent', name) |
||||
this.events.emit('showContent', name) |
||||
} |
||||
|
||||
/** |
||||
* Toggles the side panel for plugin |
||||
* @param {string} name Name of profile of the module to activate |
||||
*/ |
||||
toggle (name: string) { |
||||
// TODO: Only keep `this.emit` (issue#2210)
|
||||
this.emit('toggleContent', name) |
||||
this.events.emit('toggleContent', name) |
||||
} |
||||
|
||||
render () { |
||||
return this.htmlElement |
||||
} |
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
@ -1,82 +1,86 @@ |
||||
.remixui_text { |
||||
.remixui_home_text { |
||||
cursor: pointer; |
||||
font-size: 0.8rem; |
||||
font-weight: normal; |
||||
max-width: 300px; |
||||
} |
||||
.remixui_text:hover { |
||||
.remixui_home_text:hover { |
||||
cursor: pointer; |
||||
text-decoration: underline; |
||||
} |
||||
.remixui_homeContainer { |
||||
.remixui_home_homeContainer { |
||||
overflow-y: hidden; |
||||
overflow-y: auto; |
||||
flex-grow: 3; |
||||
} |
||||
.remixui_hpLogoContainer { |
||||
.remixui_home_hpLogoContainer { |
||||
margin: 30px; |
||||
padding-right: 90px; |
||||
} |
||||
.remixui_mediaBadge { |
||||
.remixui_home_mediaBadge { |
||||
font-size: 2em; |
||||
height: 2em; |
||||
width: 2em; |
||||
} |
||||
.remixui_mediaBadge:focus { |
||||
.remixui_home_mediaBadge:focus { |
||||
outline: none; |
||||
} |
||||
.remixui_image { |
||||
.remixui_home_image { |
||||
height: 1em; |
||||
width: 1em; |
||||
text-align: center; |
||||
} |
||||
.remixui_logoImg { |
||||
.remixui_home_logoImg { |
||||
height: 10em; |
||||
} |
||||
.remixui_rightPanel { |
||||
.remixui_home_rightPanel { |
||||
right: 0; |
||||
position: absolute; |
||||
z-index: 3; |
||||
z-index: 3000; |
||||
} |
||||
.remixui_remixHomeMedia { |
||||
.remixui_home_remixHomeMedia { |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
} |
||||
.remixui_panels { |
||||
.remixui_home_panels { |
||||
box-shadow: 0px 0px 13px -7px; |
||||
} |
||||
.remixui_labelIt { |
||||
.remixui_home_labelIt { |
||||
margin-bottom: 0; |
||||
} |
||||
.remixui_bigLabelSize { |
||||
.remixui_home_bigLabelSize { |
||||
font-size: 13px; |
||||
} |
||||
.remixui_seeAll { |
||||
.remixui_home_seeAll { |
||||
margin-top: 7px; |
||||
white-space: nowrap; |
||||
} |
||||
.remixui_importFrom p { |
||||
.remixui_home_importFrom p { |
||||
margin-right: 10px; |
||||
} |
||||
.remixui_logoContainer img{ |
||||
.remixui_home_logoContainer img{ |
||||
height: 150px; |
||||
opacity: 0.7; |
||||
} |
||||
.remixui_envLogo { |
||||
.remixui_home_envLogo { |
||||
height: 16px; |
||||
} |
||||
.remixui_cursorStyle { |
||||
.remixui_home_cursorStyle { |
||||
cursor: pointer; |
||||
} |
||||
.remixui_envButton { |
||||
.remixui_home_envButton { |
||||
width: 120px; |
||||
height: 70px; |
||||
} |
||||
.remixui_media { |
||||
.remixui_home_media { |
||||
overflow: hidden; |
||||
max-width: 400px; |
||||
transition: .5s ease-out; |
||||
z-index: 1000; |
||||
} |
||||
.remixui_migrationBtn { |
||||
.remixui_home_migrationBtn { |
||||
width: 100px; |
||||
} |
||||
.remixui_home_l2Label { |
||||
bottom: 10px; |
||||
} |
||||
|
||||
@ -1,19 +1,19 @@ |
||||
{ |
||||
"env": { |
||||
"browser": true, |
||||
"es6": true |
||||
"browser": true, |
||||
"es6": true |
||||
}, |
||||
"extends": ["../../../.eslintrc"], |
||||
"ignorePatterns": ["!**/*"], |
||||
"extends": "../../../.eslintrc.json", |
||||
"globals": { |
||||
"Atomics": "readonly", |
||||
"SharedArrayBuffer": "readonly" |
||||
"Atomics": "readonly", |
||||
"SharedArrayBuffer": "readonly" |
||||
}, |
||||
"parserOptions": { |
||||
"ecmaVersion": 11, |
||||
"sourceType": "module" |
||||
"ecmaVersion": 11, |
||||
"sourceType": "module" |
||||
}, |
||||
"rules": { |
||||
"no-unused-vars": "off", |
||||
"@typescript-eslint/no-unused-vars": "error" |
||||
"standard/no-callback-literal": "off" |
||||
} |
||||
} |
||||
} |
||||
@ -1 +1,2 @@ |
||||
export * from './lib/remix-ui-vertical-icons-panel' |
||||
export { default as RemixUiVerticalIconsPanel } from './lib/remix-ui-vertical-icons-panel' |
||||
export { IconRecord } from './lib/types' |
||||
@ -1,41 +0,0 @@ |
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { Fragment } from 'react' |
||||
import Icon from './Icon' |
||||
|
||||
interface DebuggerProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
} |
||||
|
||||
function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) { |
||||
return ( |
||||
<Fragment> |
||||
{verticalIconsPlugin.targetProfileForChange && |
||||
Object.keys(verticalIconsPlugin.targetProfileForChange).length |
||||
? Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(p => p === 'debugger') |
||||
.map(p => ( |
||||
<div id="debuggingIcons" data-id="verticalIconsDebuggingIcons" key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
}> |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
} |
||||
/> |
||||
</div> |
||||
)) |
||||
: null} |
||||
</Fragment> |
||||
) |
||||
} |
||||
|
||||
export default Debugger |
||||
@ -1,59 +0,0 @@ |
||||
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, useRef } from 'react' |
||||
import Icon from './Icon' |
||||
|
||||
interface FilePanelProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
} |
||||
|
||||
function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: FilePanelProps) { |
||||
const filePanelRef = useRef(null) |
||||
function onThemeChanged (themeType: any) { |
||||
const invert = themeType === 'dark' ? 1 : 0 |
||||
// @ts-ignore
|
||||
const active = filePanelRef.current && filePanelRef.current.querySelector('.active') |
||||
if (active) { |
||||
// @ts-ignore
|
||||
const image = filePanelRef.current.querySelector('.remixui_image') |
||||
image.style.setProperty('filter', `invert(${invert})`) |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
const themeModule = verticalIconsPlugin.registry.get('themeModule').api |
||||
themeModule.events.on('themeChanged', (theme: any) => { |
||||
onThemeChanged(theme.quality) |
||||
}) |
||||
}, []) |
||||
|
||||
return ( |
||||
<Fragment> |
||||
{verticalIconsPlugin.targetProfileForChange && |
||||
Object.keys(verticalIconsPlugin.targetProfileForChange).length |
||||
? Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(p => p === 'filePanel') |
||||
.map(p => ( |
||||
<div id="fileExplorerIcons" key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
} data-id="verticalIconsFileExplorerIcons" |
||||
ref={filePanelRef} |
||||
> |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
/> |
||||
</div> |
||||
)) |
||||
: null} |
||||
</Fragment> |
||||
) |
||||
} |
||||
|
||||
export default FilePanel |
||||
@ -0,0 +1,33 @@ |
||||
/* eslint-disable no-use-before-define */ |
||||
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||
import React, { useEffect } from 'react' |
||||
import { IconRecord } from '../types' |
||||
import Icon from './Icon' |
||||
interface OtherIconsProps { |
||||
verticalIconsPlugin: any |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
icons: IconRecord[] |
||||
theme: string |
||||
} |
||||
|
||||
function IconList ({ verticalIconsPlugin, itemContextAction, icons, theme }: OtherIconsProps) { |
||||
return ( |
||||
<div id="otherIcons"> |
||||
{ |
||||
icons |
||||
.map(p => ( |
||||
<Icon |
||||
theme={theme} |
||||
iconRecord={p} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
key={ |
||||
p.profile.name |
||||
} |
||||
/> |
||||
))} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default IconList |
||||
@ -1,43 +0,0 @@ |
||||
/* eslint-disable no-use-before-define */ |
||||
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
import React from 'react' |
||||
import Icon from './Icon' |
||||
|
||||
function customFilter (p: string) { |
||||
if (p !== 'settings' && p !== 'pluginManager' && |
||||
p !== 'filePanel' && p !== 'debugger' && |
||||
p !== 'compiler' && p !== 'solidity' && |
||||
p !== 'udapp' && p !== 'testing' && p !== 'solidityStaticAnalysis') return true |
||||
return false |
||||
} |
||||
interface OtherIconsProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
} |
||||
|
||||
function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) { |
||||
return ( |
||||
<div id="otherIcons"> |
||||
{ |
||||
Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(customFilter) |
||||
.map(p => ( |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
} |
||||
/> |
||||
))} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default OtherIcons |
||||
@ -1,36 +0,0 @@ |
||||
/* eslint-disable no-use-before-define */ |
||||
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
import React, { Fragment } from 'react' |
||||
import Icon from './Icon' |
||||
|
||||
interface PluginManagerProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
} |
||||
|
||||
function PluginManager ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: PluginManagerProps) { |
||||
return ( |
||||
<Fragment> |
||||
{Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(p => p === 'pluginManager') |
||||
.map(p => ( |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
key={ |
||||
verticalIconsPlugin.targetProfileForChange[p] |
||||
.displayName |
||||
} |
||||
/> |
||||
))} |
||||
</Fragment> |
||||
) |
||||
} |
||||
|
||||
export default PluginManager |
||||
@ -1,72 +0,0 @@ |
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { Fragment, MutableRefObject } from 'react' |
||||
import { Chevron } from './Chevron' |
||||
import Debugger from './Debugger' |
||||
import FilePanel from './FilePanel' |
||||
import PluginManager from './PluginManager' |
||||
import Solidity from './Solidity' |
||||
import SolidityStaticAnalysis from './SolidityStaticAnalysis' |
||||
import Udapp from './Udapp' |
||||
|
||||
interface RequiredSectionProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
scrollableRef: MutableRefObject<any> |
||||
} |
||||
|
||||
function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, removeActive, scrollableRef }: RequiredSectionProps) { |
||||
return ( |
||||
<Fragment> |
||||
<FilePanel |
||||
verticalIconsPlugin={verticalIconsPlugin} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
itemContextAction={itemContextAction} |
||||
/> |
||||
<PluginManager |
||||
verticalIconsPlugin={verticalIconsPlugin} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
itemContextAction={itemContextAction} |
||||
/> |
||||
<Solidity |
||||
verticalIconsPlugin={verticalIconsPlugin} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
itemContextAction={itemContextAction} |
||||
/> |
||||
<Udapp |
||||
verticalIconsPlugin={verticalIconsPlugin} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
itemContextAction={itemContextAction} |
||||
/> |
||||
<SolidityStaticAnalysis |
||||
verticalIconsPlugin={verticalIconsPlugin} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
itemContextAction={itemContextAction} |
||||
/> |
||||
<Debugger |
||||
verticalIconsPlugin={verticalIconsPlugin} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
itemContextAction={itemContextAction} |
||||
/> |
||||
{ |
||||
scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight |
||||
? ( |
||||
<Chevron |
||||
divElementRef={scrollableRef} |
||||
cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'} |
||||
/> |
||||
) : null |
||||
} |
||||
</Fragment> |
||||
) |
||||
} |
||||
|
||||
export { RequiredSection } |
||||
@ -1,60 +0,0 @@ |
||||
/* eslint-disable no-use-before-define */ |
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
import React, { useEffect, useRef } from 'react' |
||||
import { Chevron } from './Chevron' |
||||
import Icon from './Icon' |
||||
|
||||
interface SettingsProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
scrollableRef: React.MutableRefObject<any> |
||||
} |
||||
|
||||
function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) { |
||||
const settingsRef = useRef(null) |
||||
function onThemeChanged (themeType: any) { |
||||
const invert = themeType === 'dark' ? 1 : 0 |
||||
// @ts-ignore
|
||||
const active = settingsRef.current.querySelector('.active') |
||||
if (active) { |
||||
// @ts-ignore
|
||||
const image = settingsRef.current.querySelector('.remixui_image') |
||||
image.style.setProperty('filter', `invert(${invert})`) |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
const themeModule = verticalIconsPlugin.registry.get('themeModule').api |
||||
themeModule.events.on('themeChanged', (theme: any) => { |
||||
onThemeChanged(theme.quality) |
||||
}) |
||||
}, []) |
||||
return ( |
||||
<div id="settingsIcons" className="remixui_settings mb-0 flex-grow-0" data-id="vertialIconsSettingsIcons" ref={settingsRef}> |
||||
{ scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? (<Chevron |
||||
divElementRef={scrollableRef} |
||||
cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'} |
||||
/>) : null } |
||||
{Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(p => p === 'settings') |
||||
.map(p => ( |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
key={ |
||||
verticalIconsPlugin.targetProfileForChange[p] |
||||
.displayName |
||||
} |
||||
/> |
||||
))} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default Settings |
||||
@ -1,41 +0,0 @@ |
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { Fragment } from 'react' |
||||
import Icon from './Icon' |
||||
|
||||
interface SolidityProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
} |
||||
|
||||
function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) { |
||||
return ( |
||||
<Fragment> |
||||
{verticalIconsPlugin.targetProfileForChange && |
||||
Object.keys(verticalIconsPlugin.targetProfileForChange).length |
||||
? Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(p => p === 'solidity') |
||||
.map(p => ( |
||||
<div id="compileIcons" key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
}> |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
} |
||||
/> |
||||
</div> |
||||
)) |
||||
: null} |
||||
</Fragment> |
||||
) |
||||
} |
||||
|
||||
export default Solidity |
||||
@ -1,41 +0,0 @@ |
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { Fragment } from 'react' |
||||
import Icon from './Icon' |
||||
|
||||
interface SolidityStaticAnalysisProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
} |
||||
|
||||
function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) { |
||||
return ( |
||||
<Fragment> |
||||
{verticalIconsPlugin.targetProfileForChange && |
||||
Object.keys(verticalIconsPlugin.targetProfileForChange).length |
||||
? Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(p => p === 'solidityStaticAnalysis') |
||||
.map(p => ( |
||||
<div id="analysisIcons" className="remixui_iconContainer" key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
}> |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
} |
||||
/> |
||||
</div> |
||||
)) |
||||
: null} |
||||
</Fragment> |
||||
) |
||||
} |
||||
|
||||
export default SolidityStaticAnalysis |
||||
@ -1,42 +0,0 @@ |
||||
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { Fragment } from 'react' |
||||
import Icon from './Icon' |
||||
|
||||
interface UdappProps { |
||||
verticalIconsPlugin: VerticalIcons |
||||
itemContextAction: (e: any, name: string, documentation: string) => Promise<void> |
||||
addActive: (name: string) => void |
||||
removeActive: () => void |
||||
} |
||||
|
||||
function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) { |
||||
return ( |
||||
<Fragment> |
||||
{verticalIconsPlugin.targetProfileForChange && |
||||
Object.keys(verticalIconsPlugin.targetProfileForChange).length |
||||
? Object.keys(verticalIconsPlugin.targetProfileForChange) |
||||
.filter(p => p === 'udapp') |
||||
.map(p => ( |
||||
<div id="runIcons" data-id="verticalIconsKindUdapp" key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
} |
||||
> |
||||
<Icon |
||||
profile={verticalIconsPlugin.targetProfileForChange[p]} |
||||
verticalIconPlugin={verticalIconsPlugin} |
||||
contextMenuAction={itemContextAction} |
||||
addActive={addActive} |
||||
removeActive={removeActive} |
||||
key={ |
||||
verticalIconsPlugin.targetProfileForChange[p].displayName |
||||
} |
||||
/> |
||||
</div> |
||||
)) |
||||
: null} |
||||
</Fragment> |
||||
) |
||||
} |
||||
|
||||
export default Udapp |
||||
@ -0,0 +1,10 @@ |
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
|
||||
export type IconRecord = { |
||||
profile: Profile |
||||
active: boolean |
||||
class?: string |
||||
canbeDeactivated?: boolean |
||||
isRequired?: boolean |
||||
timestamp: number |
||||
} |
||||
@ -1,21 +1,19 @@ |
||||
{ |
||||
"extends": "../../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react-jsx", |
||||
"jsx": "react", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true, |
||||
"forceConsistentCasingInFileNames": true, |
||||
"strict": true, |
||||
"noImplicitReturns": true, |
||||
"noFallthroughCasesInSwitch": true, |
||||
"resolveJsonModule": true |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.lib.json" |
||||
}, |
||||
{ |
||||
"path": "./tsconfig.spec.json" |
||||
} |
||||
] |
||||
} |
||||
|
||||
@ -1,111 +0,0 @@ |
||||
/* eslint-disable @typescript-eslint/ban-types */ |
||||
/* eslint-disable no-use-before-define */ |
||||
import { Plugin } from '@remixproject/engine/lib/abstract' |
||||
import * as packageJson from '../../../../package.json' |
||||
import Registry from 'apps/remix-ide/src/app/state/registry' |
||||
|
||||
import { RemixAppManager } from '@remix-ui/plugin-manager' |
||||
|
||||
export type Kind = |
||||
| 'fileexplorer' |
||||
| 'compiler' |
||||
| 'udapp' |
||||
| 'testing' |
||||
| 'analysis' |
||||
| 'debugging' |
||||
| 'settings' |
||||
| 'none' |
||||
|
||||
type IconKindType = { |
||||
kind: {} |
||||
} |
||||
|
||||
interface defaultModuleProfile { |
||||
name: string |
||||
displayName: string |
||||
description: string |
||||
version: packageJson.version |
||||
methods: string[] |
||||
} |
||||
|
||||
interface PassedProfile { |
||||
name: string |
||||
displayName: string |
||||
description: string |
||||
version: packageJson.version |
||||
methods: string[] |
||||
icon?: string |
||||
tooltip?: string |
||||
kind?: string |
||||
documentation?: string |
||||
} |
||||
|
||||
interface targetProfileIcons { |
||||
profile: PassedProfile |
||||
} |
||||
export class VerticalIcons extends Plugin<any, any> { |
||||
events: EventEmitter |
||||
appManager: RemixAppManager |
||||
htmlElement: HTMLDivElement |
||||
icons: any |
||||
iconKind: {} |
||||
iconStatus: {} |
||||
defaultProfile: defaultModuleProfile |
||||
targetProfileForChange: any |
||||
targetProfileForRemoval: any |
||||
registry: Registry |
||||
keys: string[] |
||||
types: string[] |
||||
renderComponent(): void |
||||
linkContent(profile: any): void |
||||
unlinkContent(profile: any): void |
||||
listenOnStatus(profile: any): void |
||||
activateHome(): void |
||||
/** |
||||
* Add an icon to the map |
||||
* @param {ModuleProfile} profile The profile of the module |
||||
*/ |
||||
addIcon({ kind, name, icon, displayName, tooltip, documentation }: any): void |
||||
/** |
||||
* resolve a classes list for @arg key |
||||
* @param {Object} key |
||||
* @param {Object} type |
||||
*/ |
||||
resolveClasses(key: any, type: any): any |
||||
/** |
||||
* Set a new status for the @arg name |
||||
* @param {String} name |
||||
* @param {Object} status |
||||
*/ |
||||
setIconStatus(name: string, status: any): void |
||||
/** |
||||
* Remove an icon from the map |
||||
* @param {ModuleProfile} profile The profile of the module |
||||
*/ |
||||
removeIcon({ name }: any): void |
||||
/** |
||||
* Remove active for the current activated icons |
||||
*/ |
||||
removeActive(): void |
||||
/** |
||||
* Add active for the new activated icon |
||||
* @param {string} name Name of profile of the module to activate |
||||
*/ |
||||
addActive(name: string): void |
||||
/** |
||||
* Set an icon as active |
||||
* @param {string} name Name of profile of the module to activate |
||||
*/ |
||||
select(name: string): void |
||||
/** |
||||
* Toggles the side panel for plugin |
||||
* @param {string} name Name of profile of the module to activate |
||||
*/ |
||||
toggle(name: string): void |
||||
updateActivations(name: any): void |
||||
onThemeChanged(themeType: any): void |
||||
itemContextMenu(e: any, name: any, documentation: any): Promise<void> |
||||
render(): any |
||||
view: any |
||||
} |
||||
import EventEmitter = require('events') |
||||
Loading…
Reference in new issue