Skip to content

Homepage UI refactoring #351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 3, 2020
Merged

Homepage UI refactoring #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dcd39a9
added icons to homepage items
LianaHus Aug 12, 2020
618d6c3
added last tweets from EthereumRemix
LianaHus Aug 13, 2020
c84249b
bg-color for tweeter bar
LianaHus Aug 13, 2020
3709e06
updateing tweeter panel with theme
LianaHus Aug 31, 2020
842a8a2
better bg colors
LianaHus Aug 17, 2020
9f542e5
moved Previouse version
LianaHus Aug 17, 2020
eb73721
layout fix
LianaHus Aug 17, 2020
deba440
fixed scroll
LianaHus Aug 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
278 changes: 176 additions & 102 deletions apps/remix-ide/src/app/ui/landing-page/landing-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')
Expand All @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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;
}
}
`

Expand All @@ -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 () {
Expand Down Expand Up @@ -123,20 +169,13 @@ 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')
this.appManager.ensureActivated('solidityStaticAnalysis')
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')
Expand Down Expand Up @@ -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})`
Expand All @@ -226,76 +264,112 @@ 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">
${solEnv}
${vyperEnv}
<div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
<div class="ml-3">
<div class="plugins mb-5">
<h4>Featured Plugins</h4>
<div class="d-flex flex-row pt-2">
${solEnv}
${pipelineEnv}
${mythXEnv}
${sourceVerifyEnv}
${debuggerEnv}
${moreEnv}
</div>
</div>
</div>
<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}">
Open Files
<input title="open file" type="file" onchange="${
(event) => {
event.stopPropagation()
let fileExplorer = globalRegistry.get('fileexplorer/browser').api
fileExplorer.uploadFile(event)
}
}" multiple />
</p>
</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>
<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>
<button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
<button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
<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>
<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="d-flex">
<div class="file">
<h4>File</h4>
<p class="mb-1">
<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) => {
event.stopPropagation()
let fileExplorer = globalRegistry.get('fileexplorer/browser').api
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="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>
<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>
<button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
<button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
<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>
<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 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>
</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 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 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><!-- end of #col2 -->
</div><!-- end of hpSections -->
</div>`

</div>
</div>
`
return container
}
}
9 changes: 8 additions & 1 deletion workspace.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down