Skip to content

B
baas-ide
Unverified Commit b3a6133a authored by David Disu's avatar David Disu Committed by GitHub
Browse files
Options

Merge pull request #351 from ethereum/homeRef

Homepage UI refactoring
parents 57a9ba11 deba440e
Show whitespace changes
Inline Side-by-side
Showing with 157 additions and 76 deletions
apps/remix-ide/src/app/ui/landing-page/landing-page.js
View file @ b3a6133a
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
}
}
workspace.json
View file @ b3a6133a
......@@ -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": {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment