Skip to content

changed the way media panels are shown #422

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 5 commits into from
Sep 16, 2020
Merged

changed the way media panels are shown #422

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5ca1481
changed the way media panels are shown
LianaHus Sep 14, 2020
b3cb697
removed outline on media badges when focusing
LianaHus Sep 14, 2020
a9dffbe
fixed syntax error
LianaHus Sep 14, 2020
08e70ec
added margine for media panels
LianaHus Sep 15, 2020
17fc959
less shadow
LianaHus Sep 15, 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
261 changes: 152 additions & 109 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
Expand Up @@ -32,12 +32,27 @@ let css = csjs`
margin:30px;
padding-right: 90px;
}
.mediaBadge {
font-size: 2em;
height: 2em;
width: 2em;
}
.mediaBadge:focus {
outline: none;
}
.logoImg {
height: 10em;
}
.hpSections {
min-width: 640px;
}
.remixHomeMedia {
overflow-x: hidden;
overflow-y: auto;
overflow-x: hidden;
max-height: 570px;
}
.panels {
box-shadow: 0px 0px 17px -7px;
}
.labelIt {
margin-bottom: 0;
Expand All @@ -49,9 +64,6 @@ let css = csjs`
.importFrom p {
margin-right: 10px;
}
.logoContainer {
float: left;
}
.logoContainer img{
height: 150px;
opacity: 0.7;
Expand All @@ -66,19 +78,11 @@ let css = csjs`
width: 120px;
height: 70px;
}
.block input[type='radio']:checked ~ .media{
width: auto;
display: block;
transition: .5s ease-in;
}
.media{
width: 0;
display: none;
.media {
overflow: hidden;
transition: .5s ease-out;
}
.mediumPanel {
width: 400px;
transition: .5s ease-out;
z-index: 1000;
}
}
`
Expand Down Expand Up @@ -106,7 +110,7 @@ export class LandingPage extends ViewPlugin {
this.twitterFrame = yo`
<div class="px-2 ${css.media}">
<a class="twitter-timeline"
data-width="400"
data-width="350"
data-theme="${themeQuality}"
data-chrome="nofooter noheader transparent"
data-tweet-limit="8"
Expand All @@ -116,6 +120,39 @@ export class LandingPage extends ViewPlugin {
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</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) => {
console.log("theme is ", theme.quality)
this.onThemeChanged(theme.quality)
Expand All @@ -127,7 +164,7 @@ export class LandingPage extends ViewPlugin {
let twitterFrame = yo`
<div class="px-2 ${css.media}">
<a class="twitter-timeline"
data-width="400"
data-width="350"
data-theme="${themeQuality}"
data-chrome="nofooter noheader transparent"
data-tweet-limit="8"
Expand All @@ -140,6 +177,18 @@ export class LandingPage extends ViewPlugin {
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 () {
let load = (service, item, examples, info) => {
let compilerImport = new CompilerImport()
Expand Down Expand Up @@ -233,7 +282,11 @@ export class LandingPage extends ViewPlugin {

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()}>
<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.cursorStyle}">${envText}</label>
</button>
Expand Down Expand Up @@ -263,107 +316,97 @@ export class LandingPage extends ViewPlugin {
query.update({appVersion: '0.7.7'})
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
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 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 class="d-flex justify-content-between">
<div class="d-flex flex-column">
<div class="border-bottom d-flex justify-content-between clearfix py-3 mb-4">
<div class="mx-4 w-100">${img}</div>
</div>
</div>
<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="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
<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 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>
</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 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 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-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><!-- 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>
Expand Down