hiding contextview

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()}
-        </div>
+        ${self._components.contextView.render()}
         ${self._view.editor}
         ${self._view.mainPanel}
         ${self._view.terminal}

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

@@ -34,8 +34,8 @@ class Section {
 
   render () {
     let sectionLook = yo`
-      <div class="card ${this.cardStyle} p-2" style="min-width: 300px;">
-        <div class="card-header">${this.title}</div>
+      <div class="card ${this.cardStyle} p-3" style="min-width: 300px;">
+        <div class="card-header font-weight-bold">${this.title}</div>
         <p></p>
       </div>
     `