Skip to content

B
baas-ide
Unverified Commit f68fde6b authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #422 from ethereum/homeRef

changed the way media panels are shown
parents e14e5f8e 17fc9599
Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 109 deletions
apps/remix-ide/src/app/ui/landing-page/landing-page.js
View file @ f68fde6b
...@@ -32,12 +32,27 @@ let css = csjs` ...@@ -32,12 +32,27 @@ let css = csjs`
margin:30px; margin:30px;
padding-right: 90px; padding-right: 90px;
} }
.mediaBadge {
font-size: 2em;
height: 2em;
width: 2em;
}
.mediaBadge:focus {
outline: none;
}
.logoImg {
height: 10em;
}
.hpSections { .hpSections {
min-width: 640px; min-width: 640px;
} }
.remixHomeMedia { .remixHomeMedia {
overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
max-height: 570px;
}
.panels {
box-shadow: 0px 0px 17px -7px;
} }
.labelIt { .labelIt {
margin-bottom: 0; margin-bottom: 0;
...@@ -49,9 +64,6 @@ let css = csjs` ...@@ -49,9 +64,6 @@ let css = csjs`
.importFrom p { .importFrom p {
margin-right: 10px; margin-right: 10px;
} }
.logoContainer {
float: left;
}
.logoContainer img{ .logoContainer img{
height: 150px; height: 150px;
opacity: 0.7; opacity: 0.7;
...@@ -66,19 +78,11 @@ let css = csjs` ...@@ -66,19 +78,11 @@ let css = csjs`
width: 120px; width: 120px;
height: 70px; height: 70px;
} }
.block input[type='radio']:checked ~ .media{ .media {
width: auto;
display: block;
transition: .5s ease-in;
}
.media{
width: 0;
display: none;
overflow: hidden; overflow: hidden;
transition: .5s ease-out;
}
.mediumPanel {
width: 400px; width: 400px;
transition: .5s ease-out;
z-index: 1000;
} }
} }
` `
...@@ -106,7 +110,7 @@ export class LandingPage extends ViewPlugin { ...@@ -106,7 +110,7 @@ export class LandingPage extends ViewPlugin {
this.twitterFrame = yo` this.twitterFrame = yo`
<div class="px-2 ${css.media}"> <div class="px-2 ${css.media}">
<a class="twitter-timeline" <a class="twitter-timeline"
data-width="400" data-width="350"
data-theme="${themeQuality}" data-theme="${themeQuality}"
data-chrome="nofooter noheader transparent" data-chrome="nofooter noheader transparent"
data-tweet-limit="8" data-tweet-limit="8"
...@@ -116,6 +120,39 @@ export class LandingPage extends ViewPlugin { ...@@ -116,6 +120,39 @@ export class LandingPage extends ViewPlugin {
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div> </div>
` `
this.badgeTwitter = yo`<button
class="btn-info p-2 m-1 border rounded-circle ${css.mediaBadge} fab fa-twitter"
src="assets/img/sleepingRemiCroped.webp"
id="remixIDEHomeTwitterbtn"
onclick=${(e) => this.showMediaPanel(e)}
></button>`
this.badgeMedium = yo`<button
class="btn-danger p-2 m-1 border rounded-circle ${css.mediaBadge} fab fa-medium"
src="assets/img/sleepingRemiCroped.webp"
id="remixIDEHomeMediumbtn"
onclick=${(e) => this.showMediaPanel(e)}
></button>`
this.twitterPanel = yo`
<div id="remixIDE_TwitterBlock" class="p-2 mx-0 mb-0 d-none ${css.remixHomeMedia}">
${this.twitterFrame}
</div>
`
this.mediumPanel = yo`
<div id="remixIDE_MediumBlock" class="p-2 mx-04 mb-0 d-none ${css.remixHomeMedia}">
<div id="medium-widget" class="p-3 ${css.media}">
<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>
`
globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => { globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
console.log("theme is ", theme.quality) console.log("theme is ", theme.quality)
this.onThemeChanged(theme.quality) this.onThemeChanged(theme.quality)
...@@ -127,7 +164,7 @@ export class LandingPage extends ViewPlugin { ...@@ -127,7 +164,7 @@ export class LandingPage extends ViewPlugin {
let twitterFrame = yo` let twitterFrame = yo`
<div class="px-2 ${css.media}"> <div class="px-2 ${css.media}">
<a class="twitter-timeline" <a class="twitter-timeline"
data-width="400" data-width="350"
data-theme="${themeQuality}" data-theme="${themeQuality}"
data-chrome="nofooter noheader transparent" data-chrome="nofooter noheader transparent"
data-tweet-limit="8" data-tweet-limit="8"
...@@ -140,6 +177,18 @@ export class LandingPage extends ViewPlugin { ...@@ -140,6 +177,18 @@ export class LandingPage extends ViewPlugin {
yo.update(this.twitterFrame, twitterFrame) yo.update(this.twitterFrame, twitterFrame)
} }
showMediaPanel (e) {
console.log(e)
if (e.target.id === 'remixIDEHomeTwitterbtn') {
this.mediumPanel.classList.remove('d-block')
this.mediumPanel.classList.add('d-none')
this.twitterPanel.classList.toggle('d-block')
} else {
this.twitterPanel.classList.remove('d-block')
this.twitterPanel.classList.add('d-none')
this.mediumPanel.classList.toggle('d-block')
}
}
render () { render () {
let load = (service, item, examples, info) => { let load = (service, item, examples, info) => {
let compilerImport = new CompilerImport() let compilerImport = new CompilerImport()
...@@ -233,7 +282,11 @@ export class LandingPage extends ViewPlugin { ...@@ -233,7 +282,11 @@ export class LandingPage extends ViewPlugin {
const createLargeButton = (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.cursorStyle}">${envText}</label> <label class="text-uppercase text-dark ${css.cursorStyle}">${envText}</label>
</button> </button>
...@@ -263,107 +316,97 @@ export class LandingPage extends ViewPlugin { ...@@ -263,107 +316,97 @@ export class LandingPage extends ViewPlugin {
query.update({appVersion: '0.7.7'}) query.update({appVersion: '0.7.7'})
document.location.reload() document.location.reload()
} }
const img = yo`<img src="assets/img/sleepingRemiCroped.webp"></img>` const img = yo`<img class=${css.logoImg} src="assets/img/sleepingRemiCroped.webp"></img>`
// to retrieve medium posts // to retrieve medium posts
document.body.appendChild(yo`<script src="https://www.retainable.io/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`) document.body.appendChild(yo`<script src="https://www.retainable.io/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`)
const container = yo` const container = yo`
<div class="${css.homeContainer} d-flex" data-id="landingPageHomeContainer"> <div class="${css.homeContainer} d-flex" data-id="landingPageHomeContainer">
<div class="${css.mainContent} bg-light"> <div class="${css.mainContent} bg-light">
<div class="border-bottom clearfix py-3 align-items-center mb-4"> <div class="d-flex justify-content-between">
<div class="mx-4 ${css.logoContainer}">${img}</div> <div class="d-flex flex-column">
</div> <div class="border-bottom d-flex justify-content-between clearfix py-3 mb-4">
<div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections"> <div class="mx-4 w-100">${img}</div>
<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="d-flex"> <div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
<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"> <div class="ml-3">
<h4>Resources</h4> <div class="plugins mb-5">
<p class="mb-1"> <h4>Featured Plugins</h4>
<i class="mr-1 fas fa-book"></i> <div class="d-flex flex-row pt-2">
<a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a> ${solEnv}
</p> ${pipelineEnv}
<p class="mb-1"> ${mythXEnv}
<i class="mr-1 fab fa-gitter"></i> ${sourceVerifyEnv}
<a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a> ${debuggerEnv}
</p> ${moreEnv}
<p class="mb-1"> </div>
<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 class="d-flex">
</div> <div class="file">
</div><!-- end of hpSections --> <h4>File</h4>
</div> <p class="mb-1">
<div class="d-flex"> <i class="mr-1 far fa-file"></i>
<div id="remixIDE_TwitterBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}"> <span class="ml-1 mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</span>
<input type="radio" name="media" id="remixIDE_TwitterRadio" class="d-none" checked /> </p>
<label class="mx-1 mt-0 mb-1 btn p-0 text-info fab fa-twitter ${css.cursorStyle}" for="remixIDE_TwitterRadio"></label> <p class="mb-1">
${this.twitterFrame} <i class="mr-1 far fa-file-alt"></i>
</div> <span class="ml-1 ${css.labelIt} ${css.text}">
<div id="remixIDE_MediumBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}"> Open Files
<input type="radio" name="media" id="remixIDE_MediumRadio" class="d-none" /> <input title="open file" type="file" onchange="${
<label class="mx-1 mt-0 mb-1 btn p-0 text-danger fab fa-medium ${css.cursorStyle}" for="remixIDE_MediumRadio"></label> (event) => {
<div class="px-2 ${css.media}"> event.stopPropagation()
<div id="medium-widget" class="${css.mediumPanel}"> let fileExplorer = globalRegistry.get('fileexplorer/browser').api
<div fileExplorer.uploadFile(event)
id="retainable-rss-embed" }
data-rss="https://medium.com/feed/remix-ide" }" multiple />
data-maxcols="1" </span>
data-layout="grid" </p>
data-poststyle="external" <p class="mb-1">
data-readmore="More..." <i class="far fa-hdd"></i>
data-buttonclass="btn mb-3" <span class="ml-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</span>
data-offset="-100"> </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-4 pl-4">
<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>
</div><!-- end of hpSections -->
</div>
<div class="d-flex flex-column">
<div class="d-flex pr-2 py-2 align-self-end">
${this.badgeTwitter}
${this.badgeMedium}
</div>
<div class="mr-3 d-flex bg-light ${css.panels}">
${this.mediumPanel}
${this.twitterPanel}
</div> </div>
</div> </div>
</div> </div>
......
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