Merge pull request #1742 from ethereum/swap_it_Home

landing page styleing

src/app/editor/contextView.js

@@ -31,13 +31,17 @@ class ContextView {
     this.sourceMappingDecoder = new SourceMappingDecoder()
     this.previousElement = null
     this.contextualListener.event.register('contextChanged', nodes => {
+      this.show()
       this._nodes = nodes
       this.update()
     })
+    this.contextualListener.event.register('stopHighlighting', () => {
+      this.hide()
+    })
   }
 
   render () {
-    const view = yo`<div class=${css.contextview}>
+    const view = yo`<div class="${css.contextview} ${css.contextviewcontainer} bg-secondary border-top-0">
       <div class=${css.container}>
         ${this._renderTarget()}
       </div>

src/app/editor/contextualListener.js

@@ -69,7 +69,6 @@ class ContextualListener {
       this.currentPosition = cursorPosition
       return
     }
-    this._stopHighlighting()
     this.currentPosition = cursorPosition
     this.currentFile = file
     if (compilationResult && compilationResult.data && compilationResult.data.sources[file]) {
@@ -79,7 +78,7 @@ class ContextualListener {
         this._highlightExpressions(nodes[nodes.length - 1], compilationResult)
       }
       this.event.trigger('contextChanged', [nodes])
-    }
+    } else this._stopHighlighting()
   }
 
   _buildIndex (compilationResult, source) {
@@ -164,6 +163,7 @@ class ContextualListener {
       const event = this._activeHighlights[eventKey]
       this.editor.removeMarker(event.eventId, event.fileTarget)
     }
+    this.event.trigger('stopHighlighting', [])
     this._activeHighlights = []
   }
 

src/app/editor/styles/contextView-styles.js

@@ -43,6 +43,14 @@ var css = csjs`
     height: 13px;
     margin-right: 5px;
   }
+  .contextviewcontainer{
+    position          : absolute;
+    top               : 39px;
+    z-index           : 50;
+    left              : 350px;
+    border-radius     : 1px;
+    border            : 2px solid var(--secondary);
+  }
 `
 
 module.exports = css

src/app/panels/editor-panel.js

@@ -24,14 +24,7 @@ var css = csjs`
     height            : 100%;
     width             : 100%;
   }
-  .contextviewcontainer{
+  
-    position          : absolute;
-    top               : 39px;
-    z-index           : 50;
-    left              : 350px;
-    border-radius     : 1px;
-    border            : 2px solid var(--secondary);
-  }
 `
 
 class EditorPanel {
@@ -64,12 +57,10 @@ class EditorPanel {
     self._deps.fileManager.events.on('currentFileChanged', (file) => {
       // we check upstream for "fileChanged"
       self._view.editor.style.display = 'block'
-      self._components.contextView.show()
       self._view.mainPanel.style.display = 'none'
     })
     self.tabProxy.event.on('switchFile', (file) => {
       self._view.editor.style.display = 'block'
-      self._components.contextView.show()
       self._view.mainPanel.style.display = 'none'
     })
     self.tabProxy.event.on('closeFile', (file) => {
@@ -185,9 +176,7 @@ class EditorPanel {
     self._view.content = yo`
       <div class=${css.content}>
         ${self.tabProxy.renderTabsbar()}
-        <div class="${css.contextviewcontainer} bg-secondary border-top-0">
+        ${self._components.contextView.render()}
-          ${self._components.contextView.render()}
-        </div>
         ${self._view.editor}
         ${self._view.mainPanel}
         ${self._view.terminal}

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

@@ -1,78 +0,0 @@
-/* global */
-import LandingPage from './landing-page'
-import Section from './section'
-import { defaultWorkspaces } from './workspace'
-// var globalRegistry = require('../../../global/registry')
-
-export function homepageProfile () {
-  return {
-    displayName: 'Home',
-    name: 'home',
-    methods: [],
-    events: [],
-    description: ' - ',
-    icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+',
-    prefferedLocation: 'mainPanel'
-  }
-}
-
-export function generateHomePage (appManager, appStore) {
- /* var actions1 = [
-    { label: 'New file',
-      type: 'callback',
-      payload: () => {
-        let fileManager = globalRegistry.get('fileexplorerbrowser').api
-        fileManager.creatNewFile()
-      }
-    },
-    {label: 'Import from GitHub', type: `callback`, payload: () => { this.alert(`-imported from GitHub-`) }},
-    {label: 'Import from gist', type: `callback`, payload: () => { this.alert(`-imported from gist-`) }}
-  ] */
-
-  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: 'Access local file system with 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 a 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 sectionStart = new Section('Start', actions1)
-  var sectionLearn = new Section('Learn', actions3)
-  var sectionPlugins = new Section('Plugins', actions4)
-  var sectionHelp = new Section('Help', actions5)
-
-  var sectionsWorkspaces = []
-  sectionsWorkspaces.push({
-    label: 'Close All Modules',
-    type: 'callback',
-    payload: () => {
-      appStore.getActives()
-      .filter(({profile}) => !profile.required)
-      .forEach(({profile}) => { appManager.deactivateOne(profile.name) })
-    }})
-  defaultWorkspaces(appManager).forEach((workspace) => {
-    sectionsWorkspaces.push({
-      label: workspace.title,
-      type: 'callback',
-      payload: () => { workspace.activate() }
-    })
-  })
-  var sectionWorkspace = new Section('Workspaces', sectionsWorkspaces)
-
-  return new LandingPage([sectionWorkspace, /* sectionStart, */sectionLearn, sectionPlugins, sectionHelp])
-}

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

@@ -1,47 +1,61 @@
-var yo = require('yo-yo')
+let yo = require('yo-yo')
-var csjs = require('csjs-inject')
+let csjs = require('csjs-inject')
 
 var css = csjs`
-  .item      {
+  .text {
-    display         : flex;
+    background-color : var(--success);
-    flex-direction  : column;
+    cursor: pointer;
-    align-items     : center;
+    color: var(--primary);
-    width           : 400px;
+    font-weight: normal;
-    padding         : 50px;
+  }
-    font-family     : "Lucida Console", Monaco, monospace
+  .text:hover {
-    }
+    font-weight: bold;
-  a:link              {
+  }
-    color           : black;
+  .link {
+    cursor: pointer;
+    background-color : var(--primary);
+    color: var(--success);
+    font-weight: normal;
+    text-decoration : none;
+  }
+  .link:hover {
+    color: var(--success);
+    font-weight: bold;
     text-decoration : none;
   }
-
 `
 
 class Section {
   constructor (title, actions) {
     this.title = title
     this.actions = actions
+    this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-primary' : 'bg-primary text-success border-success'
   }
 
   render () {
-    var sectionLook = yo`
+    let sectionLook = yo`
-      <div class="${css.item}">
+      <div class="card ${this.cardStyle} p-3" style="min-width: 300px;">
-        <h2> ${this.title} </h2>
+        <div class="card-header font-weight-bold">${this.title}</div>
+        <p></p>
       </div>
     `
     for (var i = 0; i < this.actions.length; i++) {
       if (this.actions[i].type === `callback`) {
         sectionLook.appendChild(yo`
-                <div>
+          <div>
-                  <span class='text-warning h6' style="cursor:pointer;" onclick= ${this.actions[i].payload} > ${this.actions[i].label} </span>
+            <span class ="${css.text}" onclick=${this.actions[i].payload} >
-                </div>
+              ${this.actions[i].label}
-              `)
+            </span>
+          </div>
+        `)
       } else if (this.actions[i].type === `link`) {
         sectionLook.appendChild(yo`
-            <div>
+          <div >
-                <a class='text-warning h6' href= ${this.actions[i].payload} target="_blank" > ${this.actions[i].label} </a> 
+            <a class="${css.link} text-decoration-none" href=${this.actions[i].payload} target="_blank" >
-            </div>
+              ${this.actions[i].label}
-          `)
+            </a>
+          </div>
+        `)
       }
     }