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

Merge pull request #351 from ethereum/homeRef

Browse Source 
Homepage UI refactoring
pull/395/head
David Disu 4 years ago committed by GitHub
parent 57a9ba115d deba440e7c
commit b3a6133a57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 184 additions and 103 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. 278
      apps/remix-ide/src/app/ui/landing-page/landing-page.js
  2. 9
      workspace.json

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

@ -1,3 +1,6 @@
import * as packageJson from '../../../../../../package.json'
import { ViewPlugin } from '@remixproject/engine'
let yo = require('yo-yo') let yo = require('yo-yo')
let csjs = require('csjs-inject') let csjs = require('csjs-inject')
let globalRegistry = require('../../../global/registry') let globalRegistry = require('../../../global/registry')
@ -6,8 +9,6 @@ var modalDialogCustom = require('../modal-dialog-custom')
var tooltip = require('../tooltip') var tooltip = require('../tooltip')
var GistHandler = require('../../../lib/gist-handler') var GistHandler = require('../../../lib/gist-handler')
var QueryParams = require('../../../lib/query-params.js') var QueryParams = require('../../../lib/query-params.js')
import * as packageJson from '../../../../../../package.json'
import { ViewPlugin } from '@remixproject/engine'
let css = csjs` let css = csjs`
.text { .text {
@ -20,26 +21,24 @@ let css = csjs`
text-decoration: underline; text-decoration: underline;
} }
.homeContainer { .homeContainer {
user-select:none; user-select: none;
overflow-y: hidden;
} }
.thisJumboton { .mainContent {
padding: 2.5rem 0rem; overflow-y: auto;
margin-bottom: 4rem; flex-grow: 3;
display: flex;
align-items: center;
} }
.hpLogoContainer { .hpLogoContainer {
margin:30px; margin:30px;
padding-right: 90px; padding-right: 90px;
} }
.jumboBtnContainer {
}
.headlineContainer {
margin: 0 50px 0 70px;
}
.hpSections { .hpSections {
min-width: 640px; min-width: 640px;
} }
.remixHomeMedia {
overflow-x: hidden;
overflow-y: auto;
}
.labelIt { .labelIt {
margin-bottom: 0; margin-bottom: 0;
} }
@ -57,19 +56,30 @@ let css = csjs`
height: 150px; height: 150px;
opacity: 0.7; opacity: 0.7;
} }
.enviroments {
display: flex;
}
.envLogo { .envLogo {
height: 16px; height: 16px;
} }
.envLabel { .cursorStyle {
cursor: pointer; cursor: pointer;
} }
.envButton { .envButton {
width: 120px; width: 120px;
height: 70px; height: 70px;
} }
.block input[type='radio']:checked ~ .media{
width: auto;
display: block;
transition: .5s ease-in;
}
.media{
width: 0;
display: none;
overflow: hidden;
transition: .5s ease-out;
}
.mediumPanel {
width: 400px;
}
} }
` `
@ -92,6 +102,42 @@ export class LandingPage extends ViewPlugin {
this.appManager = appManager this.appManager = appManager
this.verticalIcons = verticalIcons this.verticalIcons = verticalIcons
this.gistHandler = new GistHandler() this.gistHandler = new GistHandler()
const themeQuality = globalRegistry.get('themeModule').api.currentTheme().quality
this.twitterFrame = yo`
<div class="px-2 ${css.media}">
<a class="twitter-timeline"
data-width="400"
data-theme="${themeQuality}"
data-chrome="nofooter noheader transparent"
data-tweet-limit="8"
href="https://twitter.com/EthereumRemix"
>
</a>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
`
globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
console.log("theme is ", theme.quality)
this.onThemeChanged(theme.quality)
})
}
onThemeChanged (themeQuality) {
console.log("themes in listener is", themeQuality)
let twitterFrame = yo`
<div class="px-2 ${css.media}">
<a class="twitter-timeline"
data-width="400"
data-theme="${themeQuality}"
data-chrome="nofooter noheader transparent"
data-tweet-limit="8"
href="https://twitter.com/EthereumRemix"
>
</a>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
`
yo.update(this.twitterFrame, twitterFrame)
} }
render () { render () {
@ -123,8 +169,6 @@ export class LandingPage extends ViewPlugin {
}) })
} }
const learnMore = () => { window.open('https://remix-ide.readthedocs.io/en/latest/layout.html', '_blank') }
const startSolidity = () => { const startSolidity = () => {
this.appManager.ensureActivated('solidity') this.appManager.ensureActivated('solidity')
this.appManager.ensureActivated('udapp') this.appManager.ensureActivated('udapp')
@ -132,11 +176,6 @@ export class LandingPage extends ViewPlugin {
this.appManager.ensureActivated('solidityUnitTesting') this.appManager.ensureActivated('solidityUnitTesting')
this.verticalIcons.select('solidity') this.verticalIcons.select('solidity')
} }
const startVyper = () => {
this.appManager.ensureActivated('vyper')
this.appManager.ensureActivated('udapp')
this.verticalIcons.select('vyper')
}
/* /*
const startWorkshop = () => { const startWorkshop = () => {
this.appManager.ensureActivated('box') this.appManager.ensureActivated('box')
@ -183,37 +222,36 @@ export class LandingPage extends ViewPlugin {
this.verticalIcons.select('fileExplorers') this.verticalIcons.select('fileExplorers')
} }
globalRegistry.get('themeModule').api.events.on('themeChanged', () => { globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('remixLogo')) globalRegistry.get('themeModule').api.fixInvert(document.getElementById('remixLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('solidityLogo')) globalRegistry.get('themeModule').api.fixInvert(document.getElementById('solidityLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('vyperLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('pipelineLogo')) globalRegistry.get('themeModule').api.fixInvert(document.getElementById('pipelineLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('debuggerLogo')) globalRegistry.get('themeModule').api.fixInvert(document.getElementById('debuggerLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('workshopLogo')) globalRegistry.get('themeModule').api.fixInvert(document.getElementById('workshopLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('moreLogo')) globalRegistry.get('themeModule').api.fixInvert(document.getElementById('moreLogo'))
}) })
const createEnvButton = (imgPath, envID, envText, callback) => { const createLargeButton = (imgPath, envID, envText, callback) => {
return yo` return yo`
<button class="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}> <button class="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}>
<img class="m-2 align-self-center ${css.envLogo}" id=${envID} src="${imgPath}"> <img class="m-2 align-self-center ${css.envLogo}" id=${envID} src="${imgPath}">
<label class="text-uppercase text-dark ${css.envLabel}">${envText}</label> <label class="text-uppercase text-dark ${css.cursorStyle}">${envText}</label>
</button> </button>
` `
} }
// main // main
const solEnv = createEnvButton('assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity) const solEnv = createLargeButton('assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity)
const vyperEnv = createEnvButton('assets/img/vyperLogo.webp', 'vyperLogo', 'Vyper', startVyper)
// Featured // Featured
const pipelineEnv = createEnvButton('assets/img/pipelineLogo.webp', 'pipelineLogo', 'Pipeline', startPipeline) const pipelineEnv = createLargeButton('assets/img/pipelineLogo.webp', 'pipelineLogo', 'Pipeline', startPipeline)
const debuggerEnv = createEnvButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger) const debuggerEnv = createLargeButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger)
const mythXEnv = createEnvButton('assets/img/mythxLogo.webp', 'mythxLogo', 'MythX', startMythX) const mythXEnv = createLargeButton('assets/img/mythxLogo.webp', 'mythxLogo', 'MythX', startMythX)
const sourceVerifyEnv = createEnvButton('assets/img/sourceVerifyLogo.webp', 'sourceVerifyLogo', 'Sourcify', startSourceVerify) const sourceVerifyEnv = createLargeButton('assets/img/sourceVerifyLogo.webp', 'sourceVerifyLogo', 'Sourcify', startSourceVerify)
const moreEnv = createEnvButton('assets/img/moreLogo.webp', 'moreLogo', 'More', startPluginManager) const moreEnv = createLargeButton('assets/img/moreLogo.webp', 'moreLogo', 'More', startPluginManager)
const invertNum = (globalRegistry.get('themeModule').api.currentTheme().quality === 'dark') ? 1 : 0 const themeQuality = globalRegistry.get('themeModule').api.currentTheme().quality
const invertNum = (themeQuality === 'dark') ? 1 : 0
solEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})` solEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
vyperEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
pipelineEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})` pipelineEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
debuggerEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})` debuggerEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
mythXEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})` mythXEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
@ -226,76 +264,112 @@ export class LandingPage extends ViewPlugin {
document.location.reload() document.location.reload()
} }
const img = yo`<img src="assets/img/sleepingRemiCroped.webp"></img>` const img = yo`<img src="assets/img/sleepingRemiCroped.webp"></img>`
const container = yo`<div class="${css.homeContainer} bg-light" data-id="landingPageHomeContainer">
<div> // to retrieve medium posts
<div class="alert alert-info clearfix py-3 ${css.thisJumboton}"> document.body.appendChild(yo`<script src="https://www.retainable.io/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`)
<div class="${css.headlineContainer}"> const container = yo`
<div class="${css.logoContainer}">${img}</div> <div class="${css.homeContainer} d-flex" data-id="landingPageHomeContainer">
</div> <div class="${css.mainContent} bg-light">
<div class="${css.jumboBtnContainer} px-5"> <div class="border-bottom clearfix py-3 align-items-center mb-4">
<button class="btn btn-primary mx-3" href="#" onclick=${() => learnMore()} role="button">Learn more</button> <div class="mx-4 ${css.logoContainer}">${img}</div>
<button class="btn btn-secondary" onclick=${() => switchToPreviousVersion()}>Use previous version</button>
</div> </div>
</div><!-- end of jumbotron --> <div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
</div><!-- end of jumbotron container --> <div class="ml-3">
<div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections"> <div class="plugins mb-5">
<div id="col1" class="col-sm-5"> <h4>Featured Plugins</h4>
<div class="mb-5"> <div class="d-flex flex-row pt-2">
<h4>Environments</h4> ${solEnv}
<div class="${css.enviroments} pt-2"> ${pipelineEnv}
${solEnv} ${mythXEnv}
${vyperEnv} ${sourceVerifyEnv}
${debuggerEnv}
${moreEnv}
</div>
</div> </div>
</div> <div class="d-flex">
<div class="file"> <div class="file">
<h4>File</h4> <h4>File</h4>
<p class="mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</p> <p class="mb-1">
<p class="mb-1"> <i class="mr-1 far fa-file"></i>
<p class="${css.labelIt} ${css.text}"> <span class="ml-1 mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</span>
Open Files </p>
<input title="open file" type="file" onchange="${ <p class="mb-1">
(event) => { <i class="mr-1 far fa-file-alt"></i>
event.stopPropagation() <span class="ml-1 ${css.labelIt} ${css.text}">
let fileExplorer = globalRegistry.get('fileexplorer/browser').api Open Files
fileExplorer.uploadFile(event) <input title="open file" type="file" onchange="${
} (event) => {
}" multiple /> event.stopPropagation()
</p> let fileExplorer = globalRegistry.get('fileexplorer/browser').api
</p> fileExplorer.uploadFile(event)
<p class="mb-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</p> }
<p class="mt-3 mb-0"><label>IMPORT FROM:</label></p> }" multiple />
<div class="btn-group"> </span>
<button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button> </p>
<button class="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:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'])}">GitHub</button> <p class="mb-1">
<button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button> <i class="far fa-hdd"></i>
<button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button> <span class="ml-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</span>
<button class="btn mx-1 btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol'])}">https</button> </p>
<button class="btn mx-1 btn-secondary text-nowrap" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button> <p class="mt-3 mb-0"><label>IMPORT FROM:</label></p>
</div><!-- end of btn-group --> <div class="btn-group">
</div><!-- end of div.file --> <button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
</div><!-- end of #col1 --> <button class="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:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'])}">GitHub</button>
<div id="col2" class="col-sm-7"> <button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
<div class="plugins mb-5"> <button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
<h4>Featured Plugins</h4> <button class="btn mx-1 btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol'])}">https</button>
<div class="d-flex flex-row pt-2"> <button class="btn mx-1 btn-secondary text-nowrap" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
${pipelineEnv} </div><!-- end of btn-group -->
${mythXEnv} </div><!-- end of div.file -->
${sourceVerifyEnv} <div class="ml-3">
${debuggerEnv} <h4>Resources</h4>
${moreEnv} <p class="mb-1">
<i class="mr-1 fas fa-book"></i>
<a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
</p>
<p class="mb-1">
<i class="mr-1 fab fa-gitter"></i>
<a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
</p>
<p class="mb-1">
<i class="mr-1 fab fa-medium"></i>
<a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a>
</p>
<p>
<i class="fab fa-ethereum"></i>
<span class="ml-2 ${css.text}" onclick=${() => switchToPreviousVersion()}>Old experience</span>
</p>
</div>
</div>
</div> </div>
</div><!-- end of hpSections -->
</div>
<div class="d-flex">
<div id="remixIDE_TwitterBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
<input type="radio" name="media" id="remixIDE_TwitterRadio" class="d-none" checked />
<label class="mx-1 mt-0 mb-1 btn p-0 text-info fab fa-twitter ${css.cursorStyle}" for="remixIDE_TwitterRadio"></label>
${this.twitterFrame}
</div> </div>
<div class="resources"> <div id="remixIDE_MediumBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
<h4>Resources</h4> <input type="radio" name="media" id="remixIDE_MediumRadio" class="d-none" />
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a></p> <label class="mx-1 mt-0 mb-1 btn p-0 text-danger fab fa-medium ${css.cursorStyle}" for="remixIDE_MediumRadio"></label>
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p> <div class="px-2 ${css.media}">
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p> <div id="medium-widget" class="${css.mediumPanel}">
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/">Tutorials</a></p> <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> </div>
</div><!-- end of #col2 --> </div>
</div><!-- end of hpSections --> </div>
</div>` `
return container return container
} }
} }

9
workspace.json
Unescape View File

@ -54,7 +54,14 @@
"builder": "@nrwl/web:dev-server", "builder": "@nrwl/web:dev-server",
"options": { "options": {
"buildTarget": "remix-ide:build", "buildTarget": "remix-ide:build",
"port": 8080 "port": 8080,
"exclude": ["**/node_modules/**",
"apps/remix-ide/build/**/*.js",
"apps/remix-ide/src/app/editor/mode-solidity.js",
"apps/remix-ide/soljson.js",
"apps/remix-ide/js/**/*.js",
"apps/remix-ide/src/assets/js/**/*.js"
]
}, },
"configurations": { "configurations": {
"production": { "production": {

Write Preview
Loading…
Cancel
Save