diff --git a/src/app.js b/src/app.js
index 9dbc0d81eb..9cf6664693 100644
--- a/src/app.js
+++ b/src/app.js
@@ -55,6 +55,8 @@ const FilePanel = require('./app/panels/file-panel')
import PanelsResize from './lib/panels-resize'
import { EntityStore } from './lib/store'
import { RemixAppManager } from './remixAppManager'
+import { generateHomePage, homepageProfile } from './app/ui/landing-page/generate'
+import framingService from './framingService'
var styleGuide = require('./app/ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
@@ -412,10 +414,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
const pluginManagerComponent = new PluginManagerComponent()
const swapPanelComponent = new SwapPanelComponent()
const mainPanelComponent = new SwapPanelComponent()
- const verticalIconComponent = new VerticalIconsComponent()
- const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent) // eslint-disable-line
- const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconComponent) // eslint-disable-line
- const verticalIconsApi = new VerticalIconsApi(verticalIconComponent) // eslint-disable-line
+ const verticalIconsComponent = new VerticalIconsComponent()
+ const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconsComponent) // eslint-disable-line
+ const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line
+ const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line
let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
const appManager = new RemixAppManager(appStore, swapPanelApi, mainPanelApi, verticalIconsApi)
@@ -428,7 +430,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
self._components.fileManager.init()
self._view.mainpanel.appendChild(mainPanelComponent.render())
- self._view.iconpanel.appendChild(verticalIconComponent.render())
+ self._view.iconpanel.appendChild(verticalIconsComponent.render())
self._view.swappanel.appendChild(swapPanelComponent.render())
let filePanel = new FilePanel()
@@ -454,6 +456,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
let configProvider = self._components.filesProviders['config']
appManager.init([
+ { profile: homepageProfile(), api: generateHomePage() },
{ profile: this.profile(), api: this },
{ profile: udapp.profile(), api: udapp },
{ profile: fileManager.profile(), api: fileManager },
@@ -475,26 +478,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
])
appManager.registerMany(appManager.plugins())
- swapPanelApi.event.on('toggle', () => {
- this._components.resizeFeature.panel1.clientWidth !== 0 ? this._components.resizeFeature.minimize() : this._components.resizeFeature.maximise()
- })
- swapPanelApi.event.on('showing', (moduleName) => {
- this._components.resizeFeature.panel1.clientWidth === 0 ? this._components.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') {
- verticalIconComponent.select('file explorers')
- this._components.resizeFeature.maximise()
- return
- }
- this._components.resizeFeature.minimize()
- })
+ framingService.start(appStore, swapPanelApi, verticalIconsApi, mainPanelApi, this._components.resizeFeature)
- verticalIconComponent.select('file explorers')
- verticalIconComponent.select('code editor')
// The event listener needs to be registered as early as possible, because the
// parent will send the message upon the "load" event.
var filesToLoad = null
diff --git a/src/app/components/vertical-icons-api.js b/src/app/components/vertical-icons-api.js
index e97614b9a1..9cfe989471 100644
--- a/src/app/components/vertical-icons-api.js
+++ b/src/app/components/vertical-icons-api.js
@@ -12,5 +12,9 @@ class VerticalIconsApi {
removeIcon (mod) {
this.component.removeIcon(mod)
}
+
+ select (moduleName) {
+ this.component.select(moduleName)
+ }
}
module.exports = VerticalIconsApi
diff --git a/src/app/ui/landing-page/generate.js b/src/app/ui/landing-page/generate.js
new file mode 100644
index 0000000000..134be631a8
--- /dev/null
+++ b/src/app/ui/landing-page/generate.js
@@ -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])
+}
diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
new file mode 100644
index 0000000000..e2cdcdc0e3
--- /dev/null
+++ b/src/app/ui/landing-page/landing-page.js
@@ -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`
+
+
Remix
+
+
+
+
+ `
+ for (var i = 0; i < this.sections.length; i++) {
+ totalLook.appendChild(yo`
+
+ ${this.sections[i].render()}
+
+ `)
+ }
+
+ if (!this._view) {
+ this._view = totalLook
+ }
+ return this._view
+ }
+
+ update () {
+ yo.update(this._view, this.render())
+ }
+}
+
+module.exports = LandingPage
diff --git a/src/app/ui/landing-page/section.js b/src/app/ui/landing-page/section.js
new file mode 100644
index 0000000000..e107841b2c
--- /dev/null
+++ b/src/app/ui/landing-page/section.js
@@ -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`
+
+
${this.title}
+
+
+
+
+ `
+ for (var i = 0; i < this.actions.length; i++) {
+ if (this.actions[i].type === `callback`) {
+ sectionLook.appendChild(yo`
+
+ ${this.actions[i].label}
+
+ `)
+ } else if (this.actions[i].type === `link`) {
+ sectionLook.appendChild(yo`
+
+ `)
+ }
+ }
+
+ if (!this._view) {
+ this._view = sectionLook
+ }
+
+ return this._view
+ }
+
+}
+
+module.exports = Section
diff --git a/src/framingService.js b/src/framingService.js
new file mode 100644
index 0000000000..96db4e30ff
--- /dev/null
+++ b/src/framingService.js
@@ -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')
+ }
+}
+