adding the modal dialog

pull/5370/head
lianahus 3 years ago committed by yann300
parent 7b2ec3491e
commit 25f9f1958f
  1. 2
      apps/remix-ide/src/app/ui/landing-page/landing-page.js
  2. 1
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
  3. 97
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@ -4,7 +4,6 @@ import ReactDOM from 'react-dom'
import * as packageJson from '../../../../../../package.json'
import { ViewPlugin } from '@remixproject/engine-web'
import { RemixUiHomeTab } from '@remix-ui/home-tab' // eslint-disable-line
import { id } from '@ethersproject/hash'
const yo = require('yo-yo')
const globalRegistry = require('../../../global/registry')
@ -37,7 +36,6 @@ export class LandingPage extends ViewPlugin {
// to retrieve medium posts
document.body.appendChild(yo`<script src="https://www.twilik.com/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`)
document.body.appendChild(yo`<script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>`)
}
render () {

@ -84,3 +84,4 @@
.remixui_migrationBtn {
width: 100px;
}

@ -25,11 +25,15 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
const [state, setState] = useState<{
showBasicMigration: boolean,
themeQuality: { filter: string, name: string },
showMediaPanel: 'none' | 'twitter' | 'medium'
showMediaPanel: 'none' | 'twitter' | 'medium',
showModalDialog: boolean,
modalInfo: { title: string, loadItem: string, examples: Array<string> }
}>({
showBasicMigration: false,
themeQuality: registry.get('themeModule').api.currentTheme().quality === 'dark' ? themes.dark : themes.light,
showMediaPanel: 'none'
showMediaPanel: 'none',
showModalDialog: false,
modalInfo: { title: '', loadItem: '', examples: []}
})
const playRemi = async () => {
@ -45,20 +49,21 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
return { ...prevState, themeQuality: theme.quality === 'dark' ? themes.dark : themes.light }
})
})
window.addEventListener('click', (e) => {
if (e.target.id !== 'remixIDEHomeTwitterbtn' && e.target.id !== 'remixIDEHomeMediumbtn') {
window.addEventListener('click', (event) => {
const { id } = (event.target as HTMLButtonElement).dataset
if ( id !== 'remixIDEHomeTwitterbtn' && id!== 'remixIDEHomeMediumbtn') {
// todo check event.target
setState(prevState => { return { ...prevState, showMediaPanel: 'none' } })
}
})
}, [])
const createNewFile = () => {
plugin.call('filePanel', 'createNewFile')
const createNewFile = async () => {
await plugin.call('filePanel', 'createNewFile')
}
const uploadFile = (target) => {
plugin.call('filePanel', 'uploadFile', target)
const uploadFile = async (target) => {
await plugin.call('filePanel', 'uploadFile', target)
}
const connectToLocalhost = () => {
@ -104,40 +109,61 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
plugin.verticalIcons.select('pluginManager')
}
const load = (service, item, examples, info = '') => {/*
const contentImport = this.contentImport
const fileProviders = registry.get('fileproviders').api
const msg = yo`
<div class="p-2">
<span>Enter the ${item} you would like to load.</span>
<div>${info}</div>
<div>e.g ${examples.map((url) => { return yo`<div class="p-1"><a>${url}</a></div>` })}</div>
</div>`
const showFullMessage = (title: string, loadItem: string, examples: Array<string>) => {
setState(prevState => {
return { ...prevState, modalInfo: { title: title, loadItem: loadItem , examples: examples } }
})
}
const hideFullMessage = () => { //eslint-disable-line
setState(prevState => {
return { ...prevState, showModalDialog: false }
})
}
const title = `Import from ${service}`
modalDialogCustom.prompt(title, msg, null, (target) => {
if (target !== '') {
const processLoading = () => {
const contentImport = plugin.contentImport
const fileProviders = registry.get('fileproviders').api
contentImport.import(
target,
(loadingMsg) => { tooltip(loadingMsg) },
null,//target,
(loadingMsg) => { setState(prevState => { return { ...prevState, tooltip: loadingMsg } }) },
(error, content, cleanUrl, type, url) => {
if (error) {
modalDialogCustom.alert(title, error.message || error)
//modalDialogCustom.alert(state.modalInfo.title, error.message || error)
} else {
try {
fileProviders.workspace.addExternal(type + '/' + cleanUrl, content, url)
this.verticalIcons.select('filePanel')
plugin.call('menuicons', 'select', 'filePanel')
} catch (e) {
modalDialogCustom.alert(title, e.message)
//modalDialogCustom.alert(state.modalInfo.title, e.message)
}
}
}
)
}
})*/
}
const maxHeight = Math.max(window.innerHeight - 150, 200) + 'px'
return (
<>
<ModalDialog
title={ 'Import from ' + state.modalInfo.title }
cancelLabel='Close'
cancelFn={ () => {} }
hide={ !state.showModalDialog }
handleHide={ () => hideFullMessage() }
okFn={ () => processLoading() }
>
<div className="p-2">
{ state.modalInfo.loadItem !== '' && <span>Enter the { state.modalInfo.loadItem } you would like to load.</span> }
{ state.modalInfo.examples.length !== 0 &&
<>
<div>e.g </div>
<div>
{ state.modalInfo.examples.map((url) => { return `<div className="p-1"><a>${url}</a></div>` }) }
</div>
</> }
</div>
</ModalDialog>
<div className="d-flex flex-column" id="remixUiRightPanel">
<div className="border-bottom d-flex flex-column justify-content-between clearfix py-3 mb-4">
<div className="mx-4 w-100 d-flex">
@ -156,11 +182,11 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
<h4>Featured Plugins</h4>
<div className="d-flex flex-row pt-2">
<ThemeContext.Provider value={ state.themeQuality }>
<PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={startSolidity} />
<PluginButton imgPath="assets/img/optimismLogo.webp" envID="optimismLogo" envText="Optimism" callback={startOptimism} />
<PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={startSolhint} />
<PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={startLearnEth} />
<PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={startSourceVerify} />
<PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
<PluginButton imgPath="assets/img/optimismLogo.webp" envID="optimismLogo" envText="Optimism" callback={() => startOptimism()} />
<PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
<PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} />
<PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} />
<PluginButton imgPath="assets/img/moreLogo.webp" envID="moreLogo" envText="More" callback={startPluginManager} />
</ThemeContext.Provider>
</div>
@ -189,9 +215,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
<p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
<div className="btn-group">
<button className="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>Gist</button>
<button className="btn mx-1 btn-secondary" onClick={() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>GitHub</button>
<button className="btn mx-1 btn-secondary" onClick={() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}>Ipfs</button>
<button className="btn mx-1 btn-secondary" onClick={() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol'])}>https</button>
<button className="btn mx-1 btn-secondary" onClick={() => showFullMessage('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>GitHub</button>
<button className="btn mx-1 btn-secondary" onClick={() => showFullMessage('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}>Ipfs</button>
<button className="btn mx-1 btn-secondary" onClick={() => showFullMessage('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol'])}>https</button>
</div>
</div>
<div className="ml-4 pl-4">
@ -272,6 +298,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
</div>
</div>
</div>
</>
)
}

Loading…
Cancel
Save