mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

adding the modal dialog

Browse Source
pull/5370/head
lianahus 3 years ago committed by yann300
parent 7b2ec3491e
commit 25f9f1958f
3 changed files with 189 additions and 163 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      apps/remix-ide/src/app/ui/landing-page/landing-page.js
  2. 3
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
  3. 347
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

2
apps/remix-ide/src/app/ui/landing-page/landing-page.js
Unescape View File

@ -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 () {

3
libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
Unescape View File

@ -83,4 +83,5 @@
}
.remixui_migrationBtn {
width: 100px;
}
}

347
libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
Unescape View File

@ -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,174 +109,196 @@ 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 !== '') {
contentImport.import(
target,
(loadingMsg) => { tooltip(loadingMsg) },
(error, content, cleanUrl, type, url) => {
if (error) {
modalDialogCustom.alert(title, error.message || error)
} else {
try {
fileProviders.workspace.addExternal(type + '/' + cleanUrl, content, url)
this.verticalIcons.select('filePanel')
} catch (e) {
modalDialogCustom.alert(title, e.message)
}
}
const processLoading = () => {
const contentImport = plugin.contentImport
const fileProviders = registry.get('fileproviders').api
contentImport.import(
null,//target,
(loadingMsg) => { setState(prevState => { return { ...prevState, tooltip: loadingMsg } }) },
(error, content, cleanUrl, type, url) => {
if (error) {
//modalDialogCustom.alert(state.modalInfo.title, error.message || error)
} else {
try {
fileProviders.workspace.addExternal(type + '/' + cleanUrl, content, url)
plugin.call('menuicons', 'select', 'filePanel')
} catch (e) {
//modalDialogCustom.alert(state.modalInfo.title, e.message)
}
)
}
}
})*/
)
}
const maxHeight = Math.max(window.innerHeight - 150, 200) + 'px'
return (
<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">
<img className="m-4 remixui_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
<audio
id="remiAudio"
muted={false}
src="assets/audio/remiGuitar-single-power-chord-A-minor.wav"
ref={remiAudioEl}
></audio>
</div>
</div>
<div className="row remixui_hpSections mx-4" data-id="landingPageHpSections">
<div className="ml-3">
<div className="mb-5">
<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/moreLogo.webp" envID="moreLogo" envText="More" callback={startPluginManager} />
</ThemeContext.Provider>
<>
<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">
<img className="m-4 remixui_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
<audio
id="remiAudio"
muted={false}
src="assets/audio/remiGuitar-single-power-chord-A-minor.wav"
ref={remiAudioEl}
></audio>
</div>
<div className="d-flex">
<div className="file">
<h4>File</h4>
<p className="mb-1">
<i className="mr-2 far fa-file"></i>
<span className="ml-1 mb-1 remixui_text" onClick={() => createNewFile()}>New File</span>
</p>
<p className="mb-1">
<i className="mr-2 far fa-file-alt"></i>
<label className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text">
Open Files
<input title="open file" type="file" onChange={(event) => {
event.stopPropagation()
uploadFile(event.target)
}} multiple />
</label>
</p>
<p className="mb-1">
<i className="mr-1 far fa-hdd"></i>
<span className="ml-1 remixui_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
</p>
<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>
</div>
<div className="row remixui_hpSections mx-4" data-id="landingPageHpSections">
<div className="ml-3">
<div className="mb-5">
<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/moreLogo.webp" envID="moreLogo" envText="More" callback={startPluginManager} />
</ThemeContext.Provider>
</div>
</div>
<div className="ml-4 pl-4">
<h4>Resources</h4>
<p className="mb-1">
<i className="mr-2 fas fa-book"></i>
<a className="remixui_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
</p>
<p className="mb-1">
<i className="mr-2 fab fa-gitter"></i>
<a className="remixui_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
</p>
<p className="mb-1">
<img id='remixHhomeWebsite' className="mr-2 remixui_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
<a className="remixui_text" target="__blank" href="https://remix-project.org">Featuring website</a>
</p>
<p className="mb-1">
<i className="mr-2 fab fa-ethereum remixui_image"></i>
<span className="remixui_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
</p>
<div className="d-flex">
<div className="file">
<h4>File</h4>
<p className="mb-1">
<i className="mr-2 far fa-file"></i>
<span className="ml-1 mb-1 remixui_text" onClick={() => createNewFile()}>New File</span>
</p>
<p className="mb-1">
<i className="mr-2 far fa-file-alt"></i>
<label className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text">
Open Files
<input title="open file" type="file" onChange={(event) => {
event.stopPropagation()
uploadFile(event.target)
}} multiple />
</label>
</p>
<p className="mb-1">
<i className="mr-1 far fa-hdd"></i>
<span className="ml-1 remixui_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
</p>
<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={() => 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">
<h4>Resources</h4>
<p className="mb-1">
<i className="mr-2 fas fa-book"></i>
<a className="remixui_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
</p>
<p className="mb-1">
<i className="mr-2 fab fa-gitter"></i>
<a className="remixui_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
</p>
<p className="mb-1">
<img id='remixHhomeWebsite' className="mr-2 remixui_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
<a className="remixui_text" target="__blank" href="https://remix-project.org">Featuring website</a>
</p>
<p className="mb-1">
<i className="mr-2 fab fa-ethereum remixui_image"></i>
<span className="remixui_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div className="d-flex flex-column remixui_rightPanel">
<div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle">
<button
className="btn-info p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-twitter"
id="remixIDEHomeTwitterbtn"
title="Medium blogs"
onClick={(e) => {
setState(prevState => {
return { ...prevState, showMediaPanel: state.showMediaPanel === 'twitter' ? 'none' : 'twitter' }
})
_paq.push(['trackEvent', 'pluginManager', 'media', 'twitter'])
}}
></button>
<button
className="btn-danger p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-medium"
id="remixIDEHomeMediumbtn"
title="Twitter"
onClick={(e) => {
setState(prevState => {
return { ...prevState, showMediaPanel: state.showMediaPanel === 'medium' ? 'none' : 'medium' }
})
_paq.push(['trackEvent', 'pluginManager', 'media', 'medium'])
}}
></button>
</div>
<div className="mr-3 d-flex bg-light remixui_panels" id="remixIDEMediaPanels">
{ (state.showMediaPanel === 'medium') && <div id="remixIDE_MediumBlock" className="p-2 mx-0 mb-0 remixui_remixHomeMedia">
<div id="medium-widget" className="p-3 remixui_media" style={ { maxHeight: maxHeight } }>
<div
id="retainable-rss-embed"
data-rss="https://medium.com/feed/remix-ide"
data-maxcols="1"
data-layout="grid"
data-poststyle="external"
data-readmore="More..."
data-buttonclass="btn mb-3"
data-offset="-100"
>
<div className="d-flex flex-column remixui_rightPanel">
<div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle">
<button
className="btn-info p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-twitter"
id="remixIDEHomeTwitterbtn"
title="Medium blogs"
onClick={(e) => {
setState(prevState => {
return { ...prevState, showMediaPanel: state.showMediaPanel === 'twitter' ? 'none' : 'twitter' }
})
_paq.push(['trackEvent', 'pluginManager', 'media', 'twitter'])
}}
></button>
<button
className="btn-danger p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-medium"
id="remixIDEHomeMediumbtn"
title="Twitter"
onClick={(e) => {
setState(prevState => {
return { ...prevState, showMediaPanel: state.showMediaPanel === 'medium' ? 'none' : 'medium' }
})
_paq.push(['trackEvent', 'pluginManager', 'media', 'medium'])
}}
></button>
</div>
<div className="mr-3 d-flex bg-light remixui_panels" id="remixIDEMediaPanels">
{ (state.showMediaPanel === 'medium') && <div id="remixIDE_MediumBlock" className="p-2 mx-0 mb-0 remixui_remixHomeMedia">
<div id="medium-widget" className="p-3 remixui_media" style={ { maxHeight: maxHeight } }>
<div
id="retainable-rss-embed"
data-rss="https://medium.com/feed/remix-ide"
data-maxcols="1"
data-layout="grid"
data-poststyle="external"
data-readmore="More..."
data-buttonclass="btn mb-3"
data-offset="-100"
>
</div>
</div>
</div>
</div> }
{ (state.showMediaPanel === 'twitter') && <div id="remixIDE_TwitterBlock" className="p-2 mx-0 mb-0 remixui_remixHomeMedia">
<div className="px-2 remixui_media" style={ { maxHeight: maxHeight } } >
<a className="twitter-timeline"
data-width="350"
data-theme={ state.themeQuality.name }
data-chrome="nofooter noheader transparent"
data-tweet-limit="8"
href="https://twitter.com/EthereumRemix"
>
</a>
</div>
</div> }
</div> }
{ (state.showMediaPanel === 'twitter') && <div id="remixIDE_TwitterBlock" className="p-2 mx-0 mb-0 remixui_remixHomeMedia">
<div className="px-2 remixui_media" style={ { maxHeight: maxHeight } } >
<a className="twitter-timeline"
data-width="350"
data-theme={ state.themeQuality.name }
data-chrome="nofooter noheader transparent"
data-tweet-limit="8"
href="https://twitter.com/EthereumRemix"
>
</a>
</div>
</div> }
</div>
</div>
</div>
</div>
</>
)
}

Write Preview
Loading…
Cancel
Save