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
replace-package
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. 224
      apps/remix-ide/src/app/ui/landing-page/landing-page.js
  2. 9
      workspace.json

224
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 csjs = require('csjs-inject')
let globalRegistry = require('../../../global/registry')
@ -6,8 +9,6 @@ var modalDialogCustom = require('../modal-dialog-custom')
var tooltip = require('../tooltip')
var GistHandler = require('../../../lib/gist-handler')
var QueryParams = require('../../../lib/query-params.js')
import * as packageJson from '../../../../../../package.json'
import { ViewPlugin } from '@remixproject/engine'
let css = csjs`
.text {
@ -20,26 +21,24 @@ let css = csjs`
text-decoration: underline;
}
.homeContainer {
user-select:none;
user-select: none;
overflow-y: hidden;
}
.thisJumboton {
padding: 2.5rem 0rem;
margin-bottom: 4rem;
display: flex;
align-items: center;
.mainContent {
overflow-y: auto;
flex-grow: 3;
}
.hpLogoContainer {
margin:30px;
padding-right: 90px;
}
.jumboBtnContainer {
}
.headlineContainer {
margin: 0 50px 0 70px;
}
.hpSections {
min-width: 640px;
}
.remixHomeMedia {
overflow-x: hidden;
overflow-y: auto;
}
.labelIt {
margin-bottom: 0;
}
@ -57,19 +56,30 @@ let css = csjs`
height: 150px;
opacity: 0.7;
}
.enviroments {
display: flex;
}
.envLogo {
height: 16px;
}
.envLabel {
.cursorStyle {
cursor: pointer;
}
.envButton {
width: 120px;
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.verticalIcons = verticalIcons
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 () {
@ -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 = () => {
this.appManager.ensureActivated('solidity')
this.appManager.ensureActivated('udapp')
@ -132,11 +176,6 @@ export class LandingPage extends ViewPlugin {
this.appManager.ensureActivated('solidityUnitTesting')
this.verticalIcons.select('solidity')
}
const startVyper = () => {
this.appManager.ensureActivated('vyper')
this.appManager.ensureActivated('udapp')
this.verticalIcons.select('vyper')
}
/*
const startWorkshop = () => {
this.appManager.ensureActivated('box')
@ -183,37 +222,36 @@ export class LandingPage extends ViewPlugin {
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('solidityLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('vyperLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('pipelineLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('debuggerLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('workshopLogo'))
globalRegistry.get('themeModule').api.fixInvert(document.getElementById('moreLogo'))
})
const createEnvButton = (imgPath, envID, envText, callback) => {
const createLargeButton = (imgPath, envID, envText, callback) => {
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()}>
<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>
`
}
// main
const solEnv = createEnvButton('assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity)
const vyperEnv = createEnvButton('assets/img/vyperLogo.webp', 'vyperLogo', 'Vyper', startVyper)
const solEnv = createLargeButton('assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity)
// Featured
const pipelineEnv = createEnvButton('assets/img/pipelineLogo.webp', 'pipelineLogo', 'Pipeline', startPipeline)
const debuggerEnv = createEnvButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger)
const mythXEnv = createEnvButton('assets/img/mythxLogo.webp', 'mythxLogo', 'MythX', startMythX)
const sourceVerifyEnv = createEnvButton('assets/img/sourceVerifyLogo.webp', 'sourceVerifyLogo', 'Sourcify', startSourceVerify)
const moreEnv = createEnvButton('assets/img/moreLogo.webp', 'moreLogo', 'More', startPluginManager)
const pipelineEnv = createLargeButton('assets/img/pipelineLogo.webp', 'pipelineLogo', 'Pipeline', startPipeline)
const debuggerEnv = createLargeButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger)
const mythXEnv = createLargeButton('assets/img/mythxLogo.webp', 'mythxLogo', 'MythX', startMythX)
const sourceVerifyEnv = createLargeButton('assets/img/sourceVerifyLogo.webp', 'sourceVerifyLogo', 'Sourcify', startSourceVerify)
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})`
vyperEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
pipelineEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
debuggerEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
mythXEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
@ -226,32 +264,38 @@ export class LandingPage extends ViewPlugin {
document.location.reload()
}
const img = yo`<img src="assets/img/sleepingRemiCroped.webp"></img>`
const container = yo`<div class="${css.homeContainer} bg-light" data-id="landingPageHomeContainer">
<div>
<div class="alert alert-info clearfix py-3 ${css.thisJumboton}">
<div class="${css.headlineContainer}">
<div class="${css.logoContainer}">${img}</div>
</div>
<div class="${css.jumboBtnContainer} px-5">
<button class="btn btn-primary mx-3" href="#" onclick=${() => learnMore()} role="button">Learn more</button>
<button class="btn btn-secondary" onclick=${() => switchToPreviousVersion()}>Use previous version</button>
// to retrieve medium posts
document.body.appendChild(yo`<script src="https://www.retainable.io/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`)
const container = yo`
<div class="${css.homeContainer} d-flex" data-id="landingPageHomeContainer">
<div class="${css.mainContent} bg-light">
<div class="border-bottom clearfix py-3 align-items-center mb-4">
<div class="mx-4 ${css.logoContainer}">${img}</div>
</div>
</div><!-- end of jumbotron -->
</div><!-- end of jumbotron container -->
<div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
<div id="col1" class="col-sm-5">
<div class="mb-5">
<h4>Environments</h4>
<div class="${css.enviroments} pt-2">
<div class="ml-3">
<div class="plugins mb-5">
<h4>Featured Plugins</h4>
<div class="d-flex flex-row pt-2">
${solEnv}
${vyperEnv}
${pipelineEnv}
${mythXEnv}
${sourceVerifyEnv}
${debuggerEnv}
${moreEnv}
</div>
</div>
<div class="d-flex">
<div class="file">
<h4>File</h4>
<p class="mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</p>
<p class="mb-1">
<p class="${css.labelIt} ${css.text}">
<i class="mr-1 far fa-file"></i>
<span class="ml-1 mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</span>
</p>
<p class="mb-1">
<i class="mr-1 far fa-file-alt"></i>
<span class="ml-1 ${css.labelIt} ${css.text}">
Open Files
<input title="open file" type="file" onchange="${
(event) => {
@ -260,9 +304,12 @@ export class LandingPage extends ViewPlugin {
fileExplorer.uploadFile(event)
}
}" multiple />
</span>
</p>
<p class="mb-1">
<i class="far fa-hdd"></i>
<span class="ml-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</span>
</p>
<p class="mb-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</p>
<p class="mt-3 mb-0"><label>IMPORT FROM:</label></p>
<div class="btn-group">
<button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
@ -273,29 +320,56 @@ export class LandingPage extends ViewPlugin {
<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>
</div><!-- end of btn-group -->
</div><!-- end of div.file -->
</div><!-- end of #col1 -->
<div id="col2" class="col-sm-7">
<div class="plugins mb-5">
<h4>Featured Plugins</h4>
<div class="d-flex flex-row pt-2">
${pipelineEnv}
${mythXEnv}
${sourceVerifyEnv}
${debuggerEnv}
${moreEnv}
<div class="ml-3">
<h4>Resources</h4>
<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 class="resources">
<h4>Resources</h4>
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a></p>
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
<p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/">Tutorials</a></p>
</div>
</div><!-- end of #col2 -->
</div><!-- end of hpSections -->
</div>`
</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 id="remixIDE_MediumBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
<input type="radio" name="media" id="remixIDE_MediumRadio" class="d-none" />
<label class="mx-1 mt-0 mb-1 btn p-0 text-danger fab fa-medium ${css.cursorStyle}" for="remixIDE_MediumRadio"></label>
<div class="px-2 ${css.media}">
<div id="medium-widget" class="${css.mediumPanel}">
<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>
`
return container
}
}

9
workspace.json
Unescape View File

@ -54,7 +54,14 @@
"builder": "@nrwl/web:dev-server",
"options": {
"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": {
"production": {

Write Preview
Loading…
Cancel
Save