yann300
6 years ago
committed by
GitHub
commit
2198812db3
@ -0,0 +1,56 @@ |
||||
/* global alert */ |
||||
import LandingPage from './landing-page' |
||||
import Section from './section' |
||||
|
||||
export function homepageProfile () { |
||||
return { |
||||
name: 'homepage', |
||||
methods: [], |
||||
events: [], |
||||
description: ' - ', |
||||
icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+', |
||||
prefferedLocation: 'mainPanel' |
||||
} |
||||
} |
||||
|
||||
export function generateHomePage () { |
||||
var actions1 = [ |
||||
{label: 'new file', type: `callback`, payload: () => { alert(`-new file created-`) }}, |
||||
{label: 'import from GitHub', type: `callback`, payload: () => { alert(`-imported from GitHub-`) }}, |
||||
{label: 'import from gist', type: `callback`, payload: () => { alert(`-imported from gist-`) }} |
||||
] |
||||
|
||||
var actions2 = [ |
||||
{label: '...', type: `callback`, payload: () => { alert(`-...-`) }} |
||||
] |
||||
|
||||
var actions3 = [ |
||||
{label: 'Remix documentation', type: `link`, payload: `https://remix.readthedocs.io/en/latest/#`}, |
||||
{label: 'GitHub repository', type: `link`, payload: `https://github.com/ethereum/remix-ide`}, |
||||
{label: 'acces local file system (remixd)', type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html`}, |
||||
{label: 'npm module for remixd', type: `link`, payload: `https://www.npmjs.com/package/remixd`}, |
||||
{label: 'medium posts', type: `link`, payload: `https://medium.com/remix-ide`}, |
||||
{label: 'tutorials', type: `link`, payload: `https://github.com/ethereum/remix-workshops`} |
||||
] |
||||
|
||||
var actions4 = [ |
||||
{label: 'Remix plugins & modules', type: `link`, payload: `https://github.com/ethereum/remix-plugin/blob/master/readme.md`}, |
||||
{label: 'repository on GitHub', type: `link`, payload: `https://github.com/ethereum/remix-plugin`}, |
||||
{label: 'examples', type: `link`, payload: `https://github.com/ethereum/remix-plugin/tree/master/examples`}, |
||||
{label: 'build plugin for Remix', type: `link`, payload: `https://medium.com/remix-ide/build-a-plugin-for-remix-90d43b209c5a`} |
||||
] |
||||
|
||||
var actions5 = [ |
||||
{label: 'Gitter channel', type: `link`, payload: `https://gitter.im/ethereum/remix`}, |
||||
{label: 'Stack Overflow', type: `link`, payload: `https://stackoverflow.com/questions/tagged/remix`}, |
||||
{label: 'Reddit', type: `link`, payload: `https://www.reddit.com/r/ethdev/search?q=remix&restrict_sr=1`} |
||||
] |
||||
|
||||
var section1 = new Section('Start', actions1) |
||||
var section2 = new Section('Recent', actions2) |
||||
var section3 = new Section('Learn', actions3) |
||||
var section4 = new Section('Plugins', actions4) |
||||
var section5 = new Section('Help', actions5) |
||||
|
||||
return new LandingPage([section1, section2, section3, section4, section5]) |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
var yo = require('yo-yo') |
||||
var csjs = require('csjs-inject') |
||||
var css = csjs` |
||||
.container { |
||||
position : static; |
||||
|
||||
box-sizing : border-box; |
||||
|
||||
display : flex; |
||||
flex-direction : column; |
||||
flex-wrap : wrap; |
||||
justify-content : space-between; |
||||
align-items : center; |
||||
align-content : space-around; |
||||
|
||||
border : 2px solid black; |
||||
width : 400px; |
||||
padding : 50px; |
||||
background-color: #bfbfbf; |
||||
font-family : "Lucida Console", Monaco, monospace |
||||
} |
||||
` |
||||
|
||||
class LandingPage { |
||||
constructor (sections) { |
||||
this.sections = sections |
||||
} |
||||
|
||||
render () { |
||||
var totalLook = yo` |
||||
<div class=${css.container}> |
||||
<h1> Remix </h1> |
||||
<br> |
||||
<br> |
||||
<br> |
||||
</div> |
||||
` |
||||
for (var i = 0; i < this.sections.length; i++) { |
||||
totalLook.appendChild(yo` |
||||
<div>
|
||||
${this.sections[i].render()} |
||||
</div> |
||||
`)
|
||||
} |
||||
|
||||
if (!this._view) { |
||||
this._view = totalLook |
||||
} |
||||
return this._view |
||||
} |
||||
|
||||
update () { |
||||
yo.update(this._view, this.render()) |
||||
} |
||||
} |
||||
|
||||
module.exports = LandingPage |
||||
@ -0,0 +1,61 @@ |
||||
var yo = require('yo-yo') |
||||
var csjs = require('csjs-inject') |
||||
|
||||
var css = csjs` |
||||
.item { |
||||
display : flex; |
||||
flex-direction : column; |
||||
align-items : center; |
||||
width : 400px; |
||||
padding : 50px; |
||||
background-color: #bfbfbf; |
||||
font-family : "Lucida Console", Monaco, monospace |
||||
} |
||||
a:link { |
||||
color : black; |
||||
text-decoration : none; |
||||
} |
||||
|
||||
` |
||||
|
||||
class Section { |
||||
constructor (title, actions) { |
||||
this.title = title |
||||
this.actions = actions |
||||
} |
||||
|
||||
render () { |
||||
var sectionLook = yo` |
||||
<div class=${css.item}> |
||||
<h2> ${this.title} </h2> |
||||
<br> |
||||
<br> |
||||
<br> |
||||
</div> |
||||
` |
||||
for (var i = 0; i < this.actions.length; i++) { |
||||
if (this.actions[i].type === `callback`) { |
||||
sectionLook.appendChild(yo` |
||||
<div> |
||||
<span onclick= ${this.actions[i].payload} > ${this.actions[i].label} </span> |
||||
</div> |
||||
`)
|
||||
} else if (this.actions[i].type === `link`) { |
||||
sectionLook.appendChild(yo` |
||||
<div> |
||||
<a href= ${this.actions[i].payload} target="_blank" > ${this.actions[i].label} </a> |
||||
</div> |
||||
`)
|
||||
} |
||||
} |
||||
|
||||
if (!this._view) { |
||||
this._view = sectionLook |
||||
} |
||||
|
||||
return this._view |
||||
} |
||||
|
||||
} |
||||
|
||||
module.exports = Section |
||||
@ -0,0 +1,24 @@ |
||||
export default { |
||||
start: (appStore, swapPanelApi, verticalIconApi, mainPanelApi, resizeFeature) => { |
||||
swapPanelApi.event.on('toggle', () => { |
||||
resizeFeature.panel1.clientWidth !== 0 ? resizeFeature.minimize() : resizeFeature.maximise() |
||||
}) |
||||
swapPanelApi.event.on('showing', (moduleName) => { |
||||
resizeFeature.panel1.clientWidth === 0 ? resizeFeature.maximise() : '' |
||||
var current = appStore.getOne(moduleName) |
||||
// warn the content that it is being displayed. TODO should probably be done in each view
|
||||
if (current && current.api.__showing) current.api.__showing() |
||||
}) |
||||
mainPanelApi.event.on('showing', (moduleName) => { |
||||
if (moduleName === 'code editor') { |
||||
verticalIconApi.select('file explorers') |
||||
resizeFeature.maximise() |
||||
return |
||||
} |
||||
resizeFeature.minimize() |
||||
}) |
||||
resizeFeature.minimize() |
||||
verticalIconApi.select('homepage') |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue