Merge pull request #1677 from ethereum/landingPage.js

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

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

src/app/ui/landing-page/generate.js

+/* 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])
+}

src/app/ui/landing-page/landing-page.js

+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

src/app/ui/landing-page/section.js

+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

src/framingService.js

+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')
+  }
+}
+